简述:
CSS 盒模型有两种,一种是 content-box 一种是 border-box。
content-box width = 内容宽度 内容就是盒子的边界
border-box width = 内容宽度 + padding + border 边框才是盒子的边界
重点关注四个区域和宽度width(宽度决定盒模型的类型)。


在盒模型处右键检查。
margin合并

这个属性方便我们合并写


父元素和子元素的外边距合并,只存在于上下合并,不存在左右合并。
哪些情况会合并
- 父子margin合并
- 兄弟margin合并
如何阻止合并
阻止父子合并
- 父元素加border
- 父元素加padding
- overflow:hidder;
- display:flex;
兄弟合并是符合预期的,可以用inline-block消除。
带有float属性的元素不会合并。
网友评论