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

BMP，是无损的、既支持索引色也支持直接色的点阵图。这种图片格式几乎没有对数据进行压缩，所以BMP格式的图片通常是较大的文件。GIF是无损的、采用索引色的点阵图。采用LZW压缩算法进行编码。文件小，是GIF格式的优点，同时，GIF格式还具有支持动画以及透明的优点。但是GIF格式仅支持8bit的索引色，所以GIF格式适用于对色彩要求不高同时需要文件体积较小的场景。JPEG是有损的、采用直接色的点阵图。JPEG的图片的优点是采用了直接色，得益于更丰富的色彩，JPEG非常适合用来存储照片，与GIF相比，JPEG不适合用来存储企业Logo、线框类的图。因为有损压缩会导致图片模糊，而直接色的选用，又会导...

1.什么是物理像素，逻辑像素和像素密度，为什么在移动端开发时需要用到@3x, @2x这种图片？ 以 iPhone XS 为例，当写 CSS 代码时，针对于单位 px，其宽度为 414px & 896px，也就是说当赋予一个 DIV元素宽度为 414px，这个 DIV 就会填满手机的宽度； 而如果有一把尺子来实际测量这部手机的物理像素，实际为 1242*2688 物理像素；经过计算可知，1242/414=3，也就是说，在单边上，一个逻辑像素=3个物理像素，就说这个屏幕的像素密度为 3，也就是常说的 3 倍屏。 对于图片来说，为了保证其不失真，1 个图片像素至少要对应一个物理像素，假如原始...

#现在前端的就业环境真的很差吗# 大家不要焦虑了，只有学到东西，简历上才有内容写，面试才能游刃有余，而不是贩卖焦虑，让自己和他人都感到不安，学习才是硬道理

1.替换元素：通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。2.替换元素除了内容可替换这一特性以外，还有以下特性：内容的外观不受页面上的CSS的影响：用专业的话讲就是在样式表现在CSS作用域之外。 如何更改替换元素本身的外观需要类似appearance属性，或者浏览器自身暴露的一些样式接口。有自己的尺寸：在Web中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包括边框）是300像素×150像素。在很多CSS属性上有自己的一套表现规则：比较具有代表性的就是vertical-align属性，对于替换元素和非替换元素，vertical-align...

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

同行显示的inline-block元素之间经常会出现一定的空隙，这就是“换行符/空格间隙问题”。如： <style> .inner{ display: inline-block; width: 100px; height: 100px; background-color: red; } </style> <div class="outer"> <div class="inner"></di...

::before 和 :after 的双冒号和单冒号有什么区别？冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。::before就是以一个子元素的存在，定义在元素主体内容之前的一个伪元素。并不存在于dom之中，只存在在页面之中。注意： :before 和 :after 这两个伪元素，是在CSS2.1里新出现的。 起初，伪元素的前缀使用的是单冒号语法，但随着Web的进化，在CSS3的规范里，伪元素的语法被修改成使用双冒号，成为::before、::after。

媒体查询： 媒体查询由⼀个可选的媒体类型和零个或多个使⽤媒体功能的限制了样式表范围的表达式组成，例如宽度、⾼度和颜⾊。 媒体查询，添加⾃CSS3，允许内容的呈现针对⼀个特定范围的输出设备⽽进⾏裁剪，⽽不必改变内容本身，适合web⽹⻚应对不同型号的设备⽽做出对应的响应适配。 媒体查询包含⼀个可选的媒体类型和满⾜CSS3规范的条件下，包含零个或多个表达式，这些表达式描述了媒体特征，最终会被解析为true或false。 如果媒体查询中指定的媒体类型匹配展示⽂档所使⽤的设备类型，并且所有的表达式的值都是true，那么该媒体查询的结果为true。那么媒体查询内的样式将会⽣效。 &...

使用css3的transform，为了兼容各个浏览器，可加上浏览器的私有前缀［－moz- -webkit -ms-］。transform属性有：变换，可对元素进行位移(translate)、旋转(rotate )、缩放(scale )、倾斜(skew )操作，支持2D或者3D转换，IE9+支持。transform综合应用：平行四边形（skew）、梯形（perspect、rotate）、菱形（rotate、scale）、折角（rotate）1.transform-origin在使用transform方法进行文字或图像变形的时候，是以元素的中心点为基准点进行变形的。设...

通常 z-index 的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方或者下方出现。z-index值越大就越是在上层。 z-index元素的position属性需要是relative，absolute或是fixed。z-index属性在下列情况下会失效：父元素position为relative时，子元素的z-index失效。 解决：父元素position改为absolute或static；元素没有设置position属性为非static属性。 解决：设置该元素的position属性为relative，absolute或是fi...

层叠顺序，英文称作 stacking order，表示元素发生层叠时有着特定的垂直显示顺序。下面是盒模型的层叠规则：对于上图，由下到上分别是： 1.背景和边框：建立当前层叠上下文元素的背景和边框。 2.负的z-index：当前层叠上下文中，z-index属性值为负的元素。 3.块级盒：文档流内非行内级非定位后代元素。 4.浮动盒：非定位浮动元素。 5.行内盒：文档流内行内级非定位后代元素。 6.z-index:0：层叠级数为0的定位元素。 7.正z-index：z-index属性值为正的定位元素。注意: 当定位元素z-index:auto，生成盒在当前...

1.使用vw实现vh 和 vw 是相对于视口的高度和宽度。 1vh 等于1/100的视口高度，1vw 等于1/100的视口宽度。 比如：浏览器高度950px，宽度为1920px, 1 vh = 950px/100 = 9.5 px，1vw = 1920px/100 =19.2 px ; <style> .div { width: 10%; /* 或者width: 10vw; 都可以实现自适应正方形*/ height: 10vw; background-color: red; } ...

用CSS实现扇形的思路和三角形基本一致，就是多了一个圆角的样式，实现一个90°的扇形： <style> .div { width: 0; height: 0; border: 100px solid transparent; border-radius: 100px; border-top-color: red; } </style> <div class="div"></div>