前端面试总结——CSS

末蓝、 2022-11-14 10:20 357阅读 0赞

### 文章目录 ###

*  1. 讲一讲CSS选择器的优先级？
 *   *  css基本选择器有哪些？
     *  权重计算规则：
     *  css选择器优先级顺序
     *  哪些属性可以继承？
     *  多类选择器和结合元素选择器（补充）
 *  2. 页面导入样式时，使用link和@import有什么区别？
 *  3. 有哪些方式（CSS）可以隐藏页面元素？
 *  4. px/em/rem的区别？
 *   *  三者的区别
     *  em 单位如何转换为像素值
     *  rem 单位如何转换为像素值
     *  重点理解
     *  em 单位的遗传效果
     *  再看rem的优点
 *  5. 如何让一个元素水平垂直居中？(方案总结+代码实例)
 *  6. CSS的定位方式有哪几种？
 *  7. 如何理解z-index？
 *  8. 如何理解层叠上下文？
 *  9. 清除浮动有哪些方法？为什么要清除浮动？
 *  10. 你对媒体查询的理解？
 *  11. 你对盒模型的理解，标准盒模型和怪异盒模型有什么区别？
 *   *  什么是盒模型？
     *  标准盒模型和怪异盒模型有什么区别？
 *  12. 什么是BFC？如何形成？应用场景有哪些？
 *   *  什么是BFC？
     *  如何形成BFC?
     *  应用场景有哪些？
 *  13. 伪类和伪元素的区别是什么？
 *  14. 你对flex的理解？
 *  15. 禁止用户选中
 *  16. 纯css手写三角形
 *  17. 了解动画和过渡吗？
 *   *  CSS 中动画有几种？
     *  如何写「过渡动画」？
     *  如何写关键帧动画？
 *  18. 实现圣杯布局和双飞翼布局
 *  19. 浏览器是怎样解析CSS选择器的？
 *  20. 为什么要初始化CSS样式
 *  21. display:none与visibility：hidden的区别？
 *  22. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
 *  END. CSS优化、提高性能的方法有哪些？

# 1. 讲一讲CSS选择器的优先级？ #

## css基本选择器有哪些？ ##

1.  通配符选择器 `* {}`
2.  标签选择器 `body,div,p,ul,li {}`
3.  id选择器 `#name{}`
4.  类选择器（class选择器）`.center {}`
5.  后代选择器 `.first span{}`
6.  子代选择器 `.food>li{}`
7.  内联选择器 `<p style=""></p>`
8.  `!important`

## 权重计算规则： ##

1.  第一优先级：无条件优先的属性只需要在属性后面使用`!important`。它会覆盖页面内任何位置定义的元素样式。
2.  第一等：内联样式，如：`style="color:red;"`，权值为1000.（该方法会造成css难以管理，所以不推荐使用）
3.  第二等：ID选择器，如：`#heade`r，权值为0100.
4.  第三等：类、伪类、属性选择器如：`.bar`， 权值为0010.
5.  第四等：标签、伪元素选择器，如：`div` `::first-line` 权值为0001.
6.  通配符，子选择器，相邻选择器等。如`*`，`>`,`+`, 权值为0000.
7.  继承的样式没有权值。

## css选择器优先级顺序 ##

**内联样式 > ID选择器 > `类选择器 = 属性选择器 = 伪类选择器` > `元素选择器 = 关系选择器 = 伪元素选择器` > 通配符选择器**

## 哪些属性可以继承？ ##

可继承的属性：font-size, font-family, color

不可继承的样式：border, padding, margin, width, height

## 多类选择器和结合元素选择器（补充） ##

> 日常开发中我们会碰到css中两个类选择器之间有的有空格，有的没空格。有空格的是后代选择器，那没有空格的是什么呢？

**没有空格的选择器有两种：`多类选择器`和`结合元素选择器`。**

**结合元素选择器**

元素选择器可以结合类选择器来使用。

p.important { color:red;}

选择器 p.important 解释为：“其 class 属性值为 important 的所有段落”。我更想把其解释为：“段落中类名（class属性）为important的元素”，或者“是段落，同时类名也是important的”。

