【前端高频面试题--CSS下篇】

🚀 作者 ：“码上有前”
🚀 文章简介 ：高频前端面试题–CSS篇
🚀 欢迎小伙伴们 点赞👍、收藏⭐、留言💬

往期精彩内容

【前端高频面试题–HTML篇】
【前端高频面试题–CSS上篇】
【前端高频面试题–CSS下篇】
【前端高频面试题–JS上篇】
【前端高频面试题–JS下篇】
【前端高频面试题–ES6篇】
【前端高频面试题–ES7-ES11】
【前端–异步编程】
【前端高频面试题–TypeScript篇】

【前端高频面试题–git篇】
【前端高频面试题–微信小程序篇】

【前端高频面试题–Vue基础篇】
【前端高频面试题–虚拟DOM篇】
【前端高频面试题–Vue3.0篇】
【前端高频面试题–Vuex上篇】
【前端高频面试题–Vuex下篇】
【前端高频面试题–Vue生命周期篇】
【前端高频面试题–Vue组件通信篇】
【前端高频面试题–Vue路由篇】

【前端-Vue3创建一个新项目】
【前端大屏自适应缩放】
【前端Vue3 + TS项目开发一般流程】

☆☆☆

1.选择器

选择器	格式	优先级权重
id选择器	#id	100
类选择器	.class	10
属性选择器	a[ref=‘eee’]	10
伪类选择器	li:first-child	10
标签选择器	p	1
伪元素选择器	li:after	1
相邻兄弟选择器	h1+p	0
子选择器	ul>li	0
后代选择器	li a	0
通配符选择器	*	0

样式优先级

1. ！important声明的优先级最大
2. 内联样式>内部样式>外部样式>浏览器用户自定义样式>浏览器默认样式
3. 优先级相同 的，后面出现的样式生效
4. 选择器中通用选择器(*),子选择器（>），相邻同胞(+)的权值为0
5. 继承的样式的优先级最低

隐藏元素的方法

方法	介绍
display: none	渲染树不会包含该渲染对象，该元素不会在页面中，也不会响应绑定的监听事件。
visibility: hidden	元素在页面中仍占据空间，但是不会响应绑定的监听事件。
opacity: 0	将元素的透明度设置为 0，。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute	通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏
z-index: 负值	其他元素遮盖住该元素，实现隐藏。
clip/clip-path	使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
transform: scale(0,0)	将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

2.CSS3中有哪些新特性

1. 新增各种CSS选择器 （: not(.input)：所有 class 不是“input”的节点）
2. 圆角 （border-radius:8px）
3. 多列布局 （multi-column layout）
4. 阴影和反射 （Shadoweflect）
5. 文字特效 （text-shadow）
6. 文字渲染 （Text-decoration）
7. 线性渐变 （gradient）
8. 旋转 （transform）增加了旋转,缩放,定位,倾斜,动画,多背景

3.CSS 优化和提高性能的方法有哪些？

加载性能

css压缩：将写好的css进行打包压缩，可以减小文件体积。
css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;执行效率会更高。
减少使用@import，建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。

选择器性能

（1）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。（这样样式系统就不会浪费时间去匹配它们了）。
（2）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。
（3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。
（4）尽量少的去对标签进行选择，而是用class。
（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。

渲染性能：

（1）慎重使用高性能属性：浮动、定位。
（2）尽量减少页面重排、重绘。
（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
（4）属性值为0时，不加单位。
（5）属性值为浮动小数0.，可以省略小数点之前的0。
（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。
（7）不使用@import前缀，它会影响css的加载速度。
（8）选择器优化嵌套，尽量避免层级过深。
（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。
（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。
（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

可维护性、健壮性：

（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。
（2）样式与内容分离：将css代码定义到外部css中。

4. display、float、position的关系

（1）首先判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。
（2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被设置为table或者block，具体转换需要看初始转换值。
（3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display的值则按上面的规则转换。注意，如果position的值为relative并且float属性的值存在，则relative相对于浮动后的最终位置定位。
（4）如果float的值为none，则判断元素是否为根元素，如果是根元素则display属性按照上面的规则转换，如果不是，则保持指定的display属性值不变。
（5）总的来说，可以把它看作是一个类似优先级的机制，"position:absolute"和"position:fixed"优先级最高，有它存在的时候，浮动不起作用，'display’的值也需要调整；
(6)其次，元素的’float’特性的值不是"none"的时候或者它是根元素的时候，调整’display’的值；
(7)最后，非根元素，并且非浮动元素，并且非绝对定位的元素，'display’特性值同设置值

