大厂前端面试题总结（CSS篇）

绝地灬酷狼 2023-02-25 08:51 95阅读 0赞

## 系列文章 ##

*  [大厂前端面试题总结（Web安全篇）][Web]
 *  [大厂前端面试题总结（ES6篇）][ES6]
 *  [大厂前端面试题总结（JS手写篇）][JS]
 *  [大厂前端面试题总结（JS理论篇）][JS 1]
 *  [大厂前端面试题总结（Vue篇）][Vue]
 *  [大厂前端面试题总结（浏览器篇）][Link 1]
 *  [大厂前端面试题总结（性能优化篇）][Link 2]

## CSS部分 ##

**目录**  
1、盒模型  
2、垂直居中  
3、三栏布局  
4、CSS权重计算方式  
5、BFC  
6、清除浮动的方法  
7、position属性（div布局方式）  
8、Flex布局  
9、实现一个自适应的正方形  
10、实现一个三角形  
11、CSS预处理器机制  
**2020.11.16补充**  
12、calc, support, media各自的含义及用法  
13、1rem、1em、1vh、1px各自代表的含义  
14、水平居中四种方式  
15、画一条0.5px的直线？  
16、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？  
17、页面导入样式时，使用link和@import有什么区别？  
18、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？？  
**2020.11.23**  
19、隐藏类有哪些  
20、css的置换元素和非置换元素  
**2020.12.2**  
21、伪类和伪元素的区别（2020.12.18修）  
**2020.12.16**  
22、可继承的样式有哪些

### 1、盒模型 ###

盒模型是Web页面布局的基本方式，它由 `margin + border + padding + content` 四部分组成。  
在W3C标准（标准盒模型）中：`width = content`  
在IE标准（怪异盒模型）中：`width = content + padding + border`  
那么，在两种标准浏览器之间如何实现转换呢？  
为了解决这个问题，在**CSS3中**增加了一个`border-sizing`属性：  
当`border-sizing: border-box`时，是IE盒模型；  
当`border-sizing: content-box`时，是W3C盒模型。

> TIP：感谢[qq\_40360121][qq_40360121]、[树笨无名][Link 3]博友的纠正

### 2、垂直居中 ###

垂直居中的方式有十几种，但常用的方式有三种：第一种使用`flex`；第二种使用`position + transform`；第三种使用`position + 负margin`。

**第一种：flex，outer中设置样式**

.outer {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    }

**第二种：position+transform，主要在inner中设置样式，inner宽高已知**

.outer {
    	position: relative;
    }
    .inner {
    	position: absolute;
    	width: 100px;
    	height: 100px;
    	top: 50%;
    	left: 50%;
    	transform: translate(-50%,-50%);
    }

TIP：感谢[rubbishmaker9527][]指正修改  
**第三种：position+负margin，主要在inner中设置样式，inner宽高已知**

.outer {
    	position: relative;
    }
    .inner {
    	position: absolute;
    	width: 100px;
    	height: 100px;
    	top: 50%;
    	left: 50%;
    	margin-top: -50%;
    	margin-left: -50%;
    }

> 扩展：  
> 第四种：position+负margin，将四个方向的距离都设置成0，然后使用`margin: auto;`也可以实现
> 
>     .outer {
>     	position: relative;
>     }
>     .inner {
>     	position: absolute;
>     	width: 100px;
>     	height: 100px;
>     	left: 0;
>     	right: 0;
>     	top: 0;
>     	bottom: 0;
>     	margin: auto;
>     }

### 3、三栏布局 ###

三栏布局是一种常见的布局方式。原理是中间固定，两边自适应。常用的有三种方式：

<div class="container">
    	<div class="left"></div>
    	<div class="main"></div>
    	<div class="right"></div>
    </div>
    
    * {
      padding: 0;
      margin: 0;
    }
    .container {
      height: 500px;
    }

**第一种：flex**

.container {
    	display: flex;
    }
    .left {
    	flex-bases: 200px
    }
    .right {
    	flex-bases: 200px;
    }
    .main {
    	flex: 1;
    }

**第二种：position**

.left, .right, .main {
      position: absolute;
      height: inherit;
    }
    
    .left, .right {
      width: 200px;
    }
    
    .left {
      left: 0;
    }
    
    .right {
      right: 0;
    }
    
    .main {
      left: 200px;
      right: 200px;
    }

