基本概念
contentBox与borderBox的区别:
- contentBox的宽度只包含到content
- borderBox的宽度包含到border
平时用borderBox更多一些
代码示例
margin合并/重叠现象
- w3c-link
- 只有普通文档流中block元素的垂直margin才会发生外边距合并。inline元素、浮动框或绝对定位之间的外边距不会合并
- 只有block元素会发生margin合并
- inline /inline-block则不会
解决margin合并/重叠现象的四种思路
1.border 2.padding
3.利用伪元素::before ::after 添加行内内容
4.创建块级格式上下文 即BFC
同一容器中的两个子元素存在上下margin合并现象
- float元素不存在margin合并现象
代码示例
同一容器中的父与子元素存在上下margin合并现象
- 在取消parent的border时，parent的上margin与下margin会分别于第一个child元素的上margin与最后一个child元素的下margin分别相重合。
- 利用上面提到的四种手段。
- overflow:hidden的目的是创建BFC
- 因为设置overflow:hidden后。就有可能用js通过scrollTop让元素的内容滚动了。
- 一但出现滚动，元素内外就不自在同一平面的状态了。这样元素内外的margin自然不应该合并的。 代码示例
