参考：https://juejin.cn/post/6905539198107942919

一、CSS基础

1. CSS选择器及其优先级

2、CSS中可继承与不可继承属性有哪些

2.1 无继承性的属性

2.2 有继承性的属性

3、display的属性值及其作用

4、display的block、inline和inline-block的区别

5. 隐藏元素的方法有哪些

6. link和@import的区别

7. transition和animation的区别

8、对盒模型的理解

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

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

11、CSS3中有哪些新特性（10个）

12、常见的图片格式及使用场景

13、对 CSSSprites 的理解

14、margin 和 padding 的使用场景

15、对line-height 的理解及其赋值方式

16、CSS 优化和提高性能的方法有哪些？

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

18. Sass、Less 是什么？为什么要使用他们？

19、::before 和 :after 的双冒号和单冒号有什么区别？

20. display:inline-block 什么时候会显示间隙？

21. 单行、多行文本溢出隐藏

22、对媒体查询的理解？

23. 对 CSS 工程化的理解

29. 如何判断元素是否到达可视区域

30. z-index属性在什么情况下会失效

一、CSS基础

1. CSS选择器及其优先级

选择器	格式	优先级权重
id选择器	#id	100
类选择器	.classname	10
属性选择器	input[type="text"]{ color: red; }	10
伪类选择器	li:last-child 或 a:hover	10
标签选择器	div	1
伪元素选择器	li::after	1
相邻兄弟选择器	div + p ：选择紧跟 <div> 元素的首个 <p> 元素。	0
子选择器	div > p ：选择父元素是 <div> 的所有 <p> 元素。	0
后代选择器	div p ：选择 <div> 元素内的所有 <p> 元素	0
通配符选择器	*	0

（1）选择器的优先级：

标签选择器、伪元素选择器：1
类选择器、伪类选择器、属性选择器：10
id 选择器：100
内联样式：1000

（2）注意事项：

!important声明的样式的优先级最高；
如果优先级相同，则最后出现的样式生效；
继承得到的样式的优先级最低；
通用选择器（*）、子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以它们的权值都为 0 ；
样式表的来源不同时，优先级顺序为：内联样式 > 内部样式 > 外部样式 > 浏览器用户自定义样式 > 浏览器默认样式。

（3）伪类与伪元素选择器的区别

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

例如·：在p标签前后添加了两个伪元素，不在文档生成，只在外部显示可见

<style>p::before {content:"第一章：";}  /* 在p标签前面添加伪元素。内容为：第一章 */p::after {content:"Hot!"; color: red;} /* 在p标签后面添加伪元素。 */
</style>
</head>
<body><p>伪元素</p>
</body>

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

例如：为a标签添加伪类，当鼠标放到a标签，a标签中的字体变红。

  a:hover{color: red; /* 为a标签添加伪类。 */}
</style>
</head>
<body><a href="#">伪类</a>
</body>

3）区别：

伪元素在一个选择器中只能出现一次，并且只能出现在末尾
伪类与伪元素的本质区别就是是否抽象创造了新元素（伪元素抽象创建了新元素）。
伪类的效果可以通过添加实际的类来实现；伪元素的效果可以通过添加实际的元素来实现
它们的本质区别就是是否抽象创造了新元素

（4）伪类选择器

1）链接伪类选择器：hover、active、link、visited。

a:hover表示鼠标移动到链接上；
a:active表示的是选定的链接；
a:link表示的是未访问的链接；
a:visited表示已访问的链接；

2）结构伪类选择器：根据文档结构来选择。

li:first-child：第一个li。
li:last-child：最后一个li。
li:nth-last-child(even/odd/3n/n): 从最后一个开始数。
li:nth-child(n):n代表的就是第几个li，n=4的话就是第四个li。

li:nth-child(odd)：排在奇数的li。第1个、第3个...
li:nth-child(even)：排在偶数的li。第2个、第4个...
li:nth-child(2n)：2n：是指第2、4、6、8等个li。若为3n：是指第3、6、9、12等个li。若为4n：是指第4、8、12、16等个li。

举例：

 <ul><li>静夜思</li><li>李白</li><li>唐</li><li>床前明月光，</li><li>疑是地上霜。</li><li>举头望明月，</li><li>低头思故乡。</li></ul>

<1>将所有奇数列，变为红色：li:nth-child(odd/2n-1)

     li:nth-child(odd){ /*方法一*/color: red;}li:nth-child(2n-1){ /*方法二*/color: red;}

<2>第一个元素颜色不变，其它元素的颜色变为红色：li:nth-child(n+2)

     li:nth-child(n+2){ /*从第2个元素开始变化*/color: red;}

<3>最后一个元素颜色不变，其它元素的颜色变为红色：li:nth-last-child(n+2)

li:nth-last-child(n+2){ /*从倒数第2个元素开始变化*/color: red;}

补充：

li: nth-of-type(n)：父标签包含多个类型的子元素时，选择类型为li的子元素
li:nth-last-of-type(n)：从后向前查找

2、CSS中可继承与不可继承属性有哪些

