css盒子模型（标准盒子模型及代替盒子模型）

盒子模型：

css将html元素看作一个个盒子，来设计和布局。盒子有它们的属性，盒子之间也可嵌套

• 属性：margin、padding、border、content
• 根据display属性值的不同，如，block\inline-block\inline（默认），可设置为块模型\内联块模型\内联模型
• 分类：标准模型、IE模型（替代盒子模型）

1.1块模型

• 独占一行
• width、height有效，在不设置width的情况下它会延申到底，即为父元素宽度的100%
• padding、margin、border 会将其他元素从当前盒子周围推开
• 常见的块元素有标题标签、段落标签、图片标签（ul、ol、li等）、div、address、blockquote、dir、dl、fieldset、form、hr、menu、noframes、noscript、pre、table

1.2内联模型

• 不独占一行，即内联元素之间不会换行
• width、height无效，模型的宽度高度是内容的宽度高度
• 垂直方向上的padding、margin、border 生效但不会将上下的相邻元素从当前盒子周围推开
• 常见的内联元素有a、abbr、img、span、em、label、button、sub、sup、cite、code等

当水平方向没有足够的空间放下其余元素时，浏览器会将元素拆分到两行中，但它在逻辑上仍然是一个盒子。这就是说，任何水平的 padding, border, 或者 margin 的设置只会作用于元素占据的第一行的起始位置和最后一行的末尾。

1.3内联块模型

介于块模型和内联模型之间，在排版的时候是内联模型的特征，
与其他控件水平方向并列排放。但显示控件尺寸的时候是块模型特征，具备高度和宽度的设置，没有设置宽度的时候内容撑开宽度

2.1标准盒子模型

width,height = content，不包含border和padding

盒子的宽度 = width + padding * 2 + border * 2

盒子的高度 = height + padding * 2 + border * 2

注意： 盒子的大小不需要算margin！！加上margin的话是盒子占据的位置。

2.2替代盒子模型

width,height = content+padding+border

盒子的宽度是页面上可见框的宽度，因此内容区域的宽度是该宽度减去填充和边框的宽度。

在IE8以前，如果想要兼容的话，就需要用W3C标准，声明。在IE8+，浏览器中使用哪个盒模型可以由box-sizing控制，默认值为content-box，即标准盒模型。

.box { 
  box-sizing: border-box; 
}