5.对BFC的理解，如何创建BFC

先来看两个相关的概念：
Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个Box就是我们所说的盒模型。
Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。
块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。
通俗来讲：BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

创建BFC的条件

根元素：body；
浮动：float 除 none 以外的值；
绝对定位：position (absolute、fixed)；
display 值为：inline-block、table-cell、table-caption、flex等；
overflow 值为：hidden、auto、scroll；

BFC的特点

垂直方向上，自上而下排列，和文档流的排列方式一致。在BFC中上下相邻的两个容器的margin会重叠
计算BFC的高度时，需要计算浮动元素的高度
BFC区域不会与浮动的容器发生重叠
BFC是独立的容器，容器内部元素不会影响外部元素
每个元素的左margin值和容器的左border相接触

BFC的作用

解决margin的重叠问题：由于BFC是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个BFC，就解决了margin重叠的问题。
解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为0。解决这个问题，只需要把父元素变成一个BFC。常用的办法是给父元素设置overflow:hidden。
创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

6.为什么需要清除浮动？清除浮动的方式

浮动的定义： 非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。 此时，内容会溢出到容器外面而影响布局。这种现象被称为浮动（溢出）。

浮动的工作原理

浮动元素脱离文档流，不占据空间（引起“高度塌陷”现象）
浮动元素碰到包含它的边框或者其他浮动元素的边框停留
浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。
浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。
此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。
当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。

浮动元素引起的问题？

父元素的高度无法被撑开，影响与父元素同级的元素
与浮动元素同级的非浮动元素会跟随其后
若浮动的元素不是第一个元素，则该元素之前的元素也要浮动，否则会影响页面的显示结构

清除浮动的方式如下

给父级div定义height属性
最后一个浮动元素之后添加一个空的div标签，并添加clear:both样式
包含浮动元素的父级标签添加overflow:hidden或者overflow:auto
使用 :after 伪元素。由于IE6-7不支持 :after，使用 zoom:1 触发 hasLayout**

7.对Flex布局的理解及其使用场景

Flex是FlexibleBox的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。行内元素也可以使用Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目默认沿水平主轴排列。
以下6个属性设置在容器上：

• flex-direction属性决定主轴的方向（即项目的排列方向）
• flex-wrap属性定义，如果一条轴线排不下，如何换行。
• flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
• justify-content属性定义了项目在主轴上的对齐方式
• align-items属性定义项目在交叉轴上如何对齐。
• align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

以下6个属性设置在项目上：

• order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
• flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
• flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
• flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex属性是flex-grow，flex-shrink和flex-basis的简写，默认值为0 1 auto。align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

简单来说

flex布局是CSS3新增的一种布局方式，可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。一个容器默认有两条轴：一个是水平的主轴，一个是与主轴垂直的交叉轴。可以使用flex-direction来指定主轴的方向。可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还可以使用flex-wrap来规定当一行排列不下时的换行方式。对于容器中的项目，可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例，还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。

☆☆

8.display属性值及其作用

属性值	作用
none	元素不显示，并从文档流中移除
block	块类型。默认宽度为父元素宽度，可设置宽高，换行显示。
inline	行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。
inline-block	默认宽度为内容宽度，可以设置宽高，同行显示。
list-item	像块类型元素一样显示，并添加样式列表标记
table	此元素会作为块级表格来显示。
inherit	规定应该从父元素继承display属性的值

9.伪元素和伪类的区别和作用？

伪元素

在内容元素的前后插入额外的元素或样式，但是这些元素实际上并不在文档中生成。它们只在外部显示可见，但不会在文档的源代码中找到它们，因此，称为“伪”元素。例如：

• p::before {content:“第一章：”;}
• p::after {content:“Hot!”;}
• p::first-line {background:red;}
• p::first-letter {font-size:30px;}

伪类

将特殊的效果添加到特定选择器上。它是已有元素上添加类别的，不会产生新的元素。例如：

