The function of the CSS3 box-sizing property is to adjust the calculation method of the inner margin and border of the block . The outermost width of the border of the default DIV block will be affected by the padding value of the inner margin and the thickness of the border , The common situation is that the designer adjusts the padding or the thickness of the border, which causes the width of the entire DIV block to change, which may affect the aesthetics, and the layout of the entire webpage. With the CSS3 box-sizing property, web designers can Control the calculation method of the DIV block border by yourself to improve the problem of running out of width.
CSS3 box-sizing property syntax
box-sizing: setting value;
There are three types of CSS3 box-sizing property setting values, namely content-box, border-box, and inherit, which are organized in the table below.CSS3 box-sizing property can be set
| Parameter value | grammar | Description |
| content-box | box-sizing:content-box; | The width set by DIV is only the content width, and the padding and borders are additionally added. |
| border-box | box-sizing:border-box; | The width set by DIV already includes content width, inner margin and border width. |
| inherit | box-sizing:inherit; | The broder-sizing setting value inherited to the parent layer. |
CSS3 box-sizing property example
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#container{
width:300px;
border:5px blue solid;
margin-bottom:20px;
}
#div_a{
box-sizing:content-box;
-moz-box-sizing:content-box; /* Firefox */
-webkit-box-sizing:content-box; /* Safari */
width:300px;
border:5px orange solid;
padding:5px;
}
#div_b{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:300px;
border:5px orange solid;
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<div id="div_a">This is the effect of using box-sizing:content-box;</div>
</div>
<div id="container">
<div id="div_b">This is the effect of using box-sizing:border-box;</div>
</div>
</body>
</html>
Example output<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#container{
width:300px;
border:5px blue solid;
margin-bottom:20px;
}
#div_a{
box-sizing:content-box;
-moz-box-sizing:content-box; /* Firefox */
-webkit-box-sizing:content-box; /* Safari */
width:300px;
border:5px orange solid;
padding:5px;
}
#div_b{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:300px;
border:5px orange solid;
padding:5px;
}
</style>
</head>
<body>
<div id="container">
<div id="div_a">This is the effect of using box-sizing:content-box;</div>
</div>
<div id="container">
<div id="div_b">This is the effect of using box-sizing:border-box;</div>
</div>
</body>
</html>
This is the effect of using box-sizing: content-box;
This is the effect of using box-sizing: border-box;
The second orange DIV block uses "box-sizing: border-box;", so the total width of the DIV includes the content width, the width occupied by the padding and the width occupied by the border, in other words , The total width of the orange DIV block is still 300px, which will not exceed the range of the blue DIV block .
Note: The width inside the border of the blue DIV block is exactly 300px.
Post a Comment
0 Comments