首先学习box-sizing布局之前,来了解一下css盒子模型(Box Model)
盒子模型(Box Model)
一般来说,css盒子模型有两种模式:
- W3C的标准模型 相当于 box-sizing:content-box
我们对元素设置的宽度和高度就是内容(content)的宽度和高度,也就是内盒子的宽度;外盒子的宽度包括:content+padding+border的
- IE的传统模型 相当于box-sizing:border-box
这个模型下,我们设置的宽度和高度是包括:content+padding+border的,此时这个宽度和高度,相当于我们在W3C模型下面的宽度和高度。其内容的宽度比我们设置的宽度要小的。
box-sizing:content-box
默认值,标准的盒模型,width和height只包括内容(content)的宽度和高度,不包括border,padding,margin,这些都是盒子的外部。
ps:当我们设置好了宽度和高度的时候,其外盒子的宽度和高度基本上就定了,当我们想在内容(content)外面设置padding和margin或者border时,非常容易破坏我们的布局,此时我们就需要想到box-sizing:border-box
box-sizing:border-box
这个模式下,当我们设置了盒子宽度和高度的时候,其包括:content+padding+border,但是不包括margin。
ps如果计算的content的内容宽度为负值,其都会被计算为0,内容还在,故不能通过border-box来隐藏元素。元素的内容宽度和高度是在我们设置的宽度和高度的里面渲染的。当我们想给元素添加border或者padding时,这个模型不会破坏我们的布局,因为其会适当的调整我们内容content的宽度和高度来满足。故可以用来设置自适应布局
案例:box-sizing三栏布局
html代码:
<div class="left"></div>
<div class="mid"></div>
<div class="right"></div>
cssd代码:
div{
height: 600px;
float: left;
}
.left{
width: 25%;
background: #000000;
}
.mid{
/*默认是box-sizing:content-box*/
box-sizing: content-box;
width: 50%;
background: #ff00ff;
}
.right{
width: 25%;
background: #ffff00;
}
当我们试着给粉红色加上border的时候,你会发现,黄色掉下去了,因为此时的宽度正好是body的100%,其是标准的盒子模型。但是我们一定要给中间的加上padding,那咋办?此时我们可以给中间的添加:
> box-sizing:border-box
之后,再去给中间的加上padding就可以了,不管我们怎么设置padding的大小,其布局依然完好。
box-sizing的另外一个作用是在表单元素上面调整布局,因为我们的表单元素还有一部分是IE的传统盒子模型,详情参考:W3Cplus
欢迎访问我的github