CSS深入了解 ——青训营笔记

55 阅读1分钟

这是我参与「第四届青训营 」笔记创作活动的第1天

前言

CSS作为前端三件套中的一件,其重要性自然不言而喻,CSS的出现,能让标签的位置、布局等信息从HTML中脱离出来,统一管理。极大地方便了开发者的编写和管理。而认识和熟悉CSS,更是每个前端人的必备技能。

深入了解CSS

优先级

当多个条属性同时命中了一个标签,哪个生效?——根据选择器的特异度判断。

image.png

继承

每个属性都有初始值,某些属性会自动继承父元素的值。

可以使用initial关键字显示重置为初始值。

image.png

布局

布局是什么?是确定内容大小、位置的算法。

相关技术:

image.png

Flex

flex布局是什么?——一种新的排版上下文,可以控制盒子的摆放流向、顺序、宽高、对齐、是否允许折行……

方向:

image.png

纵向:align-items

image.png

横向:justify-content

image.png

Flexbility:

image.png

order序列:

image.png