继承就是指子节点默认使用父节点的样式属性。

2.1 无继承性的属性

1）display：规定元素应该生成的框的类型

2）文本属性：

vertical-align：垂直文本对齐
text-decoration：规定添加到文本的装饰
text-shadow：文本阴影效果
white-space：空白符的处理
unicode-bidi：设置文本的方向

3）盒子模型的属性：width、height、margin、border、padding

4）背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5）定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6）生成内容属性：content、counter-reset、counter-increment

7）轮廓样式属性：outline-style、outline-width、outline-color、outline

8）页面样式属性：size、page-break-before、page-break-after

9）声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

2.2 有继承性的属性

1）字体系列属性

font-family：字体系列
font-weight：字体的粗细
font-size：字体的大小
font-style：字体的风格

2）文本系列属性

text-indent：文本缩进
text-align：文本水平对齐
line-height：行高
word-spacing：单词之间的间距
letter-spacing：中文或者字母之间的间距
text-transform：控制文本大小写（就是uppercase、lowercase、capitalize这三个）
color：文本颜色

3）元素可见性

visibility：控制元素显示隐藏

4）列表布局属性

list-style：列表风格，包括list-style-type、list-style-image等

5）光标属性

cursor：光标显示为何种形态

记忆方法：

不可继承的属性太多了不要背，记住可以继承的属性有哪些就行了。

可以继承的属性很少，只有颜色，文字，字体间距行高对齐方式，和列表的样式可以继承。

所有元素可继承：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。

3、display的属性值及其作用

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

4、display的block、inline和inline-block的区别

（1）block： 会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；

（2）inline： 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；注意：在垂直方向上设置内边距（padding-bottom），在显示上是将元素范围扩大了，但实际上不会对周围元素有任何影响。

（3）inline-block： 将对象设置为inline对象，对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。

对于行内元素和块级元素，其特点如下：

（1）行内元素

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

（2）块级元素

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

5. 隐藏元素的方法有哪些

display: none：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。
visibility: hidden：元素在页面中仍占据空间，但是不会响应绑定的监听事件。visibility: hidden会被子类继承，子类也可以通过显示的设置visibility: visible;来反隐藏。
opacity: 0：将元素的透明度设置为 0，来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。
position: absolute：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏，不会影响布局，能够响应元素绑定的监听事件。
z-index: 负值：来使其他元素遮盖住该元素，以此来实现隐藏。当前dom脱离文档流的前提下，才起作用。被其他元素遮挡部分，无法响应事件。
transform: scale(0,0)：将元素缩放为 0，来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。
clip/clip-path ：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。

总结：

visibility：仍在页面占据空间，不响应事件；动态修改此属性会引起重绘。

opacity：仍在页面占据空间，响应事件；

display：不占据空间，不响应事件；动态改变此属性时会引起重排；

position不占据空间，响应事件；

display:none与visibility:hidden的区别：

1）在渲染树中

display:none 会让元素完全从渲染树中消失，渲染时不会占据任何空间；
visibility:hidden 不会让元素从渲染树中消失，渲染的元素还会占据相应的空间，只是内容不可见。

2）是否是继承属性

display:none 是非继承属性，子孙节点会随着父节点从渲染树消失，通过修改子孙节点的属性也无法显示；
visibility:hidden 是继承属性，子孙节点消失是由于继承了hidden，通过设置visibility:visible可以让子孙节点显示；

3）修改常规文档流中元素的 display 通常会造成文档的重排，但是修改visibility属性只会造成本元素的重绘；

4）如果使用读屏器，设置为display:none的内容不会被读取，设置为visibility:hidden的内容会被读取。

6. link和@import的区别

两者都是外部引用CSS的方式，它们的区别如下：

link除了引用样式文件，还可以引用图片等资源文件；而import是CSS提供的语法规则，只引用样式文件。
link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link支持使用Javascript控制DOM去改变样式；而@import不支持。

7. transition和animation的区别

transition是过渡属性，强调过渡，它的实现需要触发一个事件（比如鼠标移动上去，焦点，点击等）才执行动画。它类似于flash的补间动画，设置一个开始关键帧，一个结束关键帧。
animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。它也类似于flash的补间动画，但是它可以设置多个关键帧（用@keyframe定义）完成动画。

7.1 transition 过渡属性

单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发，可触发的方式有： :hoever :focus :checked 媒体查询触发 JavaScript触发。

（1）属性：属性可以分开写，也可以放在一起写

transition-property：要过渡的CSS属性；
transition-duration：完成过渡要花费的时间；
transition-delay：过渡开始的延迟时间；
transition-timing-function：过渡函数；有以下几种：

liner ：匀速
ease-in：减速
ease-out：加速
ease-in-out：先加速再减速
cubic-bezier：三次贝塞尔曲线

注意：合起来写transition的属性时，第一个time会解析为过渡所需时间transiton-duration，第二个解析为过渡延迟时间transition-delay。

（2）transition局限性

transition的优点在于简单易用，但是它有几个很大的局限。

