CSS3之box-sizing属性分析

来源：互联网发布：基金公司招聘条件知乎编辑：程序博客网时间：2024/04/30 08:35

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

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

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

①content-box - 默认属性

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

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

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

②border-box - CSS3属性

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

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

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

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

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

<!DOCTYPE html><html><head><style> div.bar{    box-sizing:border-box;    -moz-box-sizing:border-box; /* Firefox */    -webkit-box-sizing:border-box; /* Safari */    width:50%;    border:10px solid red;    float:left;    position: relative;    left: 50px;}div.box{   width: 20px;   height: 20px;   background: #000;   position:absolute;   left: 80px;   top: 0;}</style></head><body>    <div class="bar">这个 div 占据左半部分。<div class="box"></div></div>    <div class="bar">这个 div 占据右半部分。</div><script>   var bar = document.getElementsByClassName('bar')[0];   var box = document.getElementsByClassName('box')[0];   bar.onclick = function(e){     alert(e.pageX-parseFloat(bar.offsetLeft))  //等于box-left的值   }</script></body></html>

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

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

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

0 0