重要基本概念
- 文档流 Normal Flow
- 块、内联、内联块
- margin 合并
- 两种盒模型（border-box 更符合人类思维）
流动方向
文档流
- 流动方向
1，inline 元素从左到右，到达最右边才会换行
2，block 元素从上到下，每一个都另起一行
3，inline-block 也是从左到右
- 宽度
1，inline 宽度为内部 inline 元素的和，不能用 width 指定
2，block 默认自动计算宽度，可用 width 指定
3，inline-block 结合前两者特点，可用 width -高度
1，inline 高度由 line-height 间接确定，跟 height 无关
2，block 高度由内部文档流元素决定，可以设 height
3，inline-block 跟 block 类似，可以设置 height
overflow 溢出
- 当内容大于容器
1，等内容的宽度或高度大于容器的，会溢出 可用 overflow 来设置是否显示滚动条
2，auto 是灵活设置
3，scroll 是永远显示
4，hidden 是直接隐藏溢出部分
5，visible 是直接显示溢出部分
脱离文档流
1，float 2，position: absolute / fixed
两种盒模型
1，content-box 内容盒 - 内容就是盒子的边界
content-box width = 内容宽度
border-box 边框盒 - 边框才是盒子的边界
border-box width = 内容宽度 + padding + border