transition需要事件触发，所以无法在网页加载时自动发生。
transition是一次性的，不能重复发生，除非一再触发。
transition只能定义开始状态和结束状态，不能定义中间状态，也就是说只有两个状态。
一条transition规则，只能定义一个属性的变化，不能涉及多个属性。

CSS Animation就是为了解决这些问题而提出的。

（3）举例

图片的宽高本来都是15px，想要让它1秒的时间内过渡到宽高为450px，通过：hover来触发。

鼠标移入时，宽高会过渡到450px; 移出时，宽高过渡回15px

img{height:15px;width:15px;transition: 1s 1s height ease;/*合在一起*/
}
或者：
img{height：15px;width: 15px;transition-property: height;transition-duration: 1s;transition-delay: 1s;transition-timing-function: ease;/*属性分开写*/
}
img:hover{height: 450px;width: 450px;
}

7.2 animation动画属性

CSS3的animation属性可以像Flash制作动画一样，通过控制关键帧来控制动画的每一步，实现更为复杂的动画效果。ainimation实现动画效果主要由两部分组成：

通过类似Flash动画中的帧来声明一个动画；

在animation属性中调用关键帧声明的动画。

注意：animation属性到目前位置得到了大多数浏览器的支持，但是，需要添加浏览器前缀哦！

（1）animation动画属性

animation-name：指定关键帧动画的名字。none为默认值，将没有任何动画效果，其可以用来覆盖任何动画；
animation-duration：动画播放所需时间（s）。默认值为0，意味着动画周期为0，也就是没有任何动画效果；
animation-timing-function：动画的播放方式与transition-timing-function一样；
animation-delay：在开始执行动画时需要等待的时间（s）；
animation-iteration-count：定义动画的播放次数，默认为1，如果为infinite，则无限次循环播放；
animation-direction：控制动画的播放方向。默认为nomal，每次循环都是向前播放，（0-100），另一个值为alternate，动画播放为偶数次则向前播放，如果为基数词就反方向播放；
animation-play-state：设置动画的播放状态，播放还是暂停。默认为running，播放，paused，暂停；
animation-fill-mode：定义动画开始之前和结束之后发生的操作，默认值为none，动画结束时回到动画没开始时的状态；forwards，动画结束后继续应用最后关键帧的位置，即保存在结束状态；backwards，让动画回到第一帧的状态；both：轮流应用forwards和backwards规则。

（2）关键帧 @keyframes

CSS3的animation制作动画效果主要包括两部分：

用关键帧声明一个动画；（可在关键帧中修改多个属性）

在animation调用关键帧声明的的动画。

@keyframes就是关键帧。这个帧与Flash里的帧类似，一个动画中可以有很多个帧。

一个@keyframes中的样式规则是由多个百分比构成的，可以在这个规则上创建多个百分比，从而达到一种不断变化的效果。另外，@keyframes必须要加webkit前缀。

（3）举例

div的背景色变化，宽度变为300px，通过：hover来触发。

     /*情况一：鼠标放到div上时触发*/div{background: cadetblue;height: 100px;width: 100px;}/*（1）使用animation调用关键帧声明的动画*/div:hover{-webkit-animation: 3s changeColor;animation: 3s changeColor; /*播放所需时间3s，指定关键帧changeColor*/}/*（2）定义关键帧*/@keyframes changeColor{ /*定义关键帧changeColor*/0% {background: cornflowerblue;width: 150px;} /*开始状态 （可在关键帧中修改多个属性）*/50% {background: crimson; width: 200px;} /*中间状态*/100% {background: plum; width: 300px;} /*结束状态*/}@-webkit-keyframes changeColor{ /*定义关键帧changeColor*/0% {background: cornflowerblue;width: 150px;} /*开始状态*/50% {background: crimson; width: 200px;} /*中间状态*/100% {background: plum; width: 300px;} /*结束状态*/}

也可页面加载时，自动触发动画。将animation属性放到div

        /*情况二：若直接将animation属性加到div，进入页面会自动执行动画*/div{background: cadetblue;height: 100px;width: 100px;-webkit-animation: 3s changeColor; animation: 3s changeColor; /*播放所需时间3s，指定关键帧changeColor*/}

浏览器兼容性

Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。

Chrome 和 Safari 需要前缀 -webkit-。

7.3 区别

transition需要触发一个事件才会随着时间改变其CSS属性；
animation在不需要触发任何事件的情况下，也可以显式的随时间变化来改变元素CSS属性，达到一种动画的效果

8、对盒模型的理解

CSS3中的盒模型有以下两种：

标准盒子模型
IE盒子模型

1）盒模型都是由四个部分组成的，分别是margin、border、padding和content。

2）标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同：

标准盒模型的width和height属性的范围只包含了content，
IE盒模型的width和height属性的范围包含了border、padding和content。

3）可以通过修改元素的box-sizing属性来改变元素的盒模型：

box-sizeing: content-box表示标准盒模型（默认值）
box-sizeing: border-box表示IE盒模型（怪异盒模型）

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

translate 是 transform 属性的⼀个值。改变transform或opacity不会触发浏览器重新布局（reflow）或重绘（repaint），只会触发复合（compositions）。