• a:hover {color: #FF00FF}
• p:first-child {color: red}

总结： 伪类是通过在元素选择器上加⼊伪类改变元素状态，⽽伪元素通过对元素的操作进⾏对元素的改变。

行内元素

• 设置宽高无效
• 可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；
• 不会自动换行；

块级元素

• 可以设置宽高；
• 设置margin和padding都有效；
• 可以自动换行；
• 多个块状，默认排列从上到下。

10.对 CSSSprites 的理解

CSSSprites（精灵图），将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的 background-image，background-repeat，background-position属性的组合进行背景定位。

优点

利用CSS Sprites能很好地减少网页的http请求，从而大大提高了页面的性能，这是CSS Sprites最大的优点；CSS Sprites能减少图片的字节，把3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

缺点

在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
CSSSprites在开发的时候相对来说有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。

维护方面

CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

11. CSS预处理器/后处理器是什么？为什么要使用它们？

预处理器

如：less，sass，stylus，用来预编译sass或者less，增加了css代码的复用性。层级，mixin， 变量，循环， 函数等对编写以及开发UI组件都极为方便。

后处理器

如： postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。
css预处理器为css增加一些编程特性，无需考虑浏览器的兼容问题，可以在CSS中使用变量，简单的逻辑程序，函数等在编程语言中的一些基本的性能，可以让css更加的简洁，增加适应性以及可读性，可维护性等。

12. 对媒体查询的理解？

媒体查询由⼀个可选的媒体类型和零个或多个使⽤媒体功能的限制了样式表范围的表达式组成，例如宽度、⾼度和颜⾊。媒体查询，添加⾃CSS3，允许内容的呈现针对⼀个特定范围的输出设备⽽进⾏裁剪，⽽不必改变内容本身，适合web⽹⻚应对不同型号的设备⽽做出对应的响应适配。

13.CSS中可继承与不可继承的属性有哪些？

有继承的属性

• 字体系列属性：
  • font-family：字体系列
  • font-weight：字体的粗细
  • font-size：字体的大小
  • font-style：字体的风格
• 文本系列属性
  • text-indent：文本缩进
  • text-align：文本水平对齐
  • line-height：行高
  • word-spacing：单词间距
  • letter-spacing：中文字母间距
  • text-transform：控制文本大小写
  • color：文本颜色
• 元素可见性
  • visibility：控制元素显示隐藏
• 列表布局属性
  • list-style：列表风格，包括list-style-type、list-style-image等
• 光标属性
  • cursor：光标显示为何种形态

无继承的属性

• display属性
• 文本属性
  • vertical-align：垂直文本对齐
  • text-decoration：规定添加到文本的装饰
  • text-shadow：文本阴影效果
  • white-space：空白符的处理
  • unicode-bidi：设置文本的方向
• 盒模型属性：width、height、margin、border、padding
• 背景属性
• 定位属性：float，clear，position，top
• 生成内容属性: content，content-reset
• 轮廓样式属性：outline-style等
• 页面样式属性：size、page-break-before
• 声音样式属性：pause-before、pause-after、pause、

14.为什么有时候⽤translate来改变位置⽽不是定位？

translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。 ⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。 因此translate()更⾼效，可以缩短平滑动画的绘制时间。 ⽽translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

15.li 与 li 之间有看不见的空白间隔是什么原因引起的？如何解决？

浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个

• 放在一行，这导致
• 换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。
  解决办法：
  （1）为
• 设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。
  （2）将所有
• 写在同一行。不足：代码不美观。
  （3）将
  • 内的字符尺寸直接设为0，即font-size:0。不足：
    • 中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。
      （4）消除
      • 的字符间隔letter-spacing:-8px，不足：这也设置了
      • 内的字符间隔，因此需要将
      • 内的字符间隔设为默认letter-spacing:normal。

• 16.对line-height 的理解及其赋值方式

  line-height的概念

  • line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；

  如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定；

  • 一个容器没有设置高度，那么撑开容器高度的是 line-height，而不是容器内的文本内容；
  • 把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；
  • line-height 和 height 都能撑开一个高度；

  line-height 的赋值方式：

  带单位：px 是固定值，而 em 会参考父元素 font-size 值计算自身的行高
  纯数字：会把比例传递给后代。例如，父级行高为 1.5，子元素字体为 18px，则子元素行高为 1.5 * 18 = 27px
  百分比：将计算后的值传递给后代