**多类选择器**

<html>
    <head>
    <style type="text/css"> .important { font-weight:bold;} .warning { font-style:italic;} .important.warning { background:red;} </style>
    </head>
    
    <body>
    <p class="important">This paragraph is very important.</p>
    <p class="warning">This is a warning.</p>
    <p class="important warning">This paragraph is a very important warning.</p>
    
    <p>This is a paragraph.</p>
    
    <p>...</p>
    </body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]  
**在 HTML 中，一个标签可能有多个类名（class），每个类名之间用空格分隔。**

**通过把两个类选择器链接在一起，中间不加空格，仅可以选择同时包含这些类名的元素（类名的顺序不限）。**

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

先看看这两种方式都是如何使用的：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        
        <link rel="stylesheet" href="yellow.css">
        <style type="text/css"> @import url("green.css"); </style>
    </head>
    <body>
        <div style="width: 50px; height: 50px;"></div>
    </body>
    </html>

**link和@import有什么区别?**

1.  **从属关系**：`link`是html的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel(一些)连接属性等；而`@import`是css的语法，只有导入样式表的作用。
2.  **加载顺序**：页面被加载时，`link`会和html同时被加载；而`@import`引入的 CSS 将在页面加载完毕后被加载。
3.  **兼容性**：`link`是 HTML 标签，所以不存在兼容性问题；而`@import`是 CSS2.1 才有的语法，所以只能在 IE5以上 才能识别。
4.  **DOM**：javascript只能控制dom去改变`link`标签引入的样式，而`@import`的样式不是dom可以控制的。
5.  `link`方式的样式权重高于`@import`的权重。（如果对权重不是十分了解，可以看我之前的文章）

`@import`必须写在样式顶部，在html中 `<style>@import url(引入的css路径);</style>`  
这个`@import`必须要写在style的第一行。

# 3. 有哪些方式（CSS）可以隐藏页面元素？ #

**透明**

*  **`opacity:0`**：本质上是将元素的透明度将为0，就看起来隐藏了，但是依然占据空间且可以交互
 *  **`visibility:hidden`**: 与上一个方法类似的效果，占据空间，但是不可以交互了

**溢出**

*  **`overflow:hidden`**: 这个只隐藏元素溢出的部分，但是占据空间且不可交互

**文档流**

*  **`display:none`**: 这个是彻底隐藏了元素，元素从文档流中消失，既不占据空间也不交互，也不影响布局

**层级**

*  **`z-index:-9999`**: 原理是将层级放到底部，这样就被覆盖了，看起来隐藏了

**欧几里德平面（二维平面）上的缩放**

*  **`transform: scale(0,0)`**: 平面变换，将元素缩放为0，但是依然占据空间，但不可交互

CSS 函数 **`scale()`** 用于修改元素的大小。可以通过向量形式定义的缩放值来放大或缩小元素，同时可以在不同的方向设置不同的缩放值。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]

> scale() 仅适用于在欧几里德平面（二维平面）上的变换。如果需要进行空间中的缩放，必须使用 scale3D() 。

# 4. px/em/rem的区别？ #

## 三者的区别 ##

*  **px**是固定的像素，是相对于显示器屏幕分辨率而言的，一旦设置了就无法因为适应页面大小而改变。

为了解决**px**的问题，提出了**em**。它是相对于当前对象内文本的字体尺寸，若没有设置行内文本的字体尺寸，则使用浏览器默认字体尺寸，一般为16px。

但**em**使用起来依旧有诸多不便，复杂的嵌套逻辑使得更改了部分元素会产生字体大小变化的连锁反应。

**rem**是**CSS3**新增加的相对单位，即`root em`，是**相较于根元素**（html)。rem的根据根节点使得计算更清晰。

*  **em**和**rem**相对于px更具有灵活性，他们是相对长度单位，意思是长度不是定死了的，更适用于响应式布局，场景如移动端。**em**和**rem**都是由浏览器转换为像素值，具体大小取决于您的设计中的字体大小设置。

