关于CSS的一些进阶知识（持续更新）

一、块级格式上下文（Block Formatting Context，简称BFC）

1. 定义

它定义了一种封闭的空间，在其内部形成了新的块级格式上下文，使得其中的元素和外部元素互相隔离，并且布局不会被跨越到 BFC 外部

2. 常见的元素（块级元素）

包括 div、p、ul 等等

3. 应用

解决外边距塌陷的问题

介绍一下外边距塌陷的情景（引用字节青训营课程图片）

两个相邻元素的没有内容、边框、内边距、高度等的影响，其上下边距重合在一起而产生的一种现象，使得最终的垂直外边距值只取两者中的较大者。

父子元素之间发生塌陷时是子元素没有内容、边框、内边距、高度等，导致子元素的外边距与父元素贴在一起，这是因为父元素和子元素的外边距被合并在一起计算了

4. 触发条件

// 第一种
display:inline-block 或 flow-root;
// 第二种
position:fixed 或 absolute;
// 第三种
overflow:hidden 或 auto;
// 第四种
float:不为none即可;

二、内联级格式上下文

1. 定义

内联级元素是指默认在同一行内排列显示的元素，默认是从左到右再从上到下依次排列，内部由一条看不见的基准线来对其竖直方向的位置（默认为 vertical-align:baseline;），可用 vertical-align:middle ; 或者设置 line-height:父容器高度 来设置居中

2. 常见的元素

包括有 span 、 img（块级行内元素）、h1 、a 标签等等

三、优先级

• 优先顺序：
  ! important --> 内联样式 --> CSS文件 --> 浏览器默认样式
• 判断方法

从 左 到 右 逐一比较 ，一旦大于则说明该选择器的优先级高

a : id选择器
b : 类、伪类、属性选择器
c : 标签、伪元素选择器

			（	a	,	b	,	c	）

.class li p		0		1		2		(第一个)
   .ul .li		0		2		0		(第二个)
#id .class p	1		1		1		(第三个)

// 优先级
第三个	>	第二个	>	第一个

四、继承

前端 HTML的基本规则，可设置 inherit 显性表示该属性被继承

注意：大部分可继承的属性均为文本属性，如 font、color、text-align、line-height、letter-spacing、word-spacing、direction、visibility、cursor 等等，还有少部分表格、列表等属性

五、层叠上下文

我们都知道 页面中存在三维坐标系，分别是 X轴（从左到右，向右移动为正值参考top）、Y轴（从上到下，向下移动为正值参考left）、Z轴（从内到外，正值为朝屏幕外移动），而 HTML 元素在页面上都有一定的可见部分的，在 Z 轴上会发生重叠的部分

因此需要层叠上下文来管理多个盒子之间的层次关系，来决定它们在重叠部分显示的优先级

优先级：

设置新的层叠上下文方法

• position: relative或absolute;
• 设置 z-index 不为 auto；
• position: fixed; 或 sticky;
• opacity 的值小于1
• tranform 的值不为none

六、关于动画常用元素

过渡效果 transition

transition:<property> <duration> <timing-function> <delay>

• property

要进行过渡的属性名 （color、background-color）

• duration

过渡效果的完成时间

• timing-function

过渡效果的加速度（变化形式：linear（匀速运动）、ease（慢进快出）、ease-in（由慢至快）、ease-out（由快至慢）等）

• delay

过渡效果的延迟时间，即距离过渡效果开始的时间

变形 transform

2D 属性（在 X、Y轴生效的元素）

• 关于基准原点 transform-origin

用于设置变换的基准源点位置，即指定变换中心点位置的属性，以下所有属性都以这个为基准原点进行移动、放缩、旋转、倾斜

// 默认值
transform-origin:top left;
// 居于元素中心
transform-origin:center;
// 居于底部中心
transform-origin:bottom center;
// 居于右下角
transform-origin:bottom right;

• 关于移动 translate (xpx,ypx)

接收x和y轴上面的像素为参数，用于控制元素偏移的距离

注意：基准原点在元素的左上角

// 向右偏移100px,向上偏移100px
transform:translate(100px,-100px) 

居中对齐的例子

position:absolute;
// 由于基准原点在元素在左上角，因此实际是元素的左上角位于页面中心
top:50%; left:50%;
// 由于基准原点在左上角，此步骤是补偿基准原点在中心，令元素中心位于页面中心
transform:translate(-50%,-50%);

• 关于放缩 scale(xNum,yNum) 或按比例放缩：scale(num)

接收数字作为参数，xNum 表示水平方向的缩放比例，yNum 表示垂直方向的缩放比例，只指定一个参数时，则表示在水平和垂直方向上使用相同的缩放比例,1 为默认值，小于 1 代表缩小，大于 1 代表放大

• 关于旋转 rotate (deg/rad/grad)

接收角度作为参数，控制元素在基准原点的旋转角度

注意：正值表示顺时针旋转，负值表示逆时针旋转

• 关于倾斜 matrix (a, b, c, d, e, f)

可以对元素进行平移、旋转、缩放等复杂的变换

3D 属性

以下属性都可以配合使用

• 关于 translate3d

transform:translate3d(x,y,z)

• 关于 rotate3d

x、y、z 分别为旋转轴的方向，取值为 -1 到 1，正数为正方向、负数为逆方向

transform:rotate3d(x,y,z,deg)

• 关于 scale3d

transform: scale3d(x, y, z);

• 关于 matrix3d（少用）

transform: matrix3d(a1, b1, c1, d1,
                    a2, b2, c2, d2,
                    a3, b3, c3, d3,
                    tx, ty, tz, w);

(a1, b1, c1)、(a2, b2, c2) 和 (a3, b3, c3) 分别表示元素在 X 轴、Y 轴和 Z 轴上的缩放、旋转和倾斜等变换； (tx, ty, tz) 表示元素的平移变换；w 表示一个透视因子，控制了元素在 3D 空间中的显示效果，通常取值为 -1/1000

本文持续更新中