前端八股文（CSS篇）一

该元素并不脱离文档流，仍然保留元素原本在文档流中的位置
当元素在容器中被滚动超过指定的偏移值时，元素在容器内固定在指定位置。即如果你设置了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搭配）

前端八股文（CSS篇）一

1.px和em的区别

2.介绍下BFC及其应用

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