css 边距折叠

什么是 css 样式的层叠?

是相同规则的 css 样式出现的顺序。比如下面的这个样式中,文字颜色被css 样式定义了两次,就会将后面出现的样式放到文字上去。

层叠通过样式的出现顺序决定将那个样式渲染到对应的标签上,但是它不是唯一一个决定展现什么样式的条件,还有优先级!

展现层叠样式

1
2
3
4
5
6
7
8
9
<h1 class="cascading-h1">展现层叠样式<h1>
<style>
.cascading-h1{
color: red;
}
.cascading-h1{
color: blue;
}
</style>

什么是优先级?

在选择器相同的情况下,层叠(出现顺序)决定了元素渲染成什么样式,优先级则用来决定选择器不同的情况下渲染什么样式。

记住下面的规则就能搞定优先级问题
选择指向越具体则优先级越高,比如 id 选择器的优先级就高于 class 选择器,因为整个文档中只能出现一个 id 选择器,而 class 的优先级则比标签选择器高。但是,当规则加了!important时,对应的规则优先级最高。

所以当遇到组合的选择器时,就看谁的指向更具体了。这样我们也就能理解为什么行内样式的优先级高于其它。

层叠层

是什么?

  • 显式优先级容器
  • 提供了对最终应用的 css 声明更简单和更强大的控制能力
  • 使web 开发者不必与优先级抗争的情况下,优先考虑 css 部分

层是凌驾于层叠和优先级之上的另外一个控制样式显示的概念,优先级和层叠只在同一层内起作用,这里可以把它当成互相隔离的楼房。

创建层

  • @layer 跟随一个或者多个层名称来声明层。

  • 在样式块中使用@layer 则将对应的样式块放到了对应的层中

  • 使用 layer 关键字或者layer() 函数的 @import 规则,将导入文件的内容分配到该层中

边距折叠

所谓的边距折叠,就是当不同两个相近的兄弟元素或者父子元素的margin 接触到一起,并且没有阻挡的情况下就会发生重合,只保留大的一部分。