CSS是什么？
Cascading Style Sheets 用来定义页面元素的样式 1、设置字体和颜色 2、设置位置和大小 3、添加动画效果
基础代码： h1(选择器 Selector) { color(选择器 Property): white(属性值 Value); font-size: 14px;(声明 Declaration) }
在页面中使用CSS有三种方法：外链、嵌入、内联
CSS是如何工作的 加载HTML—>解析HTML—>创建DOM树——>展示页面 | | 添加样式到DOM节点 加载CSS—>解析CSS
选择器 Selector 1、找出页面中的元素，以便给他们设置样式 2、使用多种方式选择元素 1、按照标签名、类名或id 2、按照属性 3、按照 DOM 树中的位置
通配选择器：*
伪类（pseudo-classes） 1、不基于标签和属性定位元素 2、几种伪类 1、状态伪类 2、结构性伪类
组合（Combinators） 名称 语法 说明 直接组合 AB 满足A同时满足B 后代组合 A B 选中B，如果它是A的子孙 亲子组合 A>B 选中B，如果它是A的子元素 兄弟选择器 A~B 选中B，如果它在A后且和A同级 相邻选择器 A+B 选中B，如果它紧跟在A后面
通用字体族 Serif 衬线体 Sans-Serif 无衬线体 Cursive 手写体 Fantasy Monospace 等宽字体
深入CSS
继承： 某些属性会自动继承其父元素的计算值，除非显式指定一个值
初始值： CSS中，每个属性都有一个初始值，如：background-color 的初始值为 transparent；margin-left 的初始值为 0； 可以使用 initial 关键字显示重置为初始值，如：background-color：initial
布局（layout）是什么？
1、确定内容的大小和位置的算法
2、依据元素、容器、兄弟节点和内容等信息来计算
height
1、指定 content box 高度
2、取值为长度、百分数、auto
3、auto 取值由内容计算得来
4、百分数相对于容器的 content box 高度
5、容器有指定的高度时，百分数才生效
padding
1、指定元素四个方向的内边距
2、百分数相对于容器宽度
border：指定容器边框样式、粗细和颜色
三种属性：border-width、border-style、border-color
四个方向：border-top、border-right、border-bottom、border-left
margin
1、指定元素四个方向的外边距
2、取值可以是长度、百分数、auto
3、百分数相对于容器宽度
使用 margin:auto 可以水平居中
块级 vs 行级
块级（Block Level Box）： 不和其它盒子并列摆放，适合所有的盒模型属性
行级（Inline Level Box）： 和其它行级盒子一起放在一行或拆开成多行，盒模型中的 width、height 不适用
块级元素： 生成块级盒子，如 body、article、div、main、section、h1-6、p、ul、li等，display：block
行级元素： 生成行级盒子，内容分散在多个行盒（line box）中，如 span、em、string、cite、code 等，display：inline
display 属性： block 块级盒子 inline 行级盒子 inline-block 本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行 none 排版时完全被忽略
常规流 Normal Flow
1、根元素、浮动和绝对定位的元素会脱离常规流
2、其它元素都在常规流之内（in-flow）
3、常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
1、Inline Formatting Context（IFC）
2、只包含行级盒子的容器会创建一个IFC
3、IFC内的排版规则
盒子在一行内水平摆放
一行放不下时，换行显示
text-align 决定一行内盒子的水平对齐
vertical-align 决定一个盒子在行内的垂直对齐
避开浮动（float）元素
块级排版上下文
1、Block Formatting Context（BFC）
2、某些容器会创建一个BFC
根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow 值不是 visible 的块盒
display：flow-root
Flex Box 是什么？
1、一种新的排版上下文
2、它可以控制子级盒子的：摆放的流向、摆放的顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许拆行
Flexibility
1、可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
2、flex-grow 有剩余空间时的伸展能力
3、flex-shrink 容器空间不足时收缩的能力
4、flex-basis 没有伸展或收缩时的基础长度
Grid 布局
display：grid
1、display：gird 使元素生成一个块级的 Grid 容器
2、使用 gird-template 相关属性将容器划分为网格
3、设置每一个子项占哪些行/列
position 属性 static 默认值，非定位元素
relative 相对自身原本位置偏移，不脱离文档流
absolute 绝对定位，相对非 static 祖先元素定位
fixed 相对于视口绝对定位
