First, what is the box model
When your browser to show an element, the element will take up space. This space consists of four parts.
The middle element of the region presenting content. Outside this area is within the margins . Then the outside is a border . The outermost margins , the outer elements are separated from the other elements.
- quote from the official website MDN
Second, the composition of the box model
Box model consists of four parts as follows:
1, the content area (content)
2, padding (padding): the distance between the filler content and the frame element (setting element background, the background can fill up the area)
3, frame (border)
4, margins (margin): blank region between the current frame and the other elements of the external elements (setting element background, the background does not fill up the area, the background is transparent margin)
Third, the classification box model
1, the cartridge is divided into a W3C standard model and IE box model box model.
2, the difference between the two box model
Standard ①W3C box model: width and height attributes element content area contains only content, does not include padding, padding and border border;
②IE box model: element width and height attributes include content area content, padding padding, frame border, i.e. content + padding + border.
Most modern browsers using the W3C standard box model, ie5 and ie6 using IE box model.
四、box-sizing
1, the role of
CSS3 box-sizing property of a predetermined width and height of the ways of using the computing element. Compatible ie8 +.
2, the value
content-box: a high width element model to calculate a standard cassette, the default value;
border-box: the larger elements using high ie box model calculated;
inherit: element width and height calculated inherit the parent element.
3, chestnuts
1) Add a div, set width 100 * height 100
1 .box { 2 width: 100px; 3 height: 100px; 4 background-color: blue; 5 }
Google browser, F12 review elements:
At this time, div width and height is 100 * 100, i.e., the size of the time div = content size;
2) Then div to add padding
. 1 .box { 2 width : 100px ; . 3 height : 100px ; . 4 background-Color : Blue ; . 5 padding : 20px ; only when a / * padding value indicating the padding elements are vertically and horizontally * 20px / . 6 }
At this time, div width and height is 140 * 140, i.e. in this case the size of div = content + padding;
3) Then div to add borders
1 .box { 2 width: 100px; 3 height: 100px; 4 background-color: blue; 5 padding: 20px; 6 border: 10px solid red; 7 }
At this time, div width and height is 160 * 160, i.e. in this case the size of div = content + padding + border;
4) Finally div to add margins
At this time, the width of the div or 160 * 160, but you can see more than four weeks div 20px width of the blank, that margin will not affect the size of the div.
In summary, we can conclude:
① the default, the box width, height value of the attribute set only the size of the content area of the box and does not include padding and border size;
② = size of the box within the content region + + margin area frame region, and does not include margins margin.
5) Set the div box-sizing of border-box
1 .box { 2 width: 100px; 3 height: 100px; 4 background-color: blue; 5 padding: 20px; 6 border: 10px solid red; 7 margin: 20px; 8 box-sizing: border-box; 9 }
At this time, the size of div to 100 * 100, i.e., when setting box-sizing is border-box, in any case modify the padding, border, margin value, the size of div elements are equal to the values of width and height.