em 和 rem 单位之间的区别是浏览器根据谁来转化成px值，理解这种差异是决定何时使用哪个单元的关键。

我们要通过复习 rem 和 em 单位如何工作，来理解em和rem之间的区别。

## em 单位如何转换为像素值 ##

当使用em单位时，像素值将是em值乘以使用em单位的元素的字体大小，他们转换为像素大小取决于应用在当前元素的字体尺寸。

例如，如果一个 div 有 18px 字体大小，10em 将等同于 180px，即 10 × 18 = 180。  
![在这里插入图片描述][20210330135712490.png]  
CSS padding设置为 10em  
![在这里插入图片描述][20210330135758442.png]  
计算结果为 180px (或接近它)

## rem 单位如何转换为像素值 ##

当使用 **rem** 单位，他们转化为像素大小**取决于页根元素**的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。

例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。  
![在这里插入图片描述][20210330140010120.png]  
CSS padding设置为 10rem  
![在这里插入图片描述][20210330140022132.png]  
计算结果为160px

## 重点理解 ##

有一个比较普遍的误解，认为 em 单位是相对于父元素的字体大小。 事实上，根据W3标准 ，它们是相对于使用em单位的元素的字体大小。

父元素的字体大小可以影响 em 值，但这种情况的发生，纯粹是因为继承。 让我们看看为什么以及如何起作用。

## em 单位的遗传效果 ##

使用 em 单位存在继承的时候，情况会变得比较棘手，因为每个元素将自动继承其父元素的字体大小。 继承效果只能被明确的字体单位覆盖，比如px,vw

使用 em 单位的元素字体大小根据它们来定。 但该元素可能继承其父元素的字体大小，而父元素又继承其父元素的字体大小，等等。 因此，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。

## 再看rem的优点 ##

rem这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。**这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应**。

**参考：**

*  http://caibaojian.com/rem-vs-em.html
 *  https://www.runoob.com/w3cnote/px-em-rem-different.html
 *  http://caibaojian.com/rem-vs-em.html
 *  https://webdesign.tutsplus.com/zh-hans/tutorials/comprehensive-guide-when-to-use-em-vs-rem–cms-23984
 *  https://blog.csdn.net/qq\_37149252/article/details/106137305
 *  https://www.runoob.com/cssref/css-units.html

# 5. 如何让一个元素水平垂直居中？(方案总结+代码实例) #

这个问题讲起来稍长一点，已另开新的文章：[如何让一个元素水平垂直居中？(方案总结+代码实例) 超详细！！！！\_前端圆圆-CSDN博客 https://blog.csdn.net/weixin\_45844049/article/details/115404672][_-CSDN_ https_blog.csdn.net_weixin_45844049_article_details_115404672]

# 6. CSS的定位方式有哪几种？ #

篇幅较大，已另开新的文章：[CSS的定位方式有哪几种？详解sticky粘性定位！！！\_前端圆圆-CSDN博客 https://blog.csdn.net/weixin\_45844049/article/details/116195675][CSS_sticky_-CSDN_ https_blog.csdn.net_weixin_45844049_article_details_116195675]

# 7. 如何理解z-index？ #

z-index 属性指定一个元素的堆叠顺序。

当元素之间重叠的时候， z-index 较大的元素会覆盖较小的元素在上层进行显示。

# 8. 如何理解层叠上下文？ #

层叠上下文是HTML元素的三维概念，这些HTML元素在一条假想的相对于面向（电脑屏幕的）视窗或者网页的用户的z轴上延伸。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 2]  
**在层叠上下文中，子元素同样也按照上面解释的规则进行层叠。 重要的是，其子级层叠上下文的 z-index 值只在父级中才有意义。子级层叠上下文被自动视为父级层叠上下文的一个独立单元。**

# 9. 清除浮动有哪些方法？为什么要清除浮动？ #

篇幅较大，已另开新的文章：[清除浮动有哪些方法？为什么要清除浮动？\_前端圆圆-CSDN博客 https://blog.csdn.net/weixin\_45844049/article/details/116457271][-CSDN_ https_blog.csdn.net_weixin_45844049_article_details_116457271]

# 10. 你对媒体查询的理解？ #

**媒体查询可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面。**

最简单的媒体查询语法看起来是像这样的：

@media media-type and (media-feature-rule) { 
      /* CSS rules go here */
    }

它由以下部分组成：

*  一个媒体类型，告诉浏览器这段代码是用在什么类型的媒体上的（例如印刷品或者屏幕）；
 *  一个媒体表达式，是一个被包含的CSS生效所需的规则或者测试；
 *  一组CSS规则，会在测试通过且媒体类型正确的时候应用。

一个例子：

@media screen and (width: 600px) { 
        body { 
            color: red;
        }
    }

# 11. 你对盒模型的理解，标准盒模型和怪异盒模型有什么区别？ #

## 什么是盒模型？ ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 3]  
盒模型由content（内容）、padding（内边距）、border（边框）、margin（外边距）组成。

## 标准盒模型和怪异盒模型有什么区别？ ##

> 我们目前所学习的知识中，以标准盒子模型为准。

**标准盒子模型：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 4]  
**IE盒子模型：**

IE盒子模型（怪异盒子模型）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 5]  
**区别：**

