CSS之盒模型
概念
当浏览器对一个HTML文档进行布局的时候，会把每一个元素都渲染成一个矩形的盒子，盒模型就是对这些元素的形状进行一个抽象。
组成部分
盒模型的组成部分是由四个部分组成：content(内容区域) padding(内边距) border(边框区域) margin(外边距区域)。
两种盒模型
- content-box
- 内容盒，内容就是盒子的边界
- content-box width = 内容宽度
- border-box
- 边框盒，边框是盒子的边界
- border-box width = 内容宽度 + padding + border
- 谁更好用
- border-box 好用
- 同时指定 padding、width、border 就知道为什么了
margin 合并
- 合并情况
- 父子margin合并
- 兄弟margin合并
- 阻止合并
- 父子合并用padding/border挡住
- 父子合并用overflow: hidden挡住
- 父子合并用 display: flex
- 兄弟合并是符合预期的
- 兄弟合并可以用 inline-block 消除
- 暂时只有这么多，随着CSS的发展以后可能会增多