元素分类
根据元素的显示类型（能否在同一行显示）
- 块级元素（block-level elements）: 独占父元素一行
- 行内级元素(inline-level elements): 和其他元素能够在同一行 根据元素的内容类型（是否浏览器会替换掉元素）
- 替换元素(replaced elements): 元素本身没有什么实际内容，浏览器根据元素属性等确定元素内容
- 非替换元素(non-replaced elements): 元素本身有实际内容
布局流
正常的布局流
- 默认情况下，元素都是按照标准流进行排布的
- 块级元素的内容宽度是其父元素的100%，高度与其内容一致
- 行内级元素的宽高与内容一致（不能随意设置宽高）
- 流动方式：从左到右，从上到下
- 块级元素会在上一个元素下面另起一行，们会被设置好的margin 分隔
- 行内级元素不会另起一行，空间不够溢出的文本或元素会移至新的一行
- 元素互相之间不存在层叠现象
标准流中的定位：
- 标准流可以使用
margin、padding对元素进行定位（其中margin可以设置为负数） - 缺点1：设置一个元素的
margin和padding，通常会影响到标准流中其他元素的定位效果 - 缺点2：不便于实现元素层叠的效果
脱离标准流
脱离标准流的元素会创建一个新的块级格式上下文环境（ BFC）构成一个小的布局环境，与页面其他内容分隔开来。
脱离标准流的特点
- 不再受标准流限制
- 默认宽高由内容决定
- 可以随意设置宽高
- 不用再向父元素汇报宽高数据
元素的层叠
- 当通过定位方式使元素脱离文档流，元素内容可能重叠。
- 脱离文档流意味着页面中的其他元素不知道该元素的存在，故不会对该元素做出响应。
脱离标准流的布局技术
- display 属性 ：更改外部显示类型
- float属性： 浮动
- position属性：定位
- 表格布局：表格的布局方式可以用在非表格内容
- 多列布局：可以让块按列布局
