CSS是什么？

用来定义页面元素的样式

组成

选择器(Selector)

声明(Declaration)

属性(Property), 属性值(Value)

如何在页面使用CSS

外链（推荐）

嵌入

内联（不需要选择器，但不推荐）

CSS如何工作的

浏览器加载HTML
解析HTML
创建DOM树，加载CSS
解析CSS添加样式到DOM树形成渲染树
展示页面

选择器 Selector

通配选择器：*
标签选择器：h1 p 等
id选择器：# + id（id值是唯一的）
类选择器：. + class（可重复）
属性选择器：根据标签的某些属性来进行选择（可用来筛选一些特定的属性）

伪类

状态伪类

链接（是否点击过，鼠标指针是否停在链接上）

输入框（聚焦状focus）

结构伪类

根据DOM节点中的相对位置

组合类

选择器组：将多个标签通过逗号连接起来（h1,p,span,div...）

排版

颜色

RGB

#000000 rgb(0,0,0) (0~255)

HSL

Hue（色相）（0~360）

Saturation（饱和度）（0~100%）

Lightness（亮度）（0~100%）

hsl(0,0%,0%)

alpha 透明度

alpha为1时不透明，为0时透明

#ff000066

rgba(255,0,0,1)

hsla(0,100%,50%,1)

字体

font-family

font-family最后加一个通用字体族

font-size

字体大小

font-weight

字体的粗细

normal = 400

bold = 700

line-height

white-space

如何处理空白

normal（自动换行）

nowarp（不换行）

深入CSS(上)

CSS生效的规则

选择器优先级

特异度（选择器的特殊程度）

继承

某些属性会自动继承父元素的计算值

显示继承

* {
    box-sizing:inherit;
}

初始值

每个属性都有一个初始值

background-color的初始值为transparent

margin-left的初始值为0

background-color:initial(重置为初始值)

CSS生成过程

布局（Layout）是什么

确定内容的大小和位置的算法
依据元素、容器、兄弟节点和内容等信息来计算

布局相关技术

常规流

行级
块级
表格布局
FlesBox
Grid布局

浮动

绝对定位

盒模型

width

指定content box宽度
取值为长度、百分数（相对于容器的content box宽度）

height

指定content box高度
取值为长度、百分数（容器有指定的高度时百分数才生效）

padding

指定元素四个方向的内边距
百分数相对于容器的宽度

border

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

margin

指定元素四个方向的外边距
取值为长度，百分数，auto（水平居中）
百分数相对于容器的宽度

margin collapse

深入CSS(下)

块级VS行级

盒子

Block Level Box

不和其他盒子并列摆放
使用所有的盒模型属性

Inline Level Box

和其他行级盒子一起放在一行或拆开成多行
盒模型中的width、height不适用

元素

块级元素

body, article, div, main, section等生成块级盒子

display:block

行级元素

span, em, strong等生成行级盒子，内容分散在多个行盒中

display:inline

display

block 块级盒子
inline 行级盒子
inline-block 本身是行级，可放在行盒中，不可以被拆散成多行

行级排版上下文

只包含行级盒子的容器会创建一个IFC
IFC内排版规则
- 盒子在一行内水平摆放
- 一行放不下是换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素

块级排版上下文

某些容器会创建一个BFC
- 根元素
- 浮动、绝对定位、inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display: flow-root;

Flex Box是什么？

一种新的排版上下文
可以控制子级盒子
- 摆放的流向（→ ← ↑ ↓）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许拆行

理解CSS | 青训营笔记