深入理解CSS

基础知识

层叠Casding、优先级

CSS通过层叠->解决冲突

Style Sheets样式表通过规则声明集合->产生冲突->解决冲突

层叠规则按优先程度递减为：

1.样式表来源

2.选择器优先级

3.源码位置

而样式表按重要顺序递增排序为：

1.用户代理样式(浏览器默认样式)

2.用户样式表

3.作者样式表

4.作者and用户and用户代理样式表中的！ important

继承

大部分具有继承特性的属性跟文本相关:

e.g. color、font、text-align

可使用inherit关键字指定一个属性值从其父元素继承

盒模型

控制盒子类型：

display：block、inline

控制盒子大小&计算方式：

width、height

控制定位:

position

布局

概述

CSS 3 之后新增的布局

Flex 弹性盒子布局

Grid 网格布局

Multicol多列布局

一维空间布局

二维空间布局

文本、内容的多列展示

常规布局流

块级格式化上下文

外边距塌陷

内联级格式化上下文

弹性盒子布局

网格布局

层叠上下文

层叠上下文是对HTML元素的三维构想，是将元素沿着垂直屏幕的虚构的z轴排开

层叠顺序不仅指不同的层叠上下文的顺序，同一个层叠上下文内，元素间也有顺序

编写z-index的建议：

1.使用CSS变量或者预处理语言的变量，管理z-index的值

2.将预设间隔设置为10 或100 ，方便后续的插入

--z-loading-indicator: 100; --z-nav-menu: 200; --z-dropdown-menu: 300;

变形、过渡、动画

transform 变形

transition 过渡

通过指定某些元素属性从一种起始状态，在一段时间内以某种变化节奏，过渡到终止状态。

animation动画

性能相关

布局（计算布局）

绘制（填充像素）

合成（收集所有绘制完毕的图层，按顺序合成显示）