CSS盒模型

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;
}