关于CSS3 中的box-sizing_css禁用bootstrap box-sizing-CSDN博客

本文链接：https://blog.csdn.net/song369585552/article/details/39496227

文章背景：产品原有网站在引入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;

}

问题解决

这样设置的width就是实际width了。

以上只是div浮动时的一个简单的例子。实际布局大家可自由发挥，了解box-sizing的用法就可以了。