在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
网友评论