**第三种：float + margin**

.left, .right {
      width: 200px;
      height: inherit;
    }
    
    .left {
      float: left;
    }
    
    .right {
      float: right;
    }
    
    .main {
      margin: 0 200px;
    }

> TIP：感谢[树笨无名][Link 3]博友的纠正

### 4、CSS权重计算方式 ###

CSS基本选择器包括：ID选择器、类选择器、标签选择器、通配符选择器。一般情况下按照：`!importment > 行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通配符选择器`。  
但如果这几种选择器都作用一个元素时，该元素最后会采用哪种样式呢？常见的有两种方式：第一种采用二进制规则计算；第二种采用1，10，100，1000这种方式进行进行计算。我比较倾向于采用二进制方式进行权重计算比较。  
**权值计算方式**

*  内联样式：1000；
 *  ID选择器：0100；
 *  类选择器和伪类选择器：0010；
 *  标签选择器和属性选择器：0001；
 *  通配符选择器、子选择器和相邻选择器：0000；
 *  继承的样式没有权值。

**比较规则**  
层级相同，向后比较；层级不同，层级高的权重大，不论底层级有多少个选择器。

### 5、BFC ###

BFC 是 Block Formatting Context 的简称，翻译过来就是`块级格式化上下文`。

**以下方式都会创建 BFC**

*  根元素（ html ）
 *  浮动元素（ float 值不为 none ）
 *  绝对定位元素（ position 值为 absolution 或 fiexd ）
 *  行内块元素（ display 值为 block ）
 *  表格单元格（ display 值为 table-cell ， html 内表格单元格默认为该值）
 *  表格标题（ display 值为 table-caption ，同上）
 *  匿名表格单元格元素（ display 值为 table、table-row、table-row-group、table-header-group、table-footer-group（它们分别是 html 里的 table、row、tbody、thead、tfoot 的默认值）或 inline-table ）
 *  overflow 值不为 visible 的元素
 *  display 值不为 flow-root 的元素
 *  contain 值为 layout、content 或 paint 的元素
 *  弹性元素（ display 值为 flex 或 inline-flex 元素的直接子元素）
 *  网格元素（ display 值为 grid 或 inline-grid 元素的直接子元素）
 *  多列容器（元素的 column-count 或 column-width 不为 auto ，包括 column-count 为 1 ） column-span 为all的元素始终会创建一个新的 BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome BUG）

**BFC 布局规则**

*  内部 box 会在垂直方向一个接一个的放置；
 *  box 垂直方向的距离由 margin 决定，属于同一个 BFC 的两个相邻的 box margin 会发生重叠；
 *  每个元素的左外边距与包含块的左边界相接触，即使浮动元素也如此；
 *  BFC 区域不会与 float 元素区域发生重叠；
 *  计算 BFC 高度时，浮动元素子元素也参与计算；
 *  BFC 就是页面上一个独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

**BFC 能够解决的问题**

*  父元素塌陷
 *  外边距重叠
 *  清除浮动

### 6、清除浮动的方法 ###

清除浮动的主要目的是为了解决父元素塌陷，比较常用的就是`.clearfix`伪类。

**第一种：clearfix**

<div class="outer clearfix">
    	<div class="inner">
    	</div>
    </div>
    .clearfix {
    	display: block;
    	height: 0;
    	content: '';
    	clear: both;
    	visibility: hidden;
    }

**第二种：同级额外创建div，<div class=“clear”>**

.clear {
    	clear: both;
    }

**第三种：触发父元素BFC，overflow：hidden**

### 7、Position属性（Div布局方式） ###

*  `absolute`:绝对定位，相对于`static`以外第一个父元素进行定位；
 *  `relative`:相对定位，相对于自身进行定位；
 *  `fixed`:固定定位，相对于浏览器窗口进行定位；
 *  `static`:默认值，没有定位，元素出现在正常的流中；
 *  `inherit`:规定应该从父元素中继承`position`的属性。

一般情况下我们喜欢`子绝父相`，也就是父元素相对定位、子元素绝对定位这种布局方式。这种布局方式中，子元素相对于父元素`padding`属性进行定位。

