一、基本概念
1.1 选择器的特异度
- 选择器的特异度决定了优先级，优先级决定了样式顺序
- 可分为 id、（伪）类、标签
1.2 继承
-
某些属性会自动继承其父元素的计算值，显示指定的一个值
-
color属性可以继承 在css中一般和文字相关的都可以继承，盒模型相关的都不可以继承
-
如果某些属性本身不可继承，但想继承他的父值，那么可以用inherit关键字（表示显示继承）
1.3 初始值 initial
如果一个元素不可继承，但会用到该属性，则会用到初始值来定义；或者，该元素可继承但一层层不发获取到父值则用初始值
- CSS中，每个属性都有一个初始值
-
- background-color 初始值为transparent
-
- margin-left 初始值为0
- 可以使用initial关键字显示重置为初始值
-
- background-color：initial
二、CSS的求值过程
三、布局Layout
- 确定内容大小位置算法
- 依据元素、容器、兄弟节点和内容等信息来计算（一般）
3.1 布局相关技术
- 常规流 包括 行级、块级、表格布局、flexbox、Grid布局
- 浮动
- 绝对定位
3.2 盒模型
margin：外边距
border：边框
padding：内边距
content：含width和height（content-box）
3.2.1 width
- 指定content box 宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对容器的content box宽度
3.2.2 height
- 指定content box 高度
- 取值为长度、百分数、auto
- auto取值由内容计算得来
- 百分数相对容器的content box高度
- 容器有指定高度时，百分数才生效 ps：一个元素所在的容器如果设置了百分之百的高度则给这个元素设置百分比才能生效
3.2.3 padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
3.2.4 border
- 指定容器边框样式、粗细和颜色
3.2.4.1三种属性
- border-width
- border-style
- border-color
3.2.4.2四个方向
- border-top
- border-right
- border-botton
- border-left ps：当四条边框颜色不同时斜对角切
3.2.5 margin
- 指定元素四个方向的外边框
- 取值可以是长度、宽度、auto
- 百分数相当于容器宽度
margin：auto 水平居中
margin collapse看最大的边距
ps：
- border-box的width、height为整个border的宽高
- overflow控制溢出内容
3.3行级、块级
3.3.1 块级Block Level Box：
- 不和其他盒子并列摆放
- 适用所有盒模型属性
3.3.2 行级 Inline Level Box：
- 和其他行级盒子一起放在一行或拆开成多行
- 盒模型中的width、height不适用
3.3.3 块级元素
生成块级盒子
body、article、div、main、section、h1-6、p、ul、li等
display：block
3.3.4 行级元素
- 生成行级盒子
- 内容分散在多个行盒中
span、em、strong、cite、code
display：inline
3.3.5 displace属性
- block：块级盒子
- inline：行级盒子
- inline-block：本身是行级，可以放在行盒中；可以设置宽高；作为一个整体不会被拆散成多行
- none：排版时完全被忽略
3.3 常规流
- 根元素、浮动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内
- 常规流中的盒子，在某种排版上下文中参与布局
3.3.1行级排版上下文-
-
Inline Formatting Context (IFC)
-
只包含行级盒子的容器会创建一个IFC
-
IFC内的排版规则
-
- 盒子在行内水平摆放
-
- 一行放不下时，换行显示
-
- text-align决定行内盒子的水平对齐
-
- vertical-align 决定一个盒子在行内的垂直对齐
-
- 避开浮动(float)元素*
3.3.2 块级排版上下文
-
Block Formatting Context (BFC)
-
某些容器会创建个BFC
-
- 根元素
-
- 浮动、绝对定位、inline-block
-
- Flex子项和Grid子项
-
- overflow 值不是visible 的块盒
-
- display: flow-root;
3.3.3 BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
3.4 Flex Box
- 一种新的排版上下文
- 它可以控制子级盒子的:
-
- 摆放的流向(一←↑↓)
-
- 摆放顺序
-
- 盒子宽度和高度
-
- 水平和垂直方向的对齐
-
- 是否允许折行
3.4.1 主轴与侧轴
3.4.2 Flexibility
- 可以设置子项的弹性:当容器有剩余空间时，会伸展;容器空间不够时，会收缩。
- flex- grow有剩余空间时的伸展能力
- flex- shrink容器空间不足时收缩的能力
- flex-basis没有伸展或收缩时的基础长度
3.5 Grid 布局
3.5.1 display: grid
- display: grid使元素生成一个块级的Grid容器
- 使用grid- template相关属性将容器划分为网格
- 设置每一个子项占哪些行、列
3.5.2 grid line 网格线
3.5.3 grid area 网格区域
3.6 浮动
实现图片文字环绕效果
3.6.1 position属性
-
static ：默认值，非定位元素
-
relative ：相对自身原本位置偏移，不脱离文档流
-
absolute ：绝对定位，相对非static祖先元素定位
-
fixed ：相对于视口绝对定位
3.6.2 position: relative
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top、left、 bottom、 right 设置偏移长度
- 流内其它元素当它没有偏移一样布局
3.6.3 position: absolute
-
脱离常规流
-
相对于最近的非static 祖先定位
-
不会对流内元素布局造成影响
