探入理解CSS

90 阅读1分钟

探入理解CSS

基础知识

Casading(层叠)规则,优先级

1 样式表来源 image.png 2 选择器优先级 image.png 3 源码位置(最后声明生效) image.png 4 总结 image.png

选择器

image.png

继承

image.png

值和单位

盒模型

image.png

例子(实现渐变边框)

background-clip 设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面。 image.png

块级格式化上下文

image.png

内联格式化上下文

image.png

网格布局

2017年推出的Gid布局可以定义由行和列组成的二维布局,然后将元素放置到网格中。元素可以只占其中一个单元格,也可以占据多行或多列。

定位

image.png

层叠上下文(The Stacking Context)

image.png 顺序(重点) image.png image.png

CSS生态相关

语言增强:预处理器、后处理器 工程架构:.CSS模块化,CSS-ln-Js、Atomic CSS

预处理器

image.png

后处理器

image.png

模块化

image.png

总结

image.png