**标准盒子模型中**，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

> 标准盒模型声明的元素宽度width = content(宽度)

**IE盒子模型中**，width 和 height 指的是内容区域+border+padding的宽度和高度。元素内容的宽度和高度是由已设定的宽度和高度分别减去边框和内边距后得到的。

> IE盒模型声明的元素宽度width = content(宽度) + padding(左右宽度) + border(左右宽度)

**两者的声明使用：**

现代浏览器默认使用W3C的标准盒模型，但是在不少情况下怪异盒模型更好用，于是W3C在css3中加入`box-sizing`：

box-sizing: content-box // 标准盒模型
    
    box-sizing: border-box // 怪异盒模型

**一句话总结就是：**

标准盒模型的内容大小就是content的大小，而ie盒模型的大小则是content+padding+border总的大小。

# 12. 什么是BFC？如何形成？应用场景有哪些？ #

## 什么是BFC？ ##

**块格式化上下文（Block Formatting Context，BFC）**，它是一个独立的渲染区域，与区域外部毫不相干。

## 如何形成BFC? ##

下列方式会创建**块格式化上下文（BFC）**：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 6]

## 应用场景有哪些？ ##

**1.防止外边距塌陷**  
创建新的 BFC 避免两个相邻 `<div>` 之间的 **外边距合并** 问题

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> .blue, .red-inner { height: 50px; margin: 10px 0; } .blue { background: blue; } .red-outer { /* 通过overflow: hidden创建新的BFC */ overflow: hidden; background: red; } </style>
    </head>
    
    <body>
        <div class="blue"></div>
        <div class="red-outer">
            <div class="red-inner">red inner</div>
        </div>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 7]  
如果我们取消BFC，注释掉 `overflow: hidden;` 这行代码

.red-outer { 
          /* 通过overflow: hidden创建新的BFC */
          /* overflow: hidden; */
    
          background: red;
      }

![在这里插入图片描述][20210507112501716.png]  
从上图可以发现外边距塌陷了，这就是BFC的效果。

**2.防止浮动导致父元素高度塌陷**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <style> .container { border: 10px solid red; } .inner { background: #08BDEB; height: 100px; width: 100px; } </style>
    </head>
    
    <body>
        <div class="container">
            <div class="inner"></div>
        </div>
    </body>
    
    </html>

上面的代码效果如下：  
![在这里插入图片描述][20210507140537899.png]  
接下来将inner元素设为浮动:

.inner { 
        float: left;
        
        background: #08BDEB;
        height: 100px;
        width: 100px;
      }

会产生这样的塌陷效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 8]  
但如果我们对父元素设置BFC后, 这样的问题就解决了:

.container { 
        border: 10px solid red;
    
    	/* 通过overflow: hidden讲父盒子设置为BFC */
        overflow: hidden;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 9]  
这也是清除浮动的一种方式。

# 13. 伪类和伪元素的区别是什么？ #

