什么是盒模型
网页渲染的时候,所有的元素都会被浏览器引擎根据CSS-Box模型描述为一个盒子,CSS会决定这些盒子的大小, 位置, 属性(颜色, 边框...)。盒子模型由内容(content)、内边距(padding)、边框(border)、外边距(margin)组成。但盒子的大小由content+padding+border这几部分决定,把margin算进去的那是盒子占据的位置,而不是盒子的大小。
盒模型的分类
盒模型分为两类: IE盒模型(或怪异模型)和标准盒模型。
两者的区别在于:
- IE盒模型:width/height = content + border + padding
- W3C标准盒模型:width/height = content
1. 标准盒模型
从图中可以看出我设置的宽高为150,内边距为10,边框为5,下边距10,而元素真正呈现的是180。即width(150) + padding(2 * 10) + border(5 * 2) = 180
2. IE盒模型
从图中可以看出我设置的宽高为150,内边距为10,边框为5,下边距10,而元素真正呈现的依然是150,内容的宽度(content)变为了120,但是盒子的大小并未发生改变。
两种盒模型的优缺点
举个栗子
<style>
.content-box {
width: 150px;
height: 150px;
background: #fff;
margin-bottom: 200px;
}
.child1 {
float: left;
width: 50%;
height: 100px;
padding: 10px;
border: 5px solid red;
background: #ccc;
}
.border-box {
width: 150px;
height: 150px;
background: #fff;
}
.child2 {
float: left;
width: 50%;
height: 100px;
padding: 10px;
box-sizing: border-box;
border: 5px solid red;
background: #ccc;
}
</style>
<body>
<div class="content-box">
<div class="child1">子元素1</div>
<div class="child1">子元素1</div>
</div>
<div class="border-box">
<div class="child2">子元素1</div>
<div class="child2">子元素1</div>
</div>
</body>
我同时设置了两个子元素宽度都是父元素的50%;当想在子元素内加padding或者border时,标准模型盒子的实际宽度就会超过50%,导致换行。如果强行想让子元素在同一行内,就不能设置宽度为50%,而应该通过计算width:cacl(50% - 2 * padding - 2 * border);而对于IE盒模型,内容的宽度会根据padding和border进行调整,元素的真实宽度始终是50%,所以不会导致换行。
改变盒模型
目前在ie8+以及其他浏览器中盒模型默认值为content-box,即标准盒模型。可以通过box-sizing进行切换。
box-sizing: content-box|border-box|inherit;
- content-box (标准盒模型)
- border-box(IE盒模型)
- inherit (规定应从父元素继承 box-sizing 属性的值)
结语
大家可以根据自己的需要,通过box-sizing来愉快地改变盒子模型啦~