⽽改变绝对定位会触发重新布局，进⽽触发重绘和复合。transform使浏览器为元素创建⼀个 GPU 图层，但改变绝对定位会使⽤到 CPU。因此translate()更⾼效，可以缩短平滑动画的绘制时间。

translate改变位置时，元素依然会占据其原始空间，绝对定位就不会发⽣这种情况。

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

1）问题：在写页面时，有时会需要将<li>这个块状元素横排显示，此时就需要将display属性设置为inline-block，此时问题出现了，在两个<li>元素之间会出现大约8px左右的空白间隙，例：

/*CSS*/
li{display: inline-block;list-style: none;width: 100px;height: 100px;}.l1{ background: pink; }.l2{ background: gray; }.l3{ background: black;}<!-- html -->
<ul><li class="l1"></li><li class="l2"></li><li class="l3"></li>
</ul>

2）原因：浏览器会把inline内联元素间的空白字符（空格、换行、Tab等）渲染成一个空格。为了美观，通常是一个<li>放在一行，这导致<li>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。

3）解决办法：

1）为<li>设置float:left。

不足：有些容器是不能设置浮动，如左右切换的焦点图等。

2）将所有<li>写在同一行。

不足：代码不美观。

3）将<ul>内的字符尺寸直接设为0，即font-size:0。

不足：<ul>中的其他字符尺寸也被设为0，需要额外重新设定其他字符尺寸，且在Safari浏览器依然会出现空白间隔。

4）消除<ul>的字符间隔letter-spacing:-8px，

不足：这也设置了<li>内的字符间隔，因此需要将<li>内的字符间隔设为默认

letter-spacing:normal，即

.wrap ul{letter-spacing: -5px;}  // ul.wrap ul li{letter-spacing: normal;} //记得设置li内字符间隔

11、CSS3中有哪些新特性（10个）

CSS3的选择器
边框圆角
多列布局（multi-column layout）
@Font-face 特性，引入任意字体样式
为文字和盒子添加阴影：text-shadow、box-shadow
CSS3 的线性渐变效果
旋转,缩放,定位,倾斜
在CSS3中唯一引入的伪元素是 ::selection
CSS3 @keyframes 规则，可以自己创建一些动画等
多背景（添加多个背景）

（1）CSS3的选择器

E:last-child 匹配父元素的最后一个子元素E。
E:nth-child(n)匹配父元素的第n个子元素E。
E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。

例：

（2）边框圆角

border-radius: 8px;

（3）多列布局（multi-column layout）

column-count、column-width、column-gap、column-rule

兼容性不好，还不够成熟

/*CSS*/
.mul-col{column-count: 3;  /*列数*/column-gap: 10px;  /*列之间的间隙*/column-rule: 2px solid green;  /*列之间的间隔线*/
}
/*HTML*/
<div class="mul-col"><div style="background: grey;"><h3>新手上路</h3></div><div style="background: palevioletred;"><h3>付款方式</h3></div><div style="background: cornflowerblue;"><h3>淘宝特色</h3></div>
</div>

（4）@Font-face 特性

Font-face 可以用来引入任意字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face { font-family: BorderWeb; src:url(BORDERW0.eot); }
.border { FONT-SIZE: 35px; COLOR: black; FONT-FAMILY: "BorderWeb" }

（5）为文字和盒子添加阴影：text-shadow、box-shadow

语法：text-shadow / box-shadow: h-shadow v-shadow blur color;

h-shadow表示水平阴影的位置，允许负值，该值必需。
v-shadow表示垂直阴影的位置，允许负值，该值必需。
blur表示阴影的距离，color表示阴影的颜色，这两个值是可选的。

例：

/*CSS*/
.class1{ text-shadow:5px 2px 6px rgba(64, 64, 64, 0.5); box-shadow: 5px 2px 6px rgba(64, 64, 64, 0.6);}//HTML
<div class="class1"><h3>新手上路</h3>
</div>

（6）CSS3 的渐变效果

基本语法：background-image:-webkit-gradient(type,x1 y1, x2 y2, from(开始颜色值),to(结束颜色值));

参数type（类型）为 linear（线性渐变）
x1 y1, x2 y2是颜色渐变体的两个点的坐标，从(x1,y1)到(x2,y2)

例：

.class1{ background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E));}
<div class="class1"></div>

（7）旋转,缩放,定位,倾斜

transform:

旋转 rotate(90deg) ：沿Z轴方向顺时针旋转90度
伸缩 scale(0.85,0.90) ：水平方向变成原来的0.85倍，垂直方向变为原来的0.9倍
平移 translate(45px,30px) ：向右移动45像素，向下移动30像素的距离
倾斜 skew(30deg,10deg)：沿X轴倾斜30度，沿Y轴倾斜10度

（8）在CSS3中唯一引入的伪元素是 ::selection

（9）CSS3 @keyframes 规则，可以自己创建一些动画等

例：鼠标放到div上，触发动画animations，维持2s（从0%变化到100%的状态）

