目录
9.?讲一下png8、png16、png32的区别，并简单讲讲?png?的压缩原理
px全称pixel像素，是相对于屏幕分辨率而言的，它是一个绝对单位，但同时具有一定的相对性。因为在同一个设备上每个像素代表的物理长度是固定不变的，这点表现的是绝对性。但是在不同的设备之间，每个设备像素所代表的的物理长度是可以变化的，这点表现的是相对性。
em是一个相对长度单位，具体大小需要相对于父元素计算，比如父元素的字体大小为80px，那么子元素1em就表示大小和父元素一样为80ox，0.5em就表示字体大小是父元素的一半为40px
所谓BFC，指的是一个独立的布局环境，BFC内部的元素布局与外部互不影响。
触发BFC的方式有很多，常见的有：
常见的BFC应用有：
position中sticky值是css3新增的，设置sticky值后，在屏幕范围时该元素的位置并不受定位影响（设置top，left等属性是无效的），当该元素的位置将要偏移范围时，定位又会变成fixed，根据设置的left，top等属性成固定位置的效果
sticky属性值有以下几个特点：
单行：
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实现方式：
任何改变用来构建渲染树的信息都会导致一次重排或重绘：
重排：部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算，表现为重新生成
布局，重新排列元素
重绘：由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新，表现为某些元素的外观被改变
单单改变元素的外观，肯定 不会引起网页重新生成布局，但当浏览器完成重排之后，将会重新绘制受到此次重排影响的部分
重绘不一定出现重排，重排必然会出现重绘
盒模型也称为框模型，就是从盒子顶部俯视所得的一张平面图，用于描述元素所占用的空间。他有两种盒模型，W3C模型和IE模型
理论上两者的主要区别是二者的盒子宽高是否包括元素的边框和内边距。当用css给某个元素定义高或宽时，IE盒模型中内容的宽或高将会包含内边距和边框，而W3C盒模型并不会。
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 算法对图片进行编码。