**什么是伪类？**

伪类用于定义元素的特殊状态。

例如，它可以用于：

*  设置鼠标悬停在元素上时的样式
 *  为已访问和未访问链接设置不同的样式
 *  设置元素获得焦点时的样式

伪类开头为单冒号 `：`

a:link { color:#FF0000;} /* 未访问的链接 */
    a:visited { color:#00FF00;} /* 已访问的链接 */
    a:hover { color:#FF00FF;} /* 鼠标划过链接 */
    a:active { color:#0000FF;} /* 已选中的链接 */

**什么是伪元素？**

CSS 伪元素用于设置元素指定部分的样式。

例如，它可用于：

*  设置元素的首字母、首行的样式
 *  在元素的内容之前或之后插入内容

伪元素开头为双冒号 `::`

::before /* 元素内容前插入新内容 */
    ::after /* 元素内容之后插入新内容 */
    ::first-letter /* 文本首字母。常用于对文本首字母设置样式 */
    ::first-line /* 文本首行。常用于对文本首行设置样式。仅用于块级元素 */
    ::selection /* 选中的内容。常用于文本 */
    ::placeholder /* 占位符。用于设置占位符的样式 */

# 14. 你对flex的理解？ #

flex（弹性盒子）是一种更为简洁灵活的布局方式。

容器默认存在两根轴：横轴和纵轴。

使用弹性盒子，要在父盒子先设置`display:flex`。

常用于：

*  在父内容里面垂直居中一个块内容。
 *  分布对齐的场景等。

经常用到的属性：

**1. `flex-direction`**

:) 规定容器中的项目是按行排列还是按列排列

*  row：横向从左到右排列（左对齐），默认的排列方式。
 *  row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
 *  column：纵向排列。
 *  column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

**2. `justify-content`**

:) 定义了项目在主轴上的对齐方式

*  flex-start：弹性项目向行头紧挨着填充。这个是默认值。
 *  flex-end：弹性项目向行尾紧挨着填充。
 *  center：弹性项目居中紧挨着填充。（常用）
 *  space-between：弹性项目平均分布在该行上。（常用）
 *  space-around：弹性项目平均分布在该行上，两边留有一半的间隔空间。

效果图展示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 10]  
**3. `align-items`**

:) 定义了项目在“纵轴”上的对齐方式

语法：

align-items: flex-start | flex-end | center | baseline | stretch

各个值解析:

*  flex-start：侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
 *  flex-end：侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
 *  center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（常用）

**题目： 请用flex实现三栏布局，高度已知，左右栏宽度300px，中间自适应。**

