CSS盒模型知识整理与理解（2）--- 边距重叠问题详解

CSS-盒模型知识整理与理解：

CSS盒模型知识整理与理解（1）--- 基本概念

CSS盒模型知识整理与理解（2）--- 边距重叠问题详解

CSS-盒模型知识整理与理解（3）--- BFC详解

---

 

 

CSS盒模型知识整理与理解 --- 边距重叠问题详解

 

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。

两个相邻的块级元素垂直相邻的边界会产生边界重叠，而边界重叠的结果是取相邻边界中最大值。

 

产生边界重叠的常见的场景

 

• 元素的顶边界与前面的元素的顶边界发生重叠

 

• 子元素的顶边界与父元素的顶边界发生重叠

 

• 元素的顶边界与底边界相邻发生重叠

空节点，设置的边界，顶边界与底边界会产生重叠

当空节点接触到前面节点的底边界，也会产生再重叠

 

边界重叠的作用

可以维护普通文档流中块级区域之间的间距不产生双倍间距。

 

如何解决边距重叠的问题

 

边距重叠发生在边界相接触的时候，发生合并，利用其特性就可以使用以下方法解决

1.把边界分隔开就可以解决重叠的问题。

2.利用BFC(块级格式化上下文)的特性---

• BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

，来分隔开区块的格式

 

 

如何触发BFC

1. float属性不为none
2. position为absolute或fixed
3. display为inline-block, table-cell, table-caption, flex, inline-flex
4. overflow不为visible

 

BFC详细解析：CSS-盒模型知识整理与理解（3）--- BFC详解

 

 

本文为个人学习笔记，如有错误欢迎留言指正，谢谢！