在CSS3中新增加了一个`position:sticky`属性。这个属性的作用是”动态的“：当元素跨越特定阙值前为相对定位，之后为固定定位。元素的阙值指的是top、left、right、bottom其中之一，然后方可使粘性定位生效，否则其行为和绝对定位相同。但`sticky`尚处实验阶段。

### 8、Flex布局 ###

> **父容器**
> 
>  *  **主轴方向，flex-direction**：`row、row-reverse、column、column-reverse`
>  *  **换行方式，flex-wrap**：`nowrap、wrap、wrap-reverse`
>  *  **编写，flex-flow**：`flex-direction、flex-wrap，默认为row nowrap`
>  *  **主轴对齐方式，justify-content**：`flex-start、flex-end、center、space-between、space-around`
>  *  **交叉轴对齐方式，align-items**：`flex-start、flex-end、center、baseline、stretch`
>  *  **多根轴线对齐方式，align-content**：`flex-start、flex-end、center、space-between、space-around、stretch`

> **子容器**
> 
>  *  **在主轴上排列顺序order**：`默认为0，越小排列越靠前`
>  *  **放大比例flex-grow**：`默认为0，数值`
>  *  **缩小比例flex-shrink**：`默认为1，数值`
>  *  **基础尺寸flex-basis**：`默认为auto，可指定大小，例如100px`
>  *  **自己的对齐方式align-self**：`auto、flex-start、flex-end、center、baseline、stretch`
>  *  **编写flex**：`是flex-grow、flex-shrink、flex-basis的缩写，默认 0 1 auto`
>  *  **flex**：`auto` = `flex： 1 1 auto`
>  *  **flex**：`none` = `flex： 0 0 auto`
>  *  **flex取值为单值：** `1、无单位：flex-grow；2、有单位：flex-basis`
>  *  **flex取值为双值：** `1、无单位：grow&shrink；2、有单位：grow&basis`

### 9、实现一个自适应的正方形 ###

**方式一：利用CSS3里面的vm单位**

.square {
    	width: 100vw; // or vh
    	height: 100vw; // or vh
    }

**方式二：利用margin或padding的参考父元素的width属性按照百分比进行计算**

.square {
    	width: 10%;
    	padding-bottom: 10%;
    	height: 0; // 防止内容撑开多余的高度
    }

### 10、实现一个三角形 ###

**方式一：利用盒模型的border属性上下左右交界框处会呈现出平滑斜线的这个特性，通过设置不同的上下左右边框宽度或颜色即可得到三角形或者梯形**

.triangle {
    	height: 0;
    	width: 0;
    	border-color: red blue green pink;
    	border-style: solid;
    	border-width: 30px;
    }

![四种颜色组成的三角形][20200721100516404.png]  
如果想实现一个单独的三角形，只要将其他三块颜色设置成透明即可：

.triangle {
    	height: 0;
    	width: 0;
    	border-color: red transparent transparent transparent;
    	border-style: solid;
    	border-width: 30px;
    }

![红色三角形][20200721100714662.png]  
**方式二：利用CSS3中的clip-path属性**  
`clip-path`属性使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。[clip-path属性详情链接][clip-path]

.triangle {
    	width: 30px;
    	height: 30px;
    	background: red;
    	clip-path: ploygon(0px 0px, 0px 30px, 30px 0px) //将坐标(0,0),(0,30),(30,0) 连成一个三角形
    	transform: rotate(225deg) // 旋转225，变成下三角
    }

### 11、CSS预处理器机制 ###

为了适应当今网站复杂度，CSS预处理器应运而生。

**CSS预处理器的作用：**

**1、文件切分**  
CSS预处理器扩展了`@import`指令的能力，通过编译环节将切分后的文件重新合并为一个大文件。这一方面解决了大文件不便维护的问题，另一方面也解决了一堆小文件在加载时的性能问题。

**2、模块化**  
把文件切分的思路再向前推进一步就是“模块化”。一个大的CSS文件在合理切分之后，所产生的这些小文件相互关系应该是一个树形结构。  
树形的根节点一般称为“入口文件”，属性的其他节点一般称为“模块文件”。入口文件通常会依赖多个模块文件，各个模块文件也可能会依赖其它更末端的模块，从而构成整个树形。示例：

