文章背景:产品原有网站在引入bootstrap之后,发现了些部分宽度和高度被缩短的问题,
查询了下bootstrap.css发现如下代码
*,*:before,*:after{
box-sizing:border-box;
}
于是搜索了下下box-sizing:border-box的用法
box-sizing:content-box | border-box
默认值:content-box
取值
<strong>content-box:</strong>
padding和border不被包含在定义的width和height之内。
对象的实际宽度等于设置的width值和border、padding以及margin之和,即 ( Element width = width + border + padding+margin )
此属性表现为标准模式下的盒模型。
<strong>border-box:</strong>
padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值,
即使定义有border和padding也不会改变对象的实际宽度,即 ( Element width = width )
此属性表现为怪异模式下的盒模型。
<strong>示例:</strong>
content-box:
.test1{
<span style="white-space:pre"> </span>box-sizing:content-box;
<span style="white-space:pre"> </span>width:200px;
<span style="white-space:pre"> </span>padding:10px;
<span style="white-space:pre"> </span>border:15px solid #eee;
}
盒内宽度为:200+10*2+15*2 = 250
border-box:
.test2{
<span style="white-space:pre"> </span>box-sizing:border-box;
<span style="white-space:pre"> </span>width:200px;
<span style="white-space:pre"> </span>padding:10px;
<span style="white-space:pre"> </span>border:15px solid #eee;
}
盒内宽度为:200-10*2-15*2 = 150
</pre><p></p><pre>
ok,果断明白了,下面举个正在用的例子,来一个一行四列的布局
<html>
<head>
<title>box-sizing</title>
<style type="text/css">
.row{
width:100%;
}
.col{
width: 25%;
float:left;
min-height: 20px;
}
.green{
background-color: green;
}
.red{
background-color: red;
}
</style>
</head>
<body>
<div class="row">
<div class="col green"></div>
<div class="col red"></div>
<div class="col green"></div>
<div class="col red"></div>
</div>
</body>
</html>
ok简单的一个一行四列布局。
看起来不错,加个边框吧
.col{
width: 25%;
float:left;
min-height: 20px;
<span style="color:#ff0000;"> border:1px solid black;</span>
}
尼玛,跑到下一行了。
好吧 因为(25%+2px)*4>100%了
所以加上boxsizing:border-box
.col{
width: 25%;
float:left;
min-height: 20px;
border:1px solid black;
box-sizing:border-box;
}
问题解决
以上只是div浮动时的一个简单的例子。实际布局大家可自由发挥,了解box-sizing的用法就可以了。