选择器特异度

CSS通过特异度决定选择器的优先级，特异度越高越优先 id # >（伪）类 . > 标签 E

继承

某些属性自动继承父元素的计算值，除非显示指定一个值（一般来说，文字，颜色等会继承）

当属性不自动继承父元素时，可以使用inherit等显示继承 * { box-sizing: inherit; } // 显示使用inherit继承父类的属性

初始值

CSS中，每个属性都有一个初始值
- background-color的初始值为transparent
- margin-left的初始值为0
可以使用initial关键字来显示重置为初始值
- background-color: initial

CSS求值过程

CSS求值过程1.png CSS求值过程2.png CSS求值过程3.png // 这里注意子元素继承的都是父元素的计算值

布局

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

布局相关技术

常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
浮动
绝对定位

CSS盒模型

盒模型.png

border-box

width

指定content box宽度
取值为长度、百分数、auto
auto由浏览器根据其它属性确定
百分数相对于容器的content box宽度

padding

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

指定一个数 10px（上下左右都是10px）指定两个数 10px 20px（上下是10px，左右是20px）指定四个数 10px 20px 10px 20 px（上右下左顺时针指定）

border

指定容器边框样式、粗细和颜色
三种属性
- border-width
- border-style
- border-color
四个方向
- border-top
- boder-right
- border-bottom
- border-left

margin

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

div {
	margin-left: auto;
	margin-right: auto;
	/* margin两边都是auto时，可以实现水平居中的效果 */
}

overflow

visible
hidden
scroll

块级 VS 行级

Block Level Box

不和其它盒子并列摆放
适用所有的盒模型属性
生成块级盒子
body、article、div、main、section、h1-6、p、ul、li等
display: block

Inline Level Box

和其它行级盒子一起放在一行或拆开成多行
盒模型中的width、height不适用
生成行级盒子
内容分散在多个行盒中
span、em、strong、cite、code等
display: inline

display属性

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

常规流Normal Flow

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

行级排版上下文
块级排版上下文
Table排版上下文
Flex排版上下文
Grid排版上下文

行级排版上下文

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

块级排版上下文

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

BFC内的排版规则

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

Flex Box

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

主轴与侧轴

主轴与侧轴.png

Flexibility

可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。
flex-grow有剩余空间时的伸展能力
flex-shrink容器空间不足时收缩的能力
flex-basis没有伸展或收缩时的基础长度

Flex

Grid布局

display:grid使元素生成一个块级的Grid容器
使用grid-template相关属性将容器划分为网格
设置每一个子项占哪些行列

划分网络

grid-template-columns: px, %, fr, ... // 列划分
grid- template-rows: px, %, fr, ... // 行划分

grid line 网格线

网格线.png

float 浮动

目前用于图文环绕位置关系等

position 属性

static 默认值，非定位元素
relative 相对自身原本位置偏移，不脱离文档流
absolute 绝对定位，相对非static祖先元素定位
fixed 相对于视口绝对定位

position: relative

在常规流里面布局
相对于自己本应该在的位置进行偏移
使用top、left、bottom、right设置偏移长度
流内其它元素当它没有偏移一样布局

position: absolute

脱离常规流
相对于最近的非static祖先定位
不会对流内元素布局造成影响

position: fixed

脱离常规流
相对于窗口固定

总结

本节课是《深入CSS》，重点介绍了CSS相关特性，和CSS布局相关的内容，内容十分多，需要通过实操不断去理解。同时，平常学习我也要去做到课程中建议的：充分利用MDN和W3CCSS规范，善用览器的开发者工具，持续学习

Day3 深入CSS | 青训营