> entry.styl  
> ├─ base.styl  
> │ ├─ normalize.styl  
> │ └─ reset.styl  
> ├─ layout.styl  
> │ ├─ header.styl  
> │ │ └─ nav.styl  
> │ └─ footer.styl  
> ├─ section-foo.styl  
> ├─ section-bar.styl  
> └─ …  
> 入口文件entry.styl在编译时会引入所需的模块，生成entry.css，然后被页面引用。

**3、选择符嵌套**  
在CSS预处理语言中，嵌套语法可以很容易地表达出规则之间的层级关系，为单条生命写注释也很清晰易读。

.nav
       margin: auto  // 水平居中
       width: 1000px
       color: #333
       li
           float: left  // 水平排列
           width: 100px
           a
               display: block
               text-decoration: none

**4、变量**  
变量让开发者更容易实现网站视觉风格的统一，也让换肤这样的需求变得轻松容易。

// 用 Stylus 来写
    $color-primary = #ff4466
    strong
       color: $color-primary
       font-weight: bold
    /* ... */
    .notice
       color: $color-primary

**5、运算**  
运算可以让值与值之间建立关联。在CSS里面有些属性的值其实和其他属性的值是紧密相关，CSS语法无法表达这层关系；而在预处理语言中，我们可以用变量和表达式来呈现这种关系。

.wrapper
       $max-lines = 3
       $line-height = 1.5
    
       overflow: hidden
       line-height: $line-height
       max-height: unit($line-height * $max-lines, 'em')

变量可以是局部定义的变量，也可以从更上层的作用域获取：

$line-height = 1.5  // 全局统一行高
    body
       line-height: $line-height
    .wrapper
       $max-lines = 3
       max-height: unit($line-height * $max-lines, 'em')
       overflow-y: hidden

**6、函数**  
把常见的运算操作抽象出来，我们就得到了函数。开发人员可以自定义函数，预处理器里也内置大量的函数。最常用的内置函数应该就是颜色的运算函数。

.button
       $color = #ff9833
       background-color: $color
       &:hover
           background-color: darken($color, 20%)

**7、Mixin**  
Mixin的形态和用法跟函数十分相似——先定义，然后在需要的地方调用，在调用时可以接受参数。它与函数的不同之处在于：函数用于产生一个值，而Mixin的作用是产生一段CSS代码。Mixin可以产生多条CSS规则，也可以只产生一些CSS声明。

// 为 clearfix 定义一个 mixin
    clearfix()
       ...
       &::after
           ...
    // 在需要的元素身上调用
    .info
       clearfix()
    footer
       clearfix()

**8、工程化**  
CSS预处理语言无法直接运行于浏览器环境，也就是编写的源码需要编译成CSS代码之后才能用于页面。但现在的前端开发流程已经包含了构建环节，所以开发只要按照标准写法即可，后期代码校验、代码压缩、代码后处理等让工具搞定就好了。

[参考链接][Link 4]

### 12、calc, support, media各自的含义及用法 ###

*  **@support**：

> 用于检测浏览器是否支持CSS某个属性，即条件判断，如果支持某个属性，可以写一套样式，如果不支持某属性，提供另一套样式作为替补。  
> 基本用法：
> 
>     @support(prop:value){
>     	/*自己的样式*/
>     }
>     @supports (display: flex) { div { display: flex; }}
> 
> 除此之外还支持逻辑运算符`or`、`and` 和 `not`及其混用  
> `@supports (transition-property: color) or ((animation-name: foo) and (transform: rotate(10deg))){/*自己的样式 */}`

**calc()**：用于计算动态函数值，支持“+”，“-”，“\*”，“/”运算

>  *  需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
>  *  任何长度值都可以使用calc()函数进行计算；
>  *  calc()函数支持 “+”, “-”, “\*”, “/” 运算；
>  *  calc()函数使用标准的数学运算优先级规则；

**@media**：针对不同的媒体类型定义不同的样式

> **基本用法**
> 
>     @media mediatype and|not|only (media feature) {CSS-Code;}

[参考链接][Link 5]

### 13、1rem、1em、1vh、1px各自代表的含义 ###

