标准盒模型和怪异盒模型
box-sizing: content-box/border-box
垂直外边距合并
- 相邻兄弟元素 两个兄弟元素之间的外边距,会取两个元素外边距的最大值。
- 相邻父子元素 父元素的上外边距和第一个子元素的上外边距,父元素的下外边距和最后一个子元素的下外边距。
- 空元素的上下外边距 自己的上外边距会和自己的下外边距合并。
取消外边距合并的方法:创建BFC,将外边距控制在 BFC 内部,两个 BFC 外部就不会产生重叠。具体包括:
- float != none
- display != static/relative
- overflow === auto/hidden
- position == absolute/fixed
inline-block
具有 margin, border, padding,能设置 width/height,行内元素不能。