课程的一点笔记

1 CSS特异度（Specificity）

在编写CSS代码时，往往会出现样式重叠、冲突和污染的问题，因此制定了一种优先度的规则，简单来说，特异度是根据CSS样式的权重计算来确定哪些样式应用到元素上，一般用一个0 0 0 0 的四位数为样式的权重总和。

元素、伪元素选择器 在个位+1 -> 0 0 0 1

类、属性、伪类 在十位数+1 就是 0 0 1 0

ID选择器 在百位数+1 就是 0 1 0 0

行内样式 在千位数+1 就是 1 0 0 0

例如如下代码

<style>
p
{
    color:white;
}

.example
{
    color:black;
}

</style>

其中p的权重为 0001，.example的权重为0010。

2 CSS继承

继承，即某些属性会自动继承其父元素的属性值，除非显式指定一个值。一般来说和文字相关的属性都是可以继承的，比如color、font-size，但是和盒模型相关的属性都是不可继承的，例如宽度。
但如果不自动继承，想让子元素继承属性值怎么办？我们可以显式继承，即使用inherit这个关键字。

初始值

CSS中每个属性都有一个初始值。比如background-color的初始值是transparent，我们可以使用initial显式重置为初始值。

3 CSS布局

盒模型

我们把元素理解为一个一个的盒子，或者一个容器，盒子具有宽度、高度、内边距、外边距、边框、内容。
宽度和高度指的是content box的宽高，当其值取百分数时，是相对于容器的content box的宽高，但是，容器有指定的高度时，百分数才有效，比如子元素的height：100%，父元素指定了height：100px。但如果指定 box-sizing:border-box 那么宽高指的是包含content、padding、border的尺寸。
使用 margin:auto 可以水平居中。

常规流

行级
块级
表格
FlexBox
Grid

块级&行级

块级元素独占行，行级可以并列在一行。
相互转换：display:block/inline/inline-block/none

IFC（行级排版上下文）

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

IFC的规则

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

BFC (块级排版上下文)

BFC的规则

盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠
思考BFC的产生解决的问题：让BFC形成单独一块空间，不让其容器内的元素影响到外面的元素。

Flex Box

有主轴、侧轴

flex-direction 流向
justify-content 水平布局方式（主轴）
align-items （侧轴）
flex-grow “弹力” 挤占剩余空间

Grid 网格式

浮动 float

float往往用于插入一个图片，实现文字环绕的效果。感觉可以用来布局，float到某一边可以做一个小栏目的容器，但flex和grid在布局方面显得更游刃有余，float只需要关注图片和文字环绕的场景，不必要用于布局。

绝对定位

position：

static 常规流
relative 相对自身偏移
absolute 绝对定位（相对于非static的父元素）
fixed 相对视口绝对定位

4 CSS学习建议

可以多查阅MDN等文档，CSS新东西多，尽量保持学习的心态即可。

CSS笔记 | 青训营