【第二届字节青训营 - 寒假前端场】深入CSSの学习笔记

深入CSS

选择器的特异度：

当多个选择器发生冲突时，应当按照特异度确定优先级。优先级高的选择器将会覆盖优先级低的选择器。下面翻自w3c中的一段，是关于css选择器优先级的特异性计算:

选择器的特异性计算如下：

• 1.计算选择器中ID选择器的数量（=a）
• 2.计算选择器中class选择器，属性选择器和伪类选择器的数量（=b）
• 3.计算类型选择器和伪元素选择器的数量（=c）
• 4.忽视通用选择器
• 5.连接三个数字a-b-c就是特异性。特异性越大则优先级越高。

选择器特异性的计算

继承

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

初始值
CSS中，每个属性都有一个初始值，也可以使用initial 关键字显式重置为初始值

CSS的求值过程

布局

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

• 常规流：行级、块级、表格布局、FlexBox、Grid布局

• 浮动

• 绝对定位

border

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

margin

margin指定元素四个方向的外边距，其取值可以是长度、百分数、auto，其中百分数相对于容器宽度。
margin collapse:只在垂直方向上发生，当多个边距相互接触时，那么会发生合并，并取所有边距的最大值。

box-sizing: border-box

box-sizing: border-box将border的外边界设置为高度与宽度，这样就不会出现border超出范围的情况。

overflow：

·overflow·：处理溢出采用。常见取值有：visible（边界与文字全部可见、且文字超出范围）、hidden（隐藏超出范围的文字）、scroll（无论如何都设置了滚动条）

块级与行级

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

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

display

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

常规流

常规流注意事项：

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

行级排版上下文

Inline Formatting Context（IFC）
只包含行级盒子的容器会创建一个IFC，如果存在块级元素，那么IFC会自动划分成小的IFC，但是只是空间上分开。

·IFC内的排版规则:

• 盒子在一行内水平摆放
• 一行放不下时，换行显示
• text-align决定一行内盒子的水平对齐
• vertical-align决定一个盒子在行内的垂直对齐
• 避开浮动（float）元素

块级排版上下文

块级排版上下文全称Block Formatting Context（BFC）
下列容器会创建一个BFC：

• 根元素
• 浮动、绝对定位、inline-block
• Flex子项和Grid子项
• overflow 值不是visible的块盒
• display:flow-root；

flex box

flex box可以控制子级盒子的：摆放的流向、摆放顺序、盒子宽度和高度、水平和垂直方向的对齐、是否允许折行

flexibility

可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。

• flex-grow 有剩余空间时的伸展能力
• flex-shrink 容器空间不足时收缩的能力
• flex-basis 没有伸展或收缩时的基础长度

Grid布局

实现方法：

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

grid-area: a/b/c/d 分别设置/上边界、左边界、下边界、右边界/

float:主要在实现图文环绕时候采用

position

static	默认值，非定位元素	注意点
relative	相对自身原本位置偏移，不脱离文档流	在常规流里面布局,相对于自己本应该在的位置进行偏移
absolute	绝对定位，相对非static 祖先元素定位	脱离常规流,相对于最近的非 static祖先定位,不会对流内元素布局造成影响
fixed	相对于视口绝对定位	position:fixed元素若要以窗口进行定位，最好是放在body根标签下