.main:hover{animation: animations 2s ease 0s;}@keyframes animations {0%{left: 10px;opacity: 1;}50%,70%{left: 50%;opacity: .7;margin-left:-150px;}100%{left: 100%;opacity: 0;margin-left:-300px;}}<div class="main"></div>

（10）多背景（添加多个背景）

 background-image: url("images/overcast.png"),url("images/rainbow.png"), url("images/overcast.png");

12、常见的图片格式及使用场景

（1）BMP，是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常是较大的文件。

（2）GIF是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但是GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。

（3）JPEG是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导致图片文件较GIF更大。

（4）PNG-8是无损的、使用索引色的点阵图。PNG是一种比较新的图片格式，PNG-8是非常好的GIF格式替代者，在可能的情况下，应该尽可能的使用PNG-8而不是GIF，因为在相同的图片效果下，PNG-8具有更小的文件体积。除此之外，PNG-8还支持透明度的调节，而GIF并不支持。除非需要动画的支持，否则没有理由使用GIF而不是PNG-8。

（5）PNG-24是无损的、使用直接色的点阵图。PNG-24的优点在于它压缩了图片的数据，使得同样效果的图片，PNG-24格式的文件大小要比BMP小得多。当然，PNG24的图片还是要比JPEG、GIF、PNG-8大得多。

（6）SVG是无损的矢量图。SVG是矢量图意味着SVG图片由直线和曲线以及绘制它们的方法组成。当放大SVG图片时，看到的还是线和曲线，而不会出现像素点。SVG图片在放大时，不会失真，所以它适合用来绘制Logo、Icon等。

（7）WebP是谷歌开发的一种新图片格式，WebP是同时支持有损和无损压缩的、使用直接色的点阵图。从名字就可以看出来它是为Web而生的，就是说相同质量的图片，WebP具有更小的文件体积。现在网站上充满了大量的图片，如果能够降低每一个图片的文件大小，那么将大大减少浏览器和服务器之间的数据传输量，进而降低访问延迟，提升访问体验。目前只有Chrome浏览器和Opera浏览器支持WebP格式，兼容性不太好。

在无损压缩的情况下，相同质量的WebP图片，文件大小要比PNG小26%；
在有损压缩的情况下，具有相同图片精度的WebP图片，文件大小要比JPEG小25%~34%；
WebP图片格式支持图片透明度，一个无损压缩的WebP图片，如果要支持透明度只需要22%的格外文件大小。

13、对 CSSSprites 的理解

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

1）优点：

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

2）缺点：

在图片合并时，要把多张图片有序的、合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景。在宽屏及高分辨率下的自适应页面，如果背景不够宽，很容易出现背景断裂；
CSSSprites在开发的时候相对来说有点麻烦，需要借助photoshop或其他工具来对每个背景单元测量其准确的位置。
维护方面：CSS Sprites在维护的时候比较麻烦，页面背景有少许改动时，就要改这张合并的图片，无需改的地方尽量不要动，这样避免改动更多的CSS，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动CSS。

14、margin 和 padding 的使用场景

margin：需要在border外侧添加空白，且空白处不需要背景（色）；
padding：需要在border内测添加空白，且空白处需要背景（色）。

15、对line-height 的理解及其赋值方式

（1）line-height的概念：

line-height 指一行文本的高度，包含了字间距，实际上是下一行基线到上一行基线距离；
如果一个标签没有定义 height 属性，那么其最终表现的高度由 line-height 决定，而不是容器内的文本内容；
把 line-height 值设置为 height 一样大小的值可以实现单行文字的垂直居中；

（2）line-height 的赋值方式：

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

16、CSS 优化和提高性能的方法有哪些？

加载性能：

（1）css压缩：将写好的css进行打包压缩，可以减小文件体积。

（2）css单一样式：当需要下边距和左边距的时候，很多时候会选择使用 margin:top 0 bottom 0；但margin-bottom:bottom;margin-left:left;执行效率会更高。

（3）减少使用@import，建议使用link，因为link在页面加载时一起加载，@import是等待页面加载完成之后再进行加载。

选择器性能：

（1）关键选择器（key selector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器时，浏览器会遍历所有子元素来确定是否是指定的元素等等；

补充：

从右向左的规则在第一步时就筛选掉不满足条件的叶子节点，省去了很多不必要的查询；
从左向右的规则大部分性能都浪费在了不满足条件的查找上；
从右向左的匹配规则效率比从左向右的匹配规则效率更高。

（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。

（3）避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。

（4）尽量少的使用标签进行选择，而是用class。

（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。

（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。

渲染性能：

（1）慎重使用高性能属性：浮动、定位。

（2）尽量减少页面重排、重绘。

（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。

（4）属性值为0时，不加单位。

（5）属性值为浮动小数0.**，可以省略小数点之前的0。

（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。

（7）不使用@import前缀，它会影响css的加载速度。

（8）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。

（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。

（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。web fonts通常体积庞大，而且一些浏览器在下载web fonts时会阻塞页面渲染损伤性能。

可维护性、健壮性：

（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。

