【CSS：基础】层叠上下文、盒模型和弹性布局

层叠上下文

什么是层叠上下文？

MDN解释：

我们假定用户正面向（浏览器）视窗或网页，而HTML元素沿着其相对于用户的一条虚拟的Z轴排开，层叠上下文就是对这些HTML元素的一个三维构想。众HTML元素基于其元素属性按照优先级顺序占据这个空间。

哪些元素具有层叠上下文？

• 文档根元素htnl；
• 绝对定位或相对定位，且z-index不为auto；
• flex容器的子元素，且z-index值不为auto；
• opacity属性值小于1的元素
• 以下任意属性值不为none的元素：
  transform
  filter
  clip-path

在层叠上下文中，子级层叠上下文的z-index只在父元素中才有意义

MDN有更多解释：
层叠上下文

CSS盒模型

css中有两种“盒子”： 块级和内联

块级元素 block：

• 设置width和height会生效
• 每个块级元素会换行
• 内边距（padding）, 外边距（margin）和 边框（border）会将其他元素从当前盒子周围“推开”
• 盒子会在内联的方向上扩展并占据父容器在该方向上的所有可用空间，在绝大数情况下意味着盒子会和父容器一样宽
• div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre、header、section、aside、footer

内联元素 inline:

• 设置height和width不会生效

• 元素挨个排列在一行

• padding margin 和 border会生效但是不会把其他处于inline的元素推开。

• <a> 元素、 <span>、 <em> 以及 <strong>、textarea、select、button、img

以上两种元素可通过display: block和 inline转换；

内联块元素 inline-block:

• 设置width 和height 属性会生效。
• padding, margin, 以及border 会推开其他元素。
• 但是，它不会跳转到新行

盒模型

完整的css盒模型应用于块级盒子。一个盒子由： margin/padding/border/content组成

分为IE盒模型（内容指content/padding/border）和标准盒模型(内容指content)
可以通过box-sizing:border-box/content-box来切换
啊啊啊啊！这些太基础了 就省略啦！！><

然后接下来想讲一下盒模型中发生的边距重叠，比如：

1、外边距折叠

什么是外边距折叠？ 两个外边距相接的元素，这些外边距将合并为一个外边距，即最大的单个外边距

例如：

<style>
p:nth-child(1){
  margin-bottom: 13px;
}
p:nth-child(2){
  margin-top: 87px;
}
</style>

<p>下边界范围会...</p>
<p>...会跟这个元素的上边界范围重叠。</p>

两个p标签的外边距不会是100px，而是取其中大的一个 87px

什么情况下会发生边距重叠？

1、没有内容将父元素和后代元素分开

如果没有边框border，内边距padding，行内内容，也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界margin-top；或没有边框，内边距，行内内容，高度height，最小高度min-height或 最大高度max-height 来分开一个块级元素的下边界margin-bottom与其内的一个或多个后代后代块元素的下边界margin-bottom，则就会出现父块元素和其内后代块元素外边界重叠，重叠部分最终会溢出到父级块元素外面。

2、空的块级元素

当一个块元素上边界margin-top直接贴到元素下边界margin-bottom时也会发生边界折叠。这种情况会发生在一个块元素没有完全设定border/padding/height/min-height/max-height、内容设定为inline或是加上clear-fix时。

总结： 没有形成块级格式上下文或清楚浮动，或者没有完全设置高度等其他内容时，会发生外边距重叠。

块级格式上下文：

是块级盒子的布局过程发生区域，也是浮动元素与其他元素交互的区域
因为块级格式上下文会影响布局，所以一般会创建新的BFC，而不是改变布局

哪些会

清除浮动

如何防止外边距重叠？

• 创建新的BFC
  ……