css中box-sizing简单说明（标准盒式模型和怪异盒式模型）_html/css_WEB-ITnose

　　今天写程序做布局的时候，遇到关于css中盒式模型的问题，百度了下这属性的解释，脑大啊,文字太绕看不懂。怎么办，于是自己动动手写了段程序测试，嗯，不错，一看效果就恍然大明白了。这里简单说明下，也可能说得比较粗浅。不过希望可以帮到一些前端的朋友。

　　首先说下box-sizing的取值问题，box-sizing的可选值有三个，inheirt，content-box（标准盒式模型）和border-box（ie6等非标准浏览器的怪异盒式模型）；

　　首先说第一个取值content-box，content-box是box-sizing的默认值。意思是：元素实际占用的空间宽度=我们设置的宽度(width)+边框+内间距。假设我们设置一个div的宽度为100px，如果再给这个div设置边框和间距内的话，边框和间距是向外扩展的。导致实际div的实际宽度大于100px。上代码和图一目了然。

      首先定义一个宽和高为100px的div，设置box-sizing为content-box，背景为红色。为了突出显示我们把它放在一张蓝色背景上；

<div id="bx1" style="width:300px;height:300px;background:blue;">        <div id="bx2" style="width:100px;height:100px;background:red;margin:0px auto;box-sizing:content-box;"></div></div>

    显示如下：

    

    为了便于比较我们添加一个新的div，与上一个div的唯一区别就是增加了10px的黄色边框；    

<div id="bx1" style="width:300px;height:300px;background:blue;">        <div id="bx2" style="width:100px;height:100px;background:red;margin:0px auto;box-sizing:content-box;"></div>        <div id="bx3" style="width:100px;height:100px;background:red;margin:10px auto; box-sizing:content-box;border:10px solid yellow"></div></div>

    结果如图：border是在div的外面扩展的。

    

　我们在为新增加的div添加一个10像素的内边距，结果如图内边距也是向外扩展，为什么说内边距是向外扩展的，可以注意“hello”的位置。

#bx3{padding:10px;}

　　

    好吧，讲完一个属性了，现在开始另一个属性，border-box。修改原来的div的box-sizing为border-box。

   border-box是向内扩展的。 如果设置box-sizing成了border-box，元素实际占用的空间的宽度就等于我们设置的宽度，如果设置边框和间距，边框和间距就向内扩展。原先的例子再走一遍吧。（请原谅我是强迫症患者而且我还追求完美）

<div id="bx1" style="width:300px;height:300px;background:blue;">        <div id="bx2" style="width:100px;height:100px;background:red;margin:0px auto;color:white;box-sizing:border-box;">hello</div></div>

    没有边框和间距的初始图：

    

    现在新增一个div用于对比，与原来的div的唯一区别就是多了10px宽的黄色的边框;

<div id="bx1" style="width:300px;height:300px;background:blue;">        <div id="bx2" style="width:100px;height:100px;background:red;margin:0px auto;color:white;box-sizing:border-box;">hello</div>        <div id="bx3" style="width:100px;height:100px;background:red;margin:0px auto;color:white;box-sizing:border-box;border:10px solid yellow">hello</div></div>

　　结果如图：边框向内扩展

      

     接着我们在为div添加10px的内边距；

#bx3{padding:10px;}

　　结果如图：内边距向内扩展，注意“hello”的位置。

      

　　我想到这里对这两个属性大家都和清楚了吧。

     现在总结下，box-sizing取值有三个context-box,border-box和inherit，content-box是box-sizing的默认值，意思是元素实际占用的空间宽度=我们设置的宽度(width)+边框+内间距，我们设置div的宽度后，再加边框和间距，边框和间距是向外扩展的。border-box元素实际占用的空间的宽度就等于我们设置的宽度，如果设置边框和间距，边框和间距就向内扩展。至于inherit属性，应该大家都知道，它爹是什么属性，它就继承什么。

      本来一件很小的事情，竟然?嗦这么久，最后请求这个世界原来完美主义者和强迫症患者，我们是无辜的