（2）样式与内容分离：将css代码定义到外部css中。

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

1）预处理器

用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。
CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题
目前最主流的 CSS 预处理器：Sass、LESS、scss（项目用到了）、Stylus 、Turbine、Swithch css。

优点：语言级逻辑处理，动态特性，改善项目结构
缺点：采用特殊语法，框架耦合度高，复杂度高

2）后处理器， 如： postCss，通常是在完成的样式表中根据css规范处理css，让其更加有效。目前最常做的是给css属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。（是对 CSS 进行处理，并最终生成 CSS 的预处理器，它属于广义上的 CSS 预处理器。）

优点：使用 CSS 语法，容易进行模块化，贴近 CSS 的未来标准
缺点：逻辑处理能力有限.

3）使用原因：

结构清晰， 便于扩展
可以很方便的屏蔽浏览器私有语法的差异
可以轻松实现多重继承
完美的兼容了CSS代码，可以应用到老项目中

补充：

Js中可以自定义变量，而CSS仅仅是一个标记语言，不是编程语言，因此不可以自定义变量，不可以引用等。CSS有具体以下几个缺点：

语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。这就导致了我们在工作中无端增加了许多工作量。

而使用CSS预处理器，提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。

18. Sass、Less 是什么？为什么要使用他们？

他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。
例如 Less 是一种动态样式语言，将 CSS 赋予了动态语言的特性，如变量，继承，运算，函数；
LESS 既可以在客户端上运行 (支持 IE 6+, Webkit, Firefox)，也可以在服务端运行 (借助 Node.js)。
less是在现有的CSS语法上，添加了很多额外的功能。就语法规则而言，LESS和Sass一样，都是使用CSS的标准语法，只是LESS的源文件的扩展名是“.less”。

18.1 为什么要使用它们？

结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理，减少无意义的机械劳动。
可以轻松实现多重继承。完全兼容 CSS 代码，可以方便地应用到老项目中。LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。

18.2 Sass和Less的比较

不同点：

Less环境较Sass简单；

Less使用较Sass简单：LESS 并没有裁剪 CSS 原有的特性，而是在现有 CSS 语法的基础上，为 CSS 加入程序式语言的特性；

从功能出发，Sass较Less略强大一些：sass有变量和作用域；sass有函数的概念；有数据结构；有进程控制（if、for、extend等）；

Less与Sass处理机制不一样：Less是通过客户端处理的，Sass是通过服务端处理，相比较之下Less解析会慢一点；

关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

相同点：

1、混入(Mixins)——class中的class；
2、参数混入——class中可以传递参数，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

18.3 sass和scss

现在的Sass已经有了两套语法规则：

一个依旧是用缩进作为分隔符来区分代码块的；
另一套规则和CSS一样采用了大括号（｛｝）作为分隔符，又名SCSS。

SCSS 是 Sass 3 引入新的语法，完全兼容sass之前的功能，又有了些新增能力。

唯一不同的是，sass是靠缩进表示嵌套关系，scss是花括号。

sass

//sass 太费眼了
.fatherwidth:100px;.sonwidth:50px;

scss

//scss 适合我这种眼瘸手残患者
.father{width:100px;.son{width:50px;}
}

（1）使用$符号去声明一个变量

（2）嵌套

可以使用&引用父元素。比如a:hover伪类，可以写成：

a {&:hover { color:red; }}

（3）继承 @extend

SASS允许一个选择器，继承另一个选择器。使用@extend

（4）混入 @mixin 、@include

Mixin是可以重用的代码块。使用@mixin命令，定义一个代码块；使用@include命令，调用这个mixin。

（5）引入外部文件@import

更多关于scss和sass，参考https://blog.csdn.net/qq_40323256/article/details/109138173

19、::before 和 ::after 的双冒号和单冒号有什么区别？

（1）冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

（2）::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。

注意： :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before、::after。

20. display:inline-block 什么时候会显示间隙？

有空格时会有间隙，可以删除空格解决；
margin正值时，可以让margin使用负值解决；
使用font-size时，可通过设置font-size:0、letter-spacing、word-spacing解决；

21. 单行、多行文本溢出隐藏

单行文本溢出

// 3行都要写
overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;      // 溢出用省略号显示
white-space: nowrap;         // 规定段落中的文本不进行换行。都在一行显式

多行文本溢出

// 5行都要写
overflow: hidden;            // 溢出隐藏
text-overflow: ellipsis;     // 溢出用省略号显示
display:-webkit-box;         // 作为弹性伸缩盒子模型显示。
-webkit-box-orient:vertical; // 设置伸缩盒子的子元素排列方式：从上到下垂直排列
-webkit-line-clamp:3;        // 显示的行数

注意：由于上面的三个属性都是 CSS3 的属性，没有浏览器可以兼容，所以要在前面加一个-webkit- 来兼容一部分浏览器。

22、对媒体查询的理解？

媒体查询适合web⽹⻚应对不同型号的设备⽽做出对应的响应适配（比如根据页面不同的宽度、高度等，做出不同的响应）。

