深入CSS | 青训营笔记这是我参与「第五届青训营」笔记创作活动的第3天课程重点 CSS 选择器的特异度 CSS 继

这是我参与「第五届青训营」笔记创作活动的第3天

课程重点

CSS 选择器的特异度
CSS 继承
CSS 求值过程解析
CSS 布局方式及相关技术
CSS 盒模型 - 行级
CSS 盒模型 - 块级

选择器的特异度（Specificity）

继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值

显式继承

*{
    box-sizing: inherit;
}

html{
    box-sizing:border-box;
}

.some-widget{
    box-sizing:content-box;
}

初始值

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

CSS求值过程

布局（Layout）是什么？

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

布局相关技术

width

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

height

指定content box高度
取值为长度、百分数、auto
auto取值由内容计算得来
百分数相对于容器的content box高度
容器有指定的高度时，百分数才生效

padding

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

border

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

三种属性
- border-width
- border-style
- border-color
四个方向
- border-top
- border-right
- border-bottom
- border-left

当四条边框颜色不同时

margin

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

使用margin：auto水平居中

margin collapase

box-sizing：border-box

overflow

块级vs行级

Block Level Box	Inline Level Box
不和其他盒子并列摆放	和其它行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性	盒模型中的width、height不适用

块级元素	行级元素
生成块级盒子	生成行级盒子内容分散在多个行盒（line box）中
body、article、div、main、section、h1~h6、p、ul、li等	span、em、strong、cite、code等
display: block	display: inline

display属性

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

常规流Normal Flow

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

行级排版上下文

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是什么？

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

flex-direction

主轴与侧轴

justify-content

align-items

align-self

order

Flexibility

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

flex-grow

flex-shrink

flex

flex: 1	flex-grow:1
flex: 100px	flex-basis:100px
flex:2 1	flex-grow:2;flex-shrink:1
flex:1 100px	flex-grow: 1;flex-basis:100px
flex:2 0 100px	flex-grow: 2;flex-shrink: 0;flex-basis: 100px
flex:auto	flex:1 1 auto
flex:none	flex: 0 0 auto