CSS盒模型（Box Model）

在css中一般有两种盒模型标准，一种是W3C标准盒模型，另一种是IE标准盒模型。
大多数浏览器采用W3C标准模型，而IE中采用Microsoft自己的标准。
怪异模式是“部分浏览器在支持W3C标准的同时还保留了原来的解析模式”，怪异模式主要表现再IE内核的浏览器。
当不对Doctype进行定义时，会触发怪异模式。

两种盒模型的区别在于盒模型的计算方式不同，后面会提到可以通过CSS3中新增的属性box-sizing来控制两种盒模型的转换。

接下来以W3C标准来分析css盒模型到底是什么东西。

content-box

width

• 指定content box 宽度
• 百分数相对于父容器(包含块)的content box 宽度

height

• 指定content box 高度
• 百分数相对于父容器(包含块)的content box 高度
• 只有当包含块的高度不依赖该元素是,百分比高度才会生效

padding

• 内边距
• padding-top , padding-right , padding-bottom , padding-left
• 缩写： padding

margin

• 外边距
• margin-top , margin-right , margin-bottom , margin-left
• 缩写： margin
• 外边距合并现象
• margin值可以使负的，说明两个盒子可以重叠

min-width & max-width

• 设置元素的最小宽度和最大宽度

min-height & max-height

• 设置元素的最小高度和最大高度

overflow

• 溢出控制
• 取值：visiable | hidden | scroll | auto
• 初始值：visiable
• overflow-x & overflow-y
  • 可以控制水平和垂直方向上的溢出

box-sizing

• 这个属性可以控制盒模型的计算方式
• 取值 ： border-box | content-box
• 初始值： content-box ，即Ie8以上默认是W3C标准盒子模型

• 在标准模式下，一个块的总宽度=width+margin(左右)+padding(左右)+border(左右)

  
  content-box

• 在怪异模式下，一个块的总宽度=width+margin（左右）（既width已经包含了padding和border值）

  
  content-box
• 提示： 按照具体需求可以灵活控制Box Model

border

• 边框的三个要素
  • border-width: <length> | thin | medium | thick
  • border-style: none | solid | dashed | dotted | double
  • border-color : <color>
• 四个方向 ：border-left , border-top, border-right,border-bottom
• border可以用来做三角形

---

一些概念介绍

视口（Viewport）

• 浏览器的可视区域
• 用户通过视口查看网页内容（好像人通过窗口看风景）

块级元素（Block-level Elements）

• 自动占满一行
• 会被格式化成块状的元素
• 例如 p,div,section等
• 将display设置成block,list-item,table，使元素变为块级

行级元素(inline-level Elements) 也叫 内联元素

• 不会为其内容生成块级框
• 让其内容分布在多行中
• 将display设置为 inline,inline-block,inline-table使元素变为行级

盒子的生成

• 每个块级元素生成一个主块级盒，用它来包含子级盒
• 每个行级元素生成一个行级盒，行级盒分布于多行

Box Model revisited

• margin: 行级盒的margin-top 和margin-bottom 不会产生效果
• padding： 行级盒的padding-top 和 padding-bottom 不会影响行布局

display属性

• block ： 生成块级盒
• inline : 生成行级盒
• inline-block： 生成行级盒，为其内容生成块级盒，意味着内容可以设置宽高，margin，padding
• none：在排版是将元素忽略

visibility

• 控制元素展示
• 取值： visiable | hidden | collapse
• 初始值：visiable

Generated Content 伪元素

• 控制元素
• ::before 和 ::after
• content