媒体查询包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。
如果媒体查询中指定的媒体类型匹配展示⽂档所使⽤的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true。
那么媒体查询内的样式将会⽣效。

简单来说，使用 @media 查询，可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

<!-- link元素中的CSS媒体查询 -->
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<!-- 样式表中的CSS媒体查询 -->
<style>
@media (max-width: 600px) { //对宽度大于600px的页面应用样式.facet_sidebar { display: none; }
}
</style>
复制代码

23. 对 CSS 工程化的理解

CSS 工程化是为了解决以下问题：

宏观设计：CSS 代码如何组织、如何拆分、模块结构怎样设计？
编码优化：怎样写出更好的 CSS？
构建：如何处理我的 CSS，才能让它的打包结果最优？
可维护性：代码写完了，如何最小化它后续的变更成本？如何确保任何一个同事都能轻松接手？

以下三个方向都是时下比较流行的、普适性非常好的 CSS 工程化实践：

预处理器：Less、 Sass 等；
重要的工程化插件：后处理器PostCss；
Webpack loader 等。

基于这三个方向，可以衍生出一些具有典型意义的子问题，这里我们逐个来看：

（1）预处理器：为什么要用预处理器？它的出现是为了解决什么问题？

预处理器，其实就是 CSS 世界的“轮子”。预处理器支持我们写一种类似 CSS、但实际并不是 CSS 的语言，然后把它编译成 CSS 代码： 为什么写 CSS 代码写得好好的，偏偏要转去写“类 CSS”呢？

宏观设计上：我们希望能优化 CSS 文件的目录结构，对现有的 CSS 文件实现复用；
编码优化上：我们希望能写出结构清晰、简明易懂的 CSS，需要它具有一目了然的嵌套层级关系，而不是无差别的一铺到底写法；我们希望它具有变量特征、计算能力、循环能力等更强的可编程性，这样我们可以少写一些无用的代码；
可维护性上：更强的可编程性意味着更优质的代码结构，实现复用意味着更简单的目录结构和更强的拓展能力，这两点如果能做到，自然会带来更强的可维护性。

这三点是传统 CSS 所做不到的，也正是预处理器所解决掉的问题。预处理器普遍会具备这样的特性：

嵌套代码的能力，通过嵌套来反映不同 css 属性之间的层级关系；
支持定义 css 变量；
提供计算函数；
允许对代码片段进行 extend 和 mixin；
支持循环语句的使用；
支持将 CSS 文件模块化，实现复用。

（2）后处理器PostCss：PostCss 是如何工作的？我们在什么场景下会使用 PostCss？

它和预处理器的不同就在于，预处理器处理的是类CSS，而 PostCss 处理的就是 CSS 本身。
PostCss 可以编译尚未被浏览器广泛支持的先进的 CSS 语法，还可以自动为一些需要额外兼容的语法增加前缀。
更强的是，由于 PostCss 有着强大的插件机制，支持各种各样的扩展，极大地强化了 CSS 的能力。

PostCss 在业务中的使用场景非常多：

提高 CSS 代码的可读性：PostCss 其实可以做类似预处理器能做的工作；
当我们的 CSS 代码需要适配低版本浏览器时，PostCss 的 Autoprefixer 插件可以帮助我们自动增加浏览器前缀；
允许我们编写面向未来的 CSS：PostCss 能够帮助我们编译 CSS next 代码；

（3）Webpack 能处理 CSS 吗？如何实现？

1）Webpack 能处理 CSS 吗：

Webpack 在裸奔的状态下，是不能处理 CSS 的，Webpack 本身是一个面向 JavaScript 且只能处理 JavaScript 代码的模块化打包工具；
Webpack 在 loader 的辅助下，是可以处理 CSS 的。

2）如何用 Webpack 实现对 CSS 的处理：

Webpack 中操作 CSS 需要使用的两个关键的 loader：css-loader 和 style-loader
还需要了解每个 loader 都做了什么事情：
- css-loader：导入 CSS 模块，对 CSS 代码进行编译处理；
- style-loader：创建style标签，把 CSS 内容写入标签。

在实际使用中，css-loader 的执行顺序一定要安排在 style-loader 的前面。因为只有完成了编译过程，才可以对 css 代码进行插入；若提前插入了未编译的代码，那么 webpack 是无法理解这坨东西的，它会无情报错。

3）谈谈你对webpack的看法

webpack是一个模块打包工具，可以使用它管理项目中的模块依赖，并编译输出模块所需的静态文件。
它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件（图片，字体）等，让开发更高效。
对于不同类型的依赖，webpack有对应的模块加载器，而且会分析模块间的依赖关系，最后合并生成优化的静态资源。

4）webpack的基本功能和工作原理？

代码转换：TypeScript 编译成 JavaScript、SCSS 编译成 CSS 等等
文件优化：压缩 JavaScript、CSS、HTML 代码，压缩合并图片等
代码分割：提取多个页面的公共代码、提取首屏不需要执行部分的代码让其异步加载
模块合并：在采用模块化的项目有很多模块和文件，需要构建功能把模块分类合并成一个文件
自动刷新：监听本地源代码的变化，自动构建，刷新浏览器
代码校验：在代码被提交到仓库前需要检测代码是否符合规范，以及单元测试是否通过
自动发布：更新完代码后，自动构建出线上发布代码并传输给发布系统。