*  `rem`：相对于页面根元素元素，通常做法是给html元素设置一个字体大小，然后其他元素的大小就是相对于根元素的大小
 *  `em`：相对于父元素字体大小，元素的width/height/padding/margin用em的话是相对于该元素的font-size
 *  `vw/vh`：视窗的宽度和高度，相对于屏幕宽度和高度的1%，处理宽度的时候%单位更合适，高度vh更合适
 *  `px`:像素，相对于屏幕分辨率而言

[参考链接][Link 6]

### 14、水平居中四种方式 ###

*  text-align方式  
    `text-align: center`：文本居中
 *  margin方式  
    `margin: auto`：content居中，**非块级元素必须设置宽度**
 *  flex方式  
    `justify-content: center`：主轴对齐

其他几种方式参考上文：2、垂直居中

### 15、画一条0.5px的直线？ ###

transform: scale(0.5,0.5); // 2D缩放转化

更多transform信息参考菜鸟教程链接：[CSS3 transform 属性 | 菜鸟教程][CSS3 transform _ _]

### 16、行内元素有哪些？块级元素有哪些？空（void）元素有哪些？ ###

*  行内元素：a、b、span、img、input、strong、select、label、em、button、textarea等
 *  块级元素：div、ul、li、dl(定义列表)、p、h1-h6、blockquote(段落缩进)等
 *  空元素：即系没有内容的HTML元素，例如：br、meta、hr、link、input、img等

[参考文章][Link 7]

### 17、页面导入样式时，使用link和@import有什么区别？ ###

*  **差别1：老祖宗的差别**  
    link属于XHTML标签，而@import完全是css提供的一种方式。  
    link标签除了可以加载css外，还可以做很多其他的事情，比如定义RSS，定义rel连接属性等，@import只能加载CSS。
 *  **差别2：加载顺序的差别**  
    当一个页面被加载的时候（就是被浏览者浏览的时候），link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再加载。所以有时候浏览@import加载CSS的页面时会没有样式（就是闪烁），网速慢的时候还挺明显。
 *  **差别3：兼容性的差别**  
    由于@import是CSS2.1提出的所以老的浏览器不支持，@import只有在IE5以上的才能识别，而link标签无此问题，完全兼容。
 *  **差别4：使用dom控制样式时的差别。**  
    当时用JavaScript控制dom去改变样式的时候，只能使用link标签，因为@import不是dom可以控制的（不支持）。

[参考链接][Link 8]

### 18、什么是 FOUC（无样式内容闪烁）？你如何来避免 FOUC？ ###

**什么是FOUC(文档样式短暂失效)?**

> 如果使用import方法对CSS进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象:以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC。

**解决方法：**

> 使用LINK标签将样式表放在文档HEAD中。

### 19、隐藏类有哪些 ###

隐藏属性即通过`css`样式将元素隐藏起来。  
常用的几种方式：

*  通过设置`display: none`
 *  通过设置`visibility: hidden`
 *  通过设置`opacity: 0`
 *  通过将元素盒模型设置为：
    
        .hiddenBox {
            margin:0;
            border:0;
            padding:0;
            height:0;
            width:0;
            overflow:hidden;
        }

**元素隐藏后的事件响应**  
元素隐藏后只有`opacity: 0`的元素可以触达点击事件，其他几种方式都不能触发点击事件；  
通过`JS`以上任意一种方式都可以触发点击事件

**CSS3 transition对这几种方法的影响(动画效果)**

*  `display:none` 完全不受transition属性的影响，元素立即消失
 *  `visibility：hidden` 元素消失的时间跟transition属性设置的时间一样，但是没有动画效果
 *  `opacity` 和 `height` 等属性能够进行正常的动画效果

### 20、css的置换元素和非置换元素 ###

**什么是置换元素**

*  内容不受CSS视觉格式化模型控制
 *  CSS渲染模型并不考虑对此内容的渲染
 *  一般元素本身拥有固定的宽高比的元素

**行内级置换元素的宽度**

*  行内级非置换元素：高度和宽度设置没有用，垂直方向上的margin、padding设置也没有用。
 *  行内级置换元素：
    
     *  如果宽高或者宽的值为auto，且元素有固有的宽度，则width是此固有的宽度;
     *  如果宽度设置为auto，且不符合上述条件，则宽度的使用值为300px。
        
        > 如：iframe，canvas
     *  如果宽度设置为auto，但是高度有非auto的值，且元素有固定的宽高比： `width = 高度 * 固定宽高比`
        
        > 如img只设定了height，宽度会按比例计算

