CSS3之box-sizing属性分析

CSS中有个box-sizing的属性，特别有意思：

定义：box-sizing: content-box|border-box|inherit; 

解释：box-sizing主要用来规定元素宽高。

①content-box  -  默认属性

    CSS2.1规定的宽度高度行为，宽度和高度分别到元素的内容为止，而内边距和边框不计算在内；

    也就是说，你使用content-box（默认）后，再使用内边距和边框，都会增加元素本身的宽高；

    这样可能会导致一些位置的计算，边距、边框长度会被忽略；

②border-box - CSS3属性

    CSS3这个属性就比较有意思了，它为元素设定的宽度和高度决定了元素的边框盒；

    就是说，为元素指定的任何内边距和边框，都将包含在已设定的宽度和高度内；

    通过从已设定的宽度和高度分别减去边框和内边距，才能得到其内容的宽度和高度；

    这样大大减轻了计算一些临界值的麻烦

实践：多说无益，看例子，

    
这个 div 占据左半部分。

    
这个 div 占据右半部分。

效果图如下（略粗糙，可以自己运行下）：

可以看到，这个box-left的值是包含边框在内的。

我在写滑块插件的时候，计算滑块位置，使用boder-box就省去了很大的计算麻烦。如果使用content-box，在border的宽度会对计算有影响。