5）webpack构建过程

从entry里配置的module开始递归解析entry依赖的所有module
每找到一个module，就会根据配置的loader去找对应的转换规则
对module进行转换后，再解析出当前module依赖的module
这些模块会以entry为单位分组，一个entry和其所有依赖的module被分到一个组Chunk
最后webpack会把所有Chunk转换成文件输出
在整个流程中webpack会在恰当的时机执行plugin里定义的逻辑

29. 如何判断元素是否到达可视区域

以图片显示为例：

window.innerHeight 是浏览器可视区的高度；
document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动过的距离；
imgs.offsetTop 是imgs元素顶部距离文档顶部的高度（包括滚动条的距离）；
内容到达显示区域，需满足：

img.offsetTop < window.innerHeight + document.body.scrollTop;

即img顶部距离文档顶部的高度小于（可视区的高度+滚动过的高度）

30. z-index属性在什么情况下会失效

通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。z-index元素的position属性需要是relative，absolute或是fixed。

z-index属性在下列情况下会失效：

父元素position为relative时，子元素的z-index失效。解决：父元素position改为absolute或static；
元素没有设置position属性为非static属性。解决：设置该元素的position属性为relative，absolute或是fixed中的一种；
元素在设置z-index的同时还设置了float浮动。解决：float去除，改为display：inline-block；

34、CSS高频前端面试题之CSS基础相关推荐

面试题：高频前端面试题之CSS篇
目录一.CSS基础 1. CSS选择器及其优先级 2. CSS中可继承与不可继承属性有哪些 3. display的属性值及其作用 4. display的block.inline和inline-blo ...
前端面试题之CSS篇
前端面试题之CSS篇一.CSS基础 1. CSS选择器及其优先级 2. CSS中可继承与不可继承属性有哪些 3. display的属性值及其作用 4. display的block.inline和in ...
与歌谣通关前端面试题【CSS篇汇总目录】
我是歌谣放弃很容易但坚持一定很酷欢迎关注公众号小歌谣一起讨论前后端知识 CSS汇总 [CSS] [css] 圣杯布局和双飞翼布局的理解和区别,并用代码实现 [css] CSS3有哪些新增的特性 ...
前端面试题汇总CSS篇
转载自:https://www.cnblogs.com/zhangshuda/p/8465043.html 前端面试题 ----css篇 1.css盒模型有哪些及区别content-box borde ...
前端面试题HTML+CSS
1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所访问.内容能被 ...
字节跳动前端面试题：CSS 基础
实战教程全栈技术精选好文注意:每道题前面出现的 (xx) 数字代表这道题出现的频次,此 CSS 基础是基于 30+ 篇前端面经整理出的问题和对应的回答.参考链接等.文章内容为拿到 Offer ...
前端面试题----html css
一阶段面试题集锦 1. rem em vw vw 百分比区别相同点: rem,em,vw,vh,vw属于前端开发除了px单位之外的另外几种单位取值:但是具体含义存在区别不同点: px:是像素单位 ...
2023高频前端面试题总结（附答案）
html与css 1.<img>的title与alt有什么区别 -title是提示文本,鼠标放在图片上提示的文字 -alt 是图片显示不出来时的文字替代,能显示出来就不用替换 2.labe ...
2023高频前端面试题（含答案）
一.简单页面 1.CSS选择器样式优先级 2.CSS实现三列布局(左右固定宽度,中间自适应) (1)CSS浮动第一个float:left,第二个float:right,第三个设置margin-lef ...

34、CSS高频前端面试题之CSS基础

一、CSS基础

1. CSS选择器及其优先级

2、CSS中可继承与不可继承属性有哪些

2.1 无继承性的属性

2.2 有继承性的属性

3、display的属性值及其作用

4、display的block、inline和inline-block的区别

5. 隐藏元素的方法有哪些

6. link和@import的区别

7. transition和animation的区别

7.1 transition 过渡属性

7.2 animation动画属性

7.3 区别

8、对盒模型的理解

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

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

11、CSS3中有哪些新特性（10个）

12、常见的图片格式及使用场景

13、对 CSSSprites 的理解

14、margin 和 padding 的使用场景

15、对line-height 的理解及其赋值方式

16、CSS 优化和提高性能的方法有哪些？

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

18. Sass、Less 是什么？为什么要使用他们？

18.1 为什么要使用它们？

18.2 Sass和Less的比较

18.3 sass和scss

19、::before 和 ::after 的双冒号和单冒号有什么区别？

20. display:inline-block 什么时候会显示间隙？

21. 单行、多行文本溢出隐藏

22、对媒体查询的理解？

23. 对 CSS 工程化的理解

29. 如何判断元素是否到达可视区域

30. z-index属性在什么情况下会失效

34、CSS高频前端面试题之CSS基础相关推荐

最新文章

热门文章