用一个容器container包裹三栏，设置comtainer容器的display属性为flex，左右栏设置宽度为300px，中间栏设置flex:1，这里的1表示宽度比例，具体数值取决于其它盒子的flex值，由于这里其它盒子宽度固定，所以中间栏会自动填充。代码如下：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>三栏布局</title>
    </head>
    <style type="text/css"> * { margin: 0; padding: 0; } .container { display: flex; /*只设置这一属性就OK*/ } .left { background-color: aqua; width: 300px; height: 100px; } .center { height: 100px; background: #f296ff; flex: 1; } .right { height: 100px; background-color: #6ee28d; width: 300px; } </style>
    
    <body>
        
        <div class="container">
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
    </body>
    
    </html>

效果图如下：  
![在这里插入图片描述][20210508110733594.png]  
中间的盒子会随着浏览器窗口的放大缩小而变化。

**题目：内容宽度等分**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>三栏布局</title>
    </head>
    <style type="text/css"> .box { display: flex; } .box div { flex: 1; border: 1px solid red; } </style>
    
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </body>
    
    </html>

效果图如下：  
![在这里插入图片描述][20210508111511302.png]  
**题目：flex: 1 代表什么意思**

`flex: 1` 是 `flex: 1 1 0` 的缩略形式。

flex 值为 1，这表示每个元素占用空间都是相等的，占用的空间是在设置 padding 和 margin 之后剩余的空间。

# 15. 禁止用户选中 #

.unselectable { 
        user-select: none;
    
        -moz-user-select: -moz-none;
        -khtml-user-select: none;
        -webkit-user-select: none;
        /* Introduced in IE 10. See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/ */
        -ms-user-select: none;
     }

# 16. 纯css手写三角形 #

宽高设为0，`border`设置宽度，三边透明`transparent`，三角形底部方向设置颜色，就可以实现三角形了

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> .triangle { width: 0; height: 0; border-style: solid; border-width: 50px; border-color: transparent transparent red transparent; } /* 简写版 */ .triangle2 { width: 0; height: 0; border: 50px solid transparent; border-top-color: orange; } </style>
    </head>
    
    <body>
        <div class="triangle"></div>
        ————
        <div class="triangle2"></div>
    </body>
    
    </html>

效果图如下：  
![在这里插入图片描述][20210508115848776.png]

# 17. 了解动画和过渡吗？ #

## CSS 中动画有几种？ ##

两种！一种是过渡动画，一种是关键帧动画。

过度动画只能定义「开始」和「结束」两个状态。

关键帧动画可以定义「多个状态」。

## 如何写「过渡动画」？ ##

使用 transition 属性即可撰写过渡动画。比如看下面的例子：

<html>
      <body>
        <div class="section">hello</div>
      </body>
    </html>

.section{ 
      width: 100px;
      background-color: black;
      color: white;
      transition: 2s;
    }
    
    .section:hover{ 
      width: 300px;
    }

上面代码的含义：

div 在平时状态下宽度为 100 像素，在**鼠标悬浮**其上的时候，宽度为 300 像素。

但是可以看到，我们通过加入了`transition: 2s;`这个属性，**让宽度的变化不是瞬间完成的，而是在 2s 内逐步完成的。**

这就是 **transition 动画——也就是我们的过渡动画。**  
![在这里插入图片描述][20210512143218284.gif]

## 如何写关键帧动画？ ##

使用 **`@keyframes` 关键字**定义动画。

下面的例子将在动画完成 25％，完成 50％ 以及动画完成 100％ 时更改 `<div>` 元素的背景颜色：：

<!DOCTYPE html>
    <html>
    <head>
    <style> div { width: 100px; height: 100px; background-color: red; animation-name: example; animation-duration: 4s; } @keyframes example { 0% { background-color: red;} 25% { background-color: yellow;} 50% { background-color: blue;} 100% { background-color: green;} } </style>
    </head>
    <body>
    
    <p><b>注释：</b>本例在 Internet Explorer 9 以及更早的版本中无效。</p>
    
    <div></div>
    
    </body>
    </html>

![在这里插入图片描述][20210512144004375.gif]  
我们用百分比来规定变化发生的时间，或用关键词 “from” 和 “to”，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，我们最好定义 0% 和 100% 选择器。

**使用关键字动画，需要在指定动画的元素上定义`animation-name`：动画名称，和`animation-duration`：动画完成一个周期所花费的时间。**

**`animation-name`：动画名称，将声明的动画名称和`@keyframes` 绑定用来描述动画；**

**`animation-iteration-count`：规定动画被播放的次数。默认是 1。**`animation-iteration-count: infinite;`使用值 “infinite” 使动画永远持续下去。

# 18. 实现圣杯布局和双飞翼布局 #

篇幅较大，已另开新的文章： [css经典布局——圣杯布局和双飞翼布局的实现和理解\_前端圆圆-CSDN博客 https://blog.csdn.net/weixin\_45844049/article/details/116753970][css_-CSDN_ https_blog.csdn.net_weixin_45844049_article_details_116753970]

# 19. 浏览器是怎样解析CSS选择器的？ #

CSS选择器的解析是从右向左解析的，为了避免对所有元素进行遍历。若从左向右的匹配，发现不符合规则，需要进行回溯，会损失很多性能。若从右向左匹配，先找到所有的最右节点，对于每一个节点，向上寻找其父节点直到找到根元素或满足条件的匹配规则，则结束这个分支的遍历。两种匹配规则的性能差别很大，是因为从右向左的匹配在第一步就筛选掉了大量的不符合条件的最右节点（叶子节点），而从左向右的匹配规则的性能都浪费在了失败的查找上面。  
而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 的内容一起进行分析建立一棵 Render Tree，最终用来进行绘图。在建立 Render Tree 时（WebKit 中的「Attachment」过程），浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果（Style Rules）来确定生成怎样的 Render Tree。

# 20. 为什么要初始化CSS样式 #

因为浏览器的兼容问题，不同浏览器对一些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

# 21. display:none与visibility：hidden的区别？ #

display：none 不显示对应的元素，在文档布局中不再分配空间（回流+重绘）  
visibility：hidden 隐藏对应元素，在文档布局中仍保留原来的空间（重绘）

# 22. png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？ #

*  png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。
 *  jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。
 *  gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果。
 *  webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

# END. CSS优化、提高性能的方法有哪些？ #

篇幅较大，已另开新的文章：[CSS性能优化总结\_前端圆圆-CSDN博客 https://blog.csdn.net/weixin\_45844049/article/details/117255283][CSS_-CSDN_ https_blog.csdn.net_weixin_45844049_article_details_117255283]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70]: /images/20221022/8081596f9ab746b3b6e00357f3bb9145.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/7a9af65da5c14c3d803bf51c32feff9c.png
[20210330135712490.png]: /images/20221022/3110b63b59294fac8a2650c7e5082417.png
[20210330135758442.png]: /images/20221022/e200efa306f74872bf001b4c5b49e718.png
[20210330140010120.png]: /images/20221022/f703e7edc34c4c3e84848062fa0e7b49.png
[20210330140022132.png]: /images/20221022/fe31ef5859ed46758b37ae609b2e6ff5.png
[_-CSDN_ https_blog.csdn.net_weixin_45844049_article_details_115404672]: https://blog.csdn.net/weixin_45844049/article/details/115404672
[CSS_sticky_-CSDN_ https_blog.csdn.net_weixin_45844049_article_details_116195675]: https://blog.csdn.net/weixin_45844049/article/details/116195675
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 2]: /images/20221022/3592512710ee44a7a2b007b8fc9502c0.png
[-CSDN_ https_blog.csdn.net_weixin_45844049_article_details_116457271]: https://blog.csdn.net/weixin_45844049/article/details/116457271
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 3]: /images/20221022/12bd10af951b45b0a9c21fd8205e946d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 4]: /images/20221022/cbd4932468af4110a84778cd821d98ac.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 5]: /images/20221022/1c2960f3233b4a278697f04c1f5cbed2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 6]: /images/20221022/a3a1e9cba4914f10b80f19f80eef50db.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 7]: /images/20221022/95c45b4afc6b4b758d3221e87d599f79.png
[20210507112501716.png]: /images/20221022/d501afb7c8144dbd85a2f593358750a2.png
[20210507140537899.png]: /images/20221022/236de3c3b6af46dea288ee6b9f02cd6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 8]: /images/20221022/b9b4bb475283484c8516a4083e6ad997.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 9]: /images/20221022/25ba6a13e4d64020a4a5f0eb1792b731.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTg0NDA0OQ_size_16_color_FFFFFF_t_70 10]: /images/20221022/f92bed30e8ee45ffb97827f0c4357098.png
[20210508110733594.png]: /images/20221022/461ba08467544f4a9a84001068fe8b65.png
[20210508111511302.png]: /images/20221022/6f9c75482634496da992b7add988077b.png
[20210508115848776.png]: /images/20221022/23d57f9a4ac04ec8a7682092256be94d.png
[20210512143218284.gif]: /images/20221022/bc5d10ce69334c3a8350317050510162.png
[20210512144004375.gif]: /images/20221022/0fbddffb3da54d14b6968a154290f232.png
[css_-CSDN_ https_blog.csdn.net_weixin_45844049_article_details_116753970]: https://blog.csdn.net/weixin_45844049/article/details/116753970
[CSS_-CSDN_ https_blog.csdn.net_weixin_45844049_article_details_117255283]: https://blog.csdn.net/weixin_45844049/article/details/117255283