CSS based

CSS box model

  • The box consists of margin, border, padding, and content
  • Box-sizing: content-box(default)—- refers to the standard model (its own content width and height + borders and margins)
  • Box-sizing: border-sizing—–

Several ways and differences to obtain the width and height of the box

dom.style.width/height
Copy the code

This method only takes the width and height set by the inline style of the DOM element, which means that if the node’s style is set in the style tag or in an external CSS file, this method does not get the WIDTH and height of the DOM

dom.currentStyle.width/height
Copy the code

Gets the rendered width and height. But only IE supports it

window.getComputedStyle(dom).width/height
Copy the code

Similar to the principle of 2, but better compatibility and versatility

dom.getBoundingClientRect().width/height
Copy the code

Calculate the absolute position of elements, and obtain four elements left,top,width,height

Get browser height and width compatibility

var  w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
var  h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
Copy the code

Flex layout

If you want to know more about Flex layout, please check out Flex layout

Common units

Em: refers to the font size of the parent node. If the font size is defined by itself (the default font size is 16px), 1em is not a fixed value for the entire page. Rem: Viewpoint width = 1vw; viewpoint width = 1vh; viewpoint width = 1vw; viewpoint width = 1vw; viewpoint width = 1vw; viewpoint width = 1vw; viewpoint width = 1vw; viewpoint width = 1vw; viewpoint width = 1vw Viewpoint height = 1% vmin = vw and viewpoint height = 1% viewpoint height = viewpoint height = 1% vmin = vw and viewpoint height = 1% vHCopy the code

Mobile port configuration

<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the minimum - scale = 1.0, the maximum - scale = 1.0, user - scalable = no"> initial-scale: indicates the initial scaling scale minimum-scale: indicates the minimum scaling scale allowed to the user. Maximum-scale: indicates the maximum scaling scale user-scalable: indicates whether the user can scale manuallyCopy the code

What’s the difference between link and @import

1. Link is an HTML tag, which can also define other things like RSS in addition to CSS styles. @import is provided by CSS and can only import CSS. The CSS referenced by @import must be loaded after the page is loaded. 3. Link is an HTML tag, which is not compatible with Internet Explorer 5Copy the code

CSS Float Problem

Float was designed for nothing more than text wrapping.

How to fix the float bug that causes parent element height to collapse? Floating height collapse is not a bug, it’s standard. The float was originally intended only to surround the text.

There are two basic ways to clean up the effects of a float

  • Insert sole of foot clear: both
  • Parent element BFC or HasLayout

Clear usually applies form

BFC or HasLayout is usually declared

A balanced strategy

.clearfix:after{content: ""; display: block; height: 0; overflow: hidden; clear: both; } .clearfix{zoom:1}Copy the code

Better way, no compatibility issues

.clearfix:after{content: ""; display: table; clear: both; } .clearfix{zoom:1}Copy the code

CSS layout

What is layout? Simply put, this is the overall structure or skeleton of an HTML page. Categories began with typesetting in traditional newspapers or magazines. Layout is not a technical thing, but a design idea.

Horizontally centered layout

Horizontal center layout implementation

  • The inline-block + text-align attribute is used together
  • The table + margin attribute is used together
  • Absolute + transform is used together
<div class="parent">
    <div class="child"</div> </div>Copy the code

The first option

Text-align property: sets the alignment of text content. Parent {text-align: center; } .child{display: inline-block; } Advantages: Good browser compatibility; Disadvantages: Attributes are inheritable, resulting in the text of the subset elements being centeredCopy the code

Second option

.child{display: table; margin: 0 auto; } Advantage: only need to set subset elements, can achieve the effect; Disadvantages: Margin invalidates if subset elements leave the document streamCopy the code

Third option

.parent{position: relative; } .child{position: absolute; left: 50%; transform: translateX(-50%); } Advantage: whether the parent element is separated from the document flow does not affect the center effect; Cons: Transform is a new property in CSS3, not very well supported by browsersCopy the code

Vertically centered layout

Vertical center layout implementation

  • The table-cell + vertical-align attribute is used together
  • Absolute + transform is used together

The first option

Vertical-align attribute: used to set the vertical alignment of text content. Parent {display: table-cell; vertical-align: middle; } Advantages: good browser compatibility; Disadvantages: The vertical-align attribute is inherited.Copy the code

Second option

.parent{position: relative; } .child{position: absolute; top: 50%; transform: translateY(-50%); } Advantage: whether the parent element is separated from the document flow does not affect the center effect; Cons: Transform is a new property in CSS3, not very well supported by browsersCopy the code

Horizontally and vertically centered layout

Horizontal and vertical center layout implementation

  • Table + margin centralizes horizontally, and table-cell + vertical-align centralizes vertically
  • Absolute + Transform is centered horizontally and vertically

The first option

.parent{display: table-cell; vertical-align: middle; } .child{display: table; margin: 0 auto; }Copy the code

Second option

.parent{position: relative; } .child{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }Copy the code