css盒子模型,就是可以装东西的盒子,比如 div、li、h 等,而 input、img 就不是盒子。
盒模型:包括内容(content)、内边距(padding)、边框(border)、外边距(margin),内容又分为宽(width)和高(height)。
盒模型类型
盒模型分为IE盒模型和W3C标准盒模型。
IE盒模型(border-box)
IE盒模型:width 和 height 包含 content、padding、border。
W3C标准盒子模型
W3C标准盒子模型:与IE盒模型不同,宽和高只包含 content。
两种盒模型的区别
用一个例子说明两个盒模型之间的区别:
div{
width: 200px;
height: 100px;
padding: 20px;
border: 10px;
}
<div></div>
用W3C标准盒模型解释,这个盒子在网页中占据的大小为:
高:content 100 + padding-left 20 + padding-right 20 + border-left 10 + border-right 10 = 160
宽:content 200 + padding-left 20 + padding-right 20 + border-left 10 + border-right 10 = 260
而用IE盒模型解释,这个盒子占据的大小为:
高:content 40 + padding-left 20 + padding-right 20 + border-left 10 + border-right 10 = 100
宽:content 140 + padding-left 20 + padding-right 20 + border-left 10 + border-right 10 = 200
分别用两种盒模型解释,两个盒子的实际大小都为width:200px;height:100px,但在网页中占据的大小不同。
因为IE盒模型设置的 width、height 固定,实际盒模型大小固定为200、100,其中包括设置的 padding 和 border,因此 content 会随之减小,而标准盒模型设置的 **width、height **只包含 content,即 content 固定,不包括设置的 padding 和 border,因此实际占据的大小会随着设置的 padding 和 border 变大。
盒模型切换
两种盒模型的切换也很简单,只需要设置 css3 中的 box-sizing 属性。
// 设置为 ie 盒模型
box-sizing: border-box;
// 设置为w3c标准盒模型
box-sizing: content-box;
实际开发中,padding、border、margin 默认都为0,但浏览器会自动设置元素的 padding 和 margin ,可以用下面的方式覆盖浏览器默认样式。
// * 表示所有元素
* {
margin: 0;
padding: 0;
}