CSS标准盒模型

CSS将页面中的所有元素都设置为一个矩形盒子
CSS对页面的布局，即对不同的盒子在网页中进行定位
每个盒子由以下几个部分组成：

内容区(content)

• 元素中的所有内容,子元素,文本等都在内容区中
• 内容区的大小由宽度width、高度height属性来设置
• 内容区的背景颜色由background属性来设置

内边距(padding)

• 含义/作用：内容区到边框之间的距离
• 属性名：padding-top padding-right padding-bottom padding-left
• 属性值：间距值
• 简写：padding:（上右下左顺序）
• 内边距的设置会影响到盒子的大小

边框(border)

• 含义：边框属于盒子边缘，边框里属于盒子内部，边框外属于盒子外部
• 作用：划定当前元素与其他元素之间的分割线
• 属性名：border-style border-color border-width
  -（border-top border-right border-bottom border-left） （上右下左顺序）
• 属性值：border-style默认none；border-color默认为黑色；border-width默认2-3px
• 简写：border: border-style border-color border-width(无顺序区分)
• 边框的设置会影响到盒子的大小

对于一个CSS盒模型来说，它的可见框的实际宽度或高度是由内容区、内边距和边框决定的。即：
W=border-left + padding-left + width(content) + padding-right + border-right
H=border-top + padding-top + height(content) + padding-bottom + border-bottom

外边距(margin)

• 作用：调整当前元素与其他元素之间的距离
• 属性名：margin-top margin-right margin-bottom margin-left
• 属性值：间距值（可为负值 ）
• 简写：margin:（上右下左顺序）
• 外边距不会影响的盒子可见框的大小，但会影响盒子的位置
• 需注意垂直外边距的折叠现象，必要时进行修正

元素在页面中是按照自左向右的顺序排列的；所以，默认情况下，设置margin-top和margin-left会移动元素自身，设置margin-bottom和margin-right会移动其他元素。

*补充 *

一. CSS IE 盒模型

• CSS IE盒模型和标准盒模型的差别在于，CSS
  IE盒模型的宽度width和高度height指的是包括内容区、内边距和边框的总宽度和高度，即可见框的宽度和高度。
• 实际上，CSS3新增了一个属性box-sizing:content-box | border-box |
  inherit，默认值为content-box。如果为默认值，则元素遵循的是W3C标准盒模型，如果值为border-box，则元素遵循的是IE盒模型；如果值为inherit,该属性的值应该从父元素继承。

二. 行内元素的盒模型

• 行内元素不支持设置宽度width和高度height
• 行内元素可以设置padding/border/margin，但垂直方向的padding/border/margin不会影响页面的布局，水平方向则按属性值增加
• display属性可以用于设置元素显示的类型：
  inline 设置显示为行内元素
  block 设置显示为块状元素
  inline-block 设置显示为行内块元素（可设置宽度和高度，但不会独占一行）
  table 设置显示为表格
  none 设置不显示