The Standard box model:
Outer box dimension calculation (element space size):
Element space height = content Height + inner margin + border + margin
Element space width = content width + inner margin + border + margin
Inner box dimension calculation (element size):
Element height = content Height + inner margin + border
Element width = content Width + inner margin + border
IE traditional box model (IE6 below, excluding IE6):
Outer box dimension calculation (element space size):
Element space height = content height (including height+padding+border) + margin
Element space width = content width (including width+padding+border) + padding + border + margin
Inner box dimension calculation (element size):
Element height = content height (includes height+padding+border)
Element width = content width (includes height+padding+border)
IE6 the actual width of its content is width,padding,border.
Box-sizing:
As mentioned earlier, under the IE Legacy box model, both the border and the padding are contained within the width and height. In a standard browser, the width and height contain only the width of the content, with the exception of borders and padding, which adds a lot of hassle to web design processing. For example, we need a 100px element, the element has 10px of the padding, 1px of the border, in the standard box model has to do a plus minus, and finally arrive at the content width of 100-20-2=78px, and in the IE traditional box model only need to declare the box content equals 100px, The inner margin and border are automatically counted inside. In order to solve this problem, CSS3 added a box model attribute box-sizing, which can define the dimension parsing mode of box model beforehand.
Box-sizing:content-box | Border-box | Inherit
Content-box: The default value, which allows elements to maintain the standard box model.
Border-box: This value causes the element to maintain the IE legacy box model.
Inherit: This value causes the element to inherit the box model pattern of the parent element.
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title></title>
<style>
div{
width:100px;
height:100px;
Background:hsla (360,50%,30%,0.5);
padding:10px;
border:10px solid red;
Box-sizing:content-box;
}
</style>
<body>
<div>sldfkdslml</div>
</body>
Result: Total width of 100+20+20=140px
width:100px;
height:100px;
Background:hsla (360,50%,30%,0.5);
padding:10px;
border:10px solid red;
Box-sizing:border-box;
}
result: Total width is 100px ( Internal padding and borders are included inside)
In the IE traditional box model (Border-box), the box size is unchanged.
IE6 the following version of the model of the box is not in accordance with the standard specification, but this method is not useless, it also has a good side: no matter if you modify the border of the element or the size of the padding, it will not affect the total size of the element box, it will not disrupt the overall layout of the page. In the standard browser, according to the specification of the box model analysis, once the elements of the border or the padding, it will affect the size of the element box, it will have to recalculate the box size of the element, thus affecting the layout of the entire page.
Box model comparison
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
