Week 4-1 of summer vacation

Yesterday I wrote a mobile phone page. The most important thing to note on the mobile phone page is that the page will change with the size of the mobile phone page, and the mobile phone screen is very small, even a small left and right white space gives a sense of waste and inconsistency.

Therefore, a large number of labels require "width: 100%", but the default algorithm of the element width is "width" = width + padding + margin. The problem it produces is setting width: 100%. with padding and margin, the page on the mobile phone needs to be slide horizontally to see it. I had the honor to experience it. To tell the truth, I felt very bad.

Here I will introduce an element in css3.

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　box-sizing: content-box|border-box|inherit;

Value	Description
Content-box	This is the width and height behavior specified by css2.1. The width and height are respectively applied to the content box of the element. Draw the padding and border of the element beyond the width and height.
Border-box	The width and height set for the element determine the border box of the element. That is to say, any padding and border specified for the element will be drawn within the configured width and height. The width and height of the content can be obtained by subtracting the border and the padding from the configured width and height.
Inherit	Specifies that the value of the box-sizing attribute should be inherited from the parent element.

Box-sizing: border-box; attribute: width = "width" + padding + margin. After setting width: 100%, we can set padding and margin as much as possible ~