前端八股文（CSS篇）

目录

1.px和em的区别

2.介绍下BFC及其应用

3.介绍下粘性布局（sticky）

4.清除浮动的方法

5.如何用css或js实现多行文本溢出省略效果，考虑兼容

6.如何触发重排和重绘？

7.重绘与重排的区别？

 8.说说两种盒模型以及区别

9. 讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理

10.分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

---

1.px和em的区别

px全称pixel像素，是相对于屏幕分辨率而言的，它是一个绝对单位，但同时具有一定的相对性。因为在同一个设备上每个像素代表的物理长度是固定不变的，这点表现的是绝对性。但是在不同的设备之间，每个设备像素所代表的的物理长度是可以变化的，这点表现的是相对性。

em是一个相对长度单位，具体大小需要相对于父元素计算，比如父元素的字体大小为80px，那么子元素1em就表示大小和父元素一样为80ox，0.5em就表示字体大小是父元素的一半为40px

---

2.介绍下BFC及其应用

所谓BFC，指的是一个独立的布局环境，BFC内部的元素布局与外部互不影响。

触发BFC的方式有很多，常见的有：

• 设置浮动
• overflow设置为auto，scroll，hidden
• position设置为absolute，fixed

常见的BFC应用有：

• 解决浮动元素令父元素高度坍塌的问题
• 解决非浮动元素被浮动元素覆盖问题
• 解决外边距垂直方向重合的问题

---

3.介绍下粘性布局（sticky）

position中sticky值是css3新增的，设置sticky值后，在屏幕范围时该元素的位置并不受定位影响（设置top，left等属性是无效的），当该元素的位置将要偏移范围时，定位又会变成fixed，根据设置的left，top等属性成固定位置的效果

sticky属性值有以下几个特点：

• 该元素并不脱离文档流，仍然保留元素原本在文档流中的位置
• 当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。即如果你设置了top: 50px，那么在sticky元素到达距离相对定位的元素顶部50px的位置时固定，不再向上移动。
• 元素固定的相对偏移是相对离他最近的具有滚动框的祖先元素，如果祖先元素都不可以滚动，那么是相对于viewport来计算元素的偏移量

---

4.清除浮动的方法

• clear清除浮动（添加空div法）在浮动元素下方添加空div，并给该元素写css样式：{clear:both;height:0;overflow:hidden;}
• 给浮动元素父级设置高度
• 父级同时浮动（需要给父级同级元素添加浮动）
• 父级设置为inline-block，其margin:0 auto居中方法失效
• 给父级添加overflow：hidden清除浮动方法
• 万能清除法: ::after伪元素清浮动

---

5.如何用css或js实现多行文本溢出省略效果，考虑兼容

单行：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行：

display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;//行数
overflow:hidden;

兼容：

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

JS实现方式：

• 使用split+正则表达式将单词与单个文字切割出来存入words
• 加上“....”
• 判断scrollHeight与clientHeight，超出的话就从words中pop一个出来

---

6.如何触发重排和重绘？

任何改变用来构建渲染树的信息都会导致一次重排或重绘：

• 添加，删除，更新DOM节点
• 通过display：none隐藏一个DOM节点-触发重排和重绘
• 通过visibility：hidden隐藏一个DOM节点-只触发重绘，因为没有几何变化
• 移动或者给页面中的DOM节点添加动画
• 添加一个样式表，调整样式属性
• 用户行为，例如调整窗口大小，改变字号，或者滚动。

---

7.重绘与重排的区别？

重排：部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成

布局，重新排列元素

重绘：由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变

单单改变元素的外观，肯定 不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分

重绘不一定出现重排，重排必然会出现重绘

---

 8.说说两种盒模型以及区别

盒模型也称为框模型，就是从盒子顶部俯视所得的一张平面图，用于描述元素所占用的空间。他有两种盒模型，W3C模型和IE模型

理论上两者的主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用css给某个元素定义高或宽时，IE盒模型中内容的宽或高将会包含内边距和边框，而W3C盒模型并不会。

---

9. 讲一下png8、png16、png32的区别，并简单讲讲 png 的压缩原理

PNG图片主要有三个类型，分别为 PNG 8/ PNG 24 / PNG 32。

• PNG 8：PNG 8中的8，其实指的是8bits，相当于用2^8（2的8次方）大小来存储一张图片的颜色种类，2^8等于256，也就是说PNG 8能存储256种颜色，一张图片如果颜色种类很少，将它设置成PNG 8得图片类型是非常适合的。
• PNG 24：PNG 24中的24，相当于3乘以8 等于 24，就是用三个8bits分别去表示 R（红）、G（绿）、B（蓝）。R(0-255),G(0-255),B(0-255)，可以表达256乘以256乘以256=16777216种颜色的图片，这样PNG 24就能比PNG 8表示色彩更丰富的图片。但是所占用的空间相对就更大了。
• PNG 32：PNG 32中的32，相当于PNG 24 加上 8bits的透明颜色通道，就相当于R（红）、G（绿）、B（蓝）、A（透明）。R(0255),G(0255),B(0255),A(0255)。比PNG 24多了一个A（透明），也就是说PNG 32能表示跟PNG 24一样多的色彩，并且还支持256种透明的颜色，能表示更加丰富的图片颜色类型。

PNG图片的压缩，分两个阶段：

• 预解析（Prediction）：这个阶段就是对png图片进行一个预处理，处理后让它更方便后续的压缩。
• 压缩（Compression）：执行Deflate压缩，该算法结合了 LZ77 算法和 Huffman 算法对图片进行编码。

---

10.分析比较 opacity: 0、visibility: hidden、display: none 优劣和适用场景

• display: none (不占空间，不能点击)（场景，显示出原来这里不存在的结构）
• visibility: hidden（占据空间，不能点击）（场景：显示不会导致页面结构发生变动，不会撑开）
• opacity: 0（占据空间，可以点击）（场景：可以跟transition搭配）

---