这是我参与「第五届青训营」伴学笔记创作活动的第 3 天

深入CSS课程笔记

一、重点内容

CSS 选择器的特异度
CSS 继承
CSS 求值过程解析
CSS 布局方式及相关技术
CSS 盒模型 - 行级
CSS 盒模型 - 块级

二、详细知识点

1、特异度

特异度划分顺序：id > (伪)类 > 标签
特异度高的规则生效

2、继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值

css文字相关可以继承（例如color、font-size）；
模型相关不可以继承（例如宽度）
不可以继承的还是想让它继承，那么可以用inherit关键字

2、初始值

背景色初始透明
左外边距初始0
也可以使用initial

3、CSS求值过程

$~EZ_T``E3{ZMZ3RWOE@JBKH.png$

4、计算值和使用值区别

计算值：拿到就能马上计算出来的值。
使用值：实际布局的时候才能确定的值。
继承的时候继承的是计算值而非使用值

5、布局 Layout

确定内容的大小和位置的算法

依据元素、容器、兄弟节点和内容等信息来计算

相关技术分类

常规流：行级、块级、表格、FlexBox、Grid
浮动
绝对定位

6、盒模型尺寸

content-box内容盒子、border-box边框盒子

优先使用border-box

content-box：内容的宽和高就是width和height
border-box：border的宽和高是width和height，内容的宽高需要减去border和padding值

OLX4VCB9$VPX)JLAYOUO{RG.png

7、padding

指定元素四个方向的内边距

百分数相对于容器宽度
一个值表示四个边都一样值
两个值表示上下、左右
四个值顺序是顺时针上右下左

8、border

指定容器边框样式、粗细和颜色

选择 none(无边框)、solid(实线边框)、dashed(虚线)、dotted(点状边框)，并选择粗细、颜色
当四条边框颜色不同时，可以形成特殊形状

9、margin

指定元素四个方向的外边距取值可以是长度、百分数、auto 百分数相对于容器宽度

10、orerflow

溢出的时候，

visible：溢出的也显示
hidden：溢出的不显示，只显示边框内的
sicroll：溢出时有滚动条，没溢出时没有滚动条

11、块级和行级

块级可以设置width和height；
行级不可以设置width和height，因为内容越多相应会变化。
盒子（块级和行级）是css概念
元素是html概念。但也有关联性
默认块级元素生成块级盒子，行级元素生成行级盒子。但也可以通过display进行任意转化

12、display 属性

block块级盒子
inline行级盒子
inline-block本身是行级，可以放在行盒中;可以设置宽高;作为一个整体不会被拆散成多行
none排版时完全被忽略

13、常规流Normal Flow

根元素、浮动和绝对定位的元素会脱离常规流。其它元素都在常规流之内（in-flow)
常规流中的盒子，在某种排版上下文中参与布局

14、行级排版上下文

lnline Formatting Context (IFC)

只包含行级盒子的容器会创建一个IFC

IFC内的排版规则

盒子在一行内水平摆放-一行放不下时，换行显示
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动(float)元素*

15、块级排版上下文

Block Formatting Context (BFC)

某些容器会创建一个BFC

根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow值不是visible 的块盒
display: flow-root;

16、BFC内的排版规则

盒子从上到下摆放
垂直 margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

17、Flex Box

一种新的排版上下文

它可以控制子级盒子的：

摆放的流向
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行

18、Grid

Grid二维， Flex一维

19、float

浮动

20、position属性

（1）static

默认值，非定位元素

（2）relative

相对自身原本位置偏移，不脱离文档流
仍然是常规文档流，仍然把原来的位置当做有一样布局

（3）absolute

绝对定位，相对非static祖先元素定位
脱离常规文档流，其他的当它不存在，正常布局

（4）fixed

脱离常规文档流，相对于视口绝对定位
不管翻到第几页，顶部的导航一直在顶部

（5）sticky

粘性定位
滚动到底部的时候，吸附在顶部不动了

三、两个问题

1、父级里面既有块级又有行级，怎么处理？

它会创建两个匿名块级盒子把文字包裹起来。

2、匿名什么意思？

dom树里看不到，只在css排版引擎里面的元素存在匿名的盒子。

四、总结：

四选一排版上下文：

IFC (行级排版上下文)、BFC (块级排版上下文)、Flex (新的排版方式)、Gric（二维）

或图文混排flow

脱离常规文档流，例如absolute、fixed等

深入CSS课程笔记 ｜ 青训营笔记