**行内级置换元素的高度**

*  行内级非置换元素  
    高度和宽度设置是不适用，垂直方向上的margin、padding设置也没有用。
 *  行内级置换元素
    
     *  如果宽高或者高的值为auto，且元素有固有的高度，则height是此固有的宽度
     *  如果高度设置为auto，但是宽度有非auto的值，且元素有固定的宽高比：`height = 宽度 / 固定宽高比`
     *  如果高度设置成auto，且不符合上述条件，则height的值不能大于150px，且宽度不能大于高度的2倍。

*  **常见的行内置换元素**  
    `<img>`  
    `<input>`  
    `<textarea>`  
    `<select>`  
    `<object>`

### 21、伪类和伪元素的区别 ###

#### 伪元素 ####

*  每条选择器最多只能包含一个伪元素  
    ![伪元素][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70]

#### 伪类 ####

*  每条选择器可以包含多个伪类
 *  UI伪类选择器顺序：`:hover`、`:foucs`、`:active`  
    ![伪类][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70 1]

#### 总结 ####

*  伪元素的操作对象是新生成的dom元素，而不是原来dom结构里就存在的；而伪类恰好相反，伪类的操作对象是原来的dom结构里就存在的元素。
 *  伪元素与伪类的根本区别在于：操作的对象元素是否存在于原来的dom结构里。

### 22、可继承的样式有哪些 ###

> **继承就是指子节点默认使用父节点的样式属性。**  
> 不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。

*  可以继承的属性很少，只有颜色，文字，字体，间距，行高，对齐方式和列表的样式可以继承。
 *  所有元素可继承：`visibility`和`cursor`。
 *  内联元素可继承：`letter-spacing`、`word-spacing`、`white-space`、`line-height`、`color`、`font`、`font-family`、`font-size`、`font-style`、`font-variant`、`font-weight`、`text-decoration`、`text-transform`、`direction`。
 *  终端块状元素可继承：`text-indent`和`text-align`。
 *  列表元素可继承：`list-style`、`list-style-type`、`list-style-position`、`list-style-image`。

[Web]: https://blog.csdn.net/qq_37820580/article/details/107658086
[ES6]: https://blog.csdn.net/qq_37820580/article/details/107503676
[JS]: https://blog.csdn.net/qq_37820580/article/details/107809181
[JS 1]: https://blog.csdn.net/qq_37820580/article/details/107358309
[Vue]: https://blog.csdn.net/qq_37820580/article/details/113549411
[Link 1]: https://blog.csdn.net/qq_37820580/article/details/107556093
[Link 2]: https://blog.csdn.net/qq_37820580/article/details/107493640
[qq_40360121]: https://blog.csdn.net/qq_40360121
[Link 3]: https://blog.csdn.net/m0_50760997
[rubbishmaker9527]: https://blog.csdn.net/rubbishmaker9527
[20200721100516404.png]: /images/20230209/3a7555183d18483eaf96c179267b2a9d.png
[20200721100714662.png]: /images/20230209/6121b1b0fd864300ae4ac80485c6ece6.png
[clip-path]: https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path
[Link 4]: https://juejin.im/post/5da32d43e51d45781d5e4bdf
[Link 5]: https://www.cnblogs.com/gaoht/p/11263976.html
[Link 6]: https://www.cnblogs.com/xingxyx/p/11672500.html
[CSS3 transform _ _]: https://www.baidu.com/link?url=bz2ilhD6bdXFIWDiElbYGU-pi8_TSrwMQQt727p2i4h5VXEoNxpBX_cBXXiIJe5A76mBDZ0wC1vkWx3Xco48fK&wd=&eqid=a65cdc2800032043000000065fb202d2
[Link 7]: https://www.cnblogs.com/yuanqisheng/p/12242459.html
[Link 8]: https://www.cnblogs.com/passkey/p/10141553.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70]: /images/20230209/46e6bf6e9efe43afae25acb598a5da9e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODIwNTgw_size_16_color_FFFFFF_t_70 1]: /images/20230209/b85d0c86624f4b1c86bde9e37df2a78e.png