整理一下自己关于 css 盒模型 的相关知识.
盒模型概念
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
示意图:
- 另外: css3 出了个
box-sizing属性可以改变盒模型:详情可了解这里
外边距合并
- 只有上下外边距会发生合并, 左右外边距不会合并, 内边距也不会合并
- 上下外边距相遇时(中间无内容边框或内边距),就会发生合并
- 合并后,外边距等于较大者
- 合并会连续发生
- 外边距合并的意义: 使段落之间的距离一致。
盒模型百分比
- 内外边距的百分比都是基于父元素的宽度计算
- 宽度百分比基于父元素宽度百分比计算
- 高度百分比基于父元素高度百分比计算
负外边距
margin-left或margin-top设置为负值时, 元素将基于自身原始位置左移或者上移, 其后的同层元素(静态文档流或者float同层元素)将会跟随移动相同距离margin-right或margin-bottom设置为负值时, 元素自身位置不变, 其后的同层元素(静态文档流或者float同层元素)将会左移或者上移, 可覆盖该元素