css总结及常考问题

常考问题总结

参考问题

css预处理器

CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。

css预处理器种类繁多，三种主流css预处理器是Less、Sass（Scss）及Stylus；它们各自的背景如下:

如果用了预处理器，需要在webpack打包时引入loader
stylus css less?

postion

五种定位，以及具体说一说

• static
• absolute,对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于:格式：
• relative 相对正常的位置而变化
• fixed 元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：
• sticky：在relative和fixed之间切换

BFC

什么是BFC

格式化块级上下文，独立渲染区域，就是一个环境里面的元素不会影响到外部元素。

BFC：

• 内部的Box在垂直方向上排列
• Box的垂直距离由margin决定，属于同一个bfc的未发生margin塌陷
• 每个元素的margin box的左边与包含border box的左边接触
• 独立的容器，外面不会影响里面，文字环绕效果设置，float
• BFC区域不会与float重叠（清除浮动）
• 计算BFC时，浮动元素也参与计算

如何创建BFC

1. 根元素,即HTML元素，最大的BFC
2. position的绝对定位：abslute、fixed
3. flex，弹性盒布局
4. float：只要不为none
5. display：inline-block行内块
6. 表格布局，display：table、table-ceil
7. overflow:hidden

什么应用场景

BFC的使用场景

• 自适应两栏布局，一个float、一个BFC这样不会重叠
• 避免元素被浮动元素覆盖
• 解决margin塌陷问题
• 父元素的高度包含子浮动元素，清除内部浮动

盒子塌陷

本应该在父盒子内部的元素跑到外部去，尤其是父盒子高度设置为auto，夫元素中有没有其他非浮动的可见元素，父盒子的高度就会塌陷为0 ，高度塌陷

如何解决盒子塌陷

1. 给父盒子设定指定宽高（非自适应了）
2. 给外部盒子也浮动
3. 父盒子添加overflow属性
4. 下方引入清除浮动块
   
5. 给父盒子添加border
6. 给父盒子设置padding-top;

面试常见问题

1、盒模型

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？box-sizing属性？

css模型的盒模型都具备content，padding，border,margin这些属性

• 标准盒模型，默认、box-sizing:content-box,其中
  （content）+padding+border+margin,当设置盒子的宽高时，只是设置了content 的宽高
  -怪异盒模型， box-sizing:border-box,当设置盒子的宽高时，包含了content+padding+border；
  （content+padding+border）+margin
  -boxsizing:inherit 从父级元素继承该属性的值

JS如何获取盒模型对应的宽度和高度呢？

• dom.style.width/height 只能取到行内样式的宽和高，
• dom,currentStyle.width/height
• window.getComputedStyle.width/height
• dom,offsetWidth/offsetHeight 包括宽度、内边距和border不包含margn，最常用，兼容性最好

2、css 隐藏元素的方法

• display:none;dom结构上都没有了，引起重排（回流）和重绘，操作dom结构，开销较大
• visibility:hidden 不可见，隐藏对应元素，dom树结构上有，引起重绘，适合频繁切换的场景，dom操作少。
• opacity:0 透明度为0 ，全透明，也就看不见了，但是元素仍然在dom树上，页面上的空间也还在
• 技巧性：设置宽高为 0，设置透明度为 0，设置 z-index 位置在 -1000

3、伪类和伪元素的区别

• 伪类：表示已存在的某个元素的某种状态，通过dom树结构又无法表示，就通过伪类来添加样式。
  ：link，：visited,;hover,:first-child,:last-child,:disabled,:enabled

• 伪元素：顾名思义伪装成元素，但不是元素，这与生成内容相关。生成内容主要指由浏览器创建的内容，而不是由标志或内容来表示。生成内容主要由:before和:after伪元素来实现，
  :first-line,:first-letter和::selection：before.:after

伪类，可以添加类来达到效果
伪元素，可以田间元素怒来达到效果
伪类和伪元素的区别，关键点在于如果没有伪元素(或伪类)，
是否需要添加元素才能达到效果，如果是则是伪元素，反之则是伪类
伪类和伪元素都不出现在源⽂件和DOM树中。也就是说在html源⽂件中是看不到伪类和伪元素的。
伪类其实就是基于普通DOM元素⽽产⽣的不同状态，他是DOM元素的某⼀特征。
伪元素能够创建在DOM树中不存在的抽象对象，⽽且这些抽象对象是能够访问到的。

4、选择器

• id选择器（#form1)
• 类选择器（.class1)
• 标签选择器（div)
• 相邻选择器（div + p）
• 子代选择器（div > p)只能选择儿子，连孙子都不行
• 后代选择器（div p）儿子、孙子、重孙子都行
• 通配符选择器（*）
• 属性选择器（a[rel = “external”]）
• 伪类（：hover，：first-child）、伪元素(:first-letter)、分组选择器

5、继承性

继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素。

• 不可继承的样式：padding、border、margin、width、height（盒子模型属性、背景属性、定位属性、生成内容属性、页面样式）
• 可继承样式：font-size、font-family、color、ul、li、dl、dt

可继承的：

字体系列属性：font-size、font-style、font-weight、font-family
文本系列属性： text-indent、text-align、line-height、word-spacing、letter-spacing、text-transform、direction

元素可见性：visibility

所有元素可以继承的属性：

• 可见性：visibility
• 光标属性：cursor

文本居中（lien-height设置的和父容器高度一致）

• 6、优先级

先按位置分，内联> style>外部引入样式标

！import > 内联样式,再按（id>类>标签>

元素选择符的权值，元素标签（派生选择器）：1，class选择符：10，id选择符：100，内联样式权值最大，为1000

如果优先级相同，则选择最后出现的样式。
继承得到的样式的优先级最低

6、display有哪些值？

• block：块级元素，可以设置宽高，单独占一行，
• inline：行内元素，挨着排列，无法设置宽高依据内容，
• inline-block
• flex：弹性盒布局
• table：块级表格
• grid：栅格布局
• lits-item：列表显示
• inherite：继承父级的性质
• display:none;不显示

7、position的值

• static：默认文档流
• absolute：绝对位置，相对于最近的定位祖先进行定位，否则找到最外层（经典口诀：子绝父相），不脱离文档流
• relative：以原来位置做参考进行移动，其他元素不受到影响
• sticky：粘性布局，指定一个位置，到达该位置后不发生变化，之前会发生变化
  position: sticky;
  top: 10px;
• fixed：固定在视口，相对浏览器窗口，即使页面滚动也不变

8、CSS3新特性

• flex布局
• border-radius
• 盒模型
• 媒体查询
• 过渡
• 2Dtransform
• 线性渐变：
• 动画

9、用纯CSS创建三角形

div {
	width:0;
	height:0;
	border-top:50px solid transparent;
	border-right:50px solid transparent;
	border-left:50px solid transparent;
	border-bottom:50px solid red;
	}

10、用css画圆，画扇形

借助border-radius：画圆形
div {
width: 100px;
height: 100px;
background-color:pink;
border-radius:50% 50%;
}
画扇形：
div {
width: 100px;
height: 100px;
background-color:pink;
border-radius:0 100% 0 0;
}

10、css样式初始化

• {
  margin:0;
  padding:0}

不同兼容性浏览器的默认值不一样，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。

11、position与display、overflow、float这些特性叠加

会怎么样？？？
display 属性规定元素应该生成的框的类型；
position属性规定元素的定位类型；
float属性是一种布局方式，定义元素在哪个方向浮动。
类似于优先级机制：position：absolute/fixed优先级最高，有他们在时，float不起作用，display值需要调整。float 或者absolute定位的元素，只能是块元素或表格。

12、为什么会出现浮动？如何清除浮动？

• 出现浮动的原因：浮动元素碰到包含它的边框或者浮动元素的边框停留。浮动不属于文档流，而是独立定位，浮动元素会漂浮在文档流的块框上
• 浮动带来的影响
  父元素的高度无法被撑开，影响与父元素同级的元素
  与浮动元素同级的非浮动元素（内联元素）会跟随其后
  若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
• 清除浮动的方式：父级div定义height；最后一个浮动加空div并添加样式clear：both；包含浮动元素的父标签添加样式：overflow：hidden或者auto

13、设置元素浮动后，display的值

display:block

14、移动端的媒体查询

通过媒体查询可以为不同大小和尺寸的媒体定义不同的css，适应相应的设备的显示
在head里面

@media only screen and (max-device-width:480px) {
    /css样式/}

15、什么是CSS预处理/后处理

预处理器例如：LESS、Sass、Stylus，用来预编译Sass或less，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。

后处理器例如：PostCSS，通常被视为在完成的样式表中根据CSS规范处理CSS，让其更有效；目前最常做的是给CSS属性添加浏览器私有前缀，实现跨浏览器兼容性的问题。

例如你可以在 CSS 中使用变量、简单的逻辑程序、函数（如右侧代码编辑器中就使用了变量$color）等等在编程语言中的一些基本特性，可以让你的 CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。

16、在网页中用奇数/偶数字体

使用偶数字体。偶数字号相对更容易和 web 设计的其他部分构成比例关系。Windows 自带的点阵宋体（中易宋体）从 Vista 开始只提供 12、14、16 px 这三个大小的点阵，而 13、15、17 px时用的是小一号的点。（即每个字占的空间大了 1 px，但点阵没变），于是略显稀疏。

17、元素竖向的百分比设定是相对于容器的高度吗？

当按百分比设定一个元素的宽度时，它是相对于父容器的宽度计算的，但是，对于一些表示竖向距离的属性，例如 padding-top , padding-bottom , margin-top , margin-bottom 等，当按百分比设定它们时，依据的也是父容器的宽度，而不是高度。

18、margin和padding

• 需要在border外侧添加空白时。
  空白处不需要背景（色）时。
  上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。（高度塌陷），可以用BFC来解决

• 何时应当时用padding
  需要在border内测添加空白时。
  空白处需要背景（色）时。
  上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。

19、响应式设计

基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。
页面头部必须有meta声明的viewport。

20、让Chrome支持小于12px 的文字？

p{
font-size:10px;
-webkit-transform:scale(0.8);//0.8是缩放比例
}

21、高度自适应div，两个div，一个高度100px另一个填满

外层div，position：relative；

高度自适应的： position:absolute; top:100px; bottom:0; left :0

22、 css的overflow属性

• scoll 必出现滚动条
• auto 子元素内容大于了父元素，才出现滚动条
• visible 超出的内容可见
• hidden 超出的内容隐藏

23、对DOM设置它的CSS样式

• 内联样式 style=“color:red;width:100px”
• 内部样式标 head里面 style
• 外部样式表 link或者import

link属于 XHTML 标签，除了加载 CSS 外，还能用于定义RSS，定义 rel 连接属性等作用，无兼容性，支持使用javascript改变样式

而@import是CSS提供的，只能用于加载CSS，不支持使用 javascript 改变样式；

页面被加载的时，link 会被同时加载，而@import 引用的CSS会等到页面加载完再加载；

24、如何水平居中一张背景图

background-position:center

25、强制换行的css

word-break；break-all

26、对浏览器内核的理解

主要分成两部分：渲染引擎（layout engineer或Rendering Engine）和 JS 引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户以及其他它所需要编辑、显示网络的应用程序都需要内核。
JS引擎则：解析和执行JavaScript 来实现网页的动态效果；
最开始渲染引擎和 JS 并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只渲染引擎。

27、px、em、rem的区别

• px 像素 固定单位 它的大小是固定的
• em 相对单位 em的值并不是固定的 em会继承父元素的字体大小 会根据父元素字体大小的变化而变化 一般1em等于16px
• rem 他的值也是不固定的 他会根据根元素的大小而变化

28、行内元素与块级元素的区别

• 块级元素( block )特性：
  总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示；
  宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制；
  宽度没有设置时，默认100%，块级元素可以包含行内或者行内块元素

-内联元素(inline)特性：
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，设置无效由内容决定span标签;

行内元素的margin和padding，水平上都有效，垂直上都无效

根据语义化标签，行内快最好只包含行内块

可以相互转换：
display：inline、block、inline-block

• 块元素哪些属性可以继承

visibility、cursor、text-indent、text-align

29、css渲染树，优先级

html构建html树，css生成css树
两颗树合并生成渲染树
节点布局，计算几何形状，将确定每个节点在屏幕上的确切坐标
页面渲染

30、移动端适配，点击穿透

• 0适配，使用合理的flex布局+媒体查询

• 基于一个尺寸的屏幕做设计，其他屏幕等比缩放

• viewport 缩放方案

  适配原理简单需要使用 JS直接使用设计稿标注无需换算方案死板，只能实现页面级别肢体缩放

• 动态REM方案

  适配原理稍复杂需要使用 JS设计稿标注的 px 换算到 css 的 rem 计算简单方案灵活，既能实现整体缩放，又能实现局部不缩放

• vw 方案

  适配原理简单不需要 JS 即可适配设计稿标注的 px 换算到 css 的 vw 计算复杂方案灵活，既能实现整体缩放，又能实现局部不缩放

31、css媒体查询

32、css性能优化

• CSS文件压缩
• CSS层级嵌套最好不要超过3层
• 删除无用CSS代码
• 慎用*通配符
• 小图片处理方式：雪碧图、字体图标，把图片转换为base64
• 不要在ID选择器前面进行嵌套其它选择器
• 优化回流与重绘

如果需要对DOM进行多次访问，尽量使用局部变量缓存该DOM
避免使用table布局，可能很⼩的⼀个⼩改动会造成整个table的重新布局
CSS选择符从右往左匹配查找，避免节点层级过多

33、多栏等高布局

34、css3的动画有哪些说一下？如何提高动画渲染的流畅度

35、margin塌陷和重叠现象说一下

36、flex有哪些属性

容器属性
display：flex
flex-direction 、 flex-wrap、justify-content、align-items、align-content、
flex-flow(flex-direction \flex-wrap)

子容器：
flex:1(flex-grow | flex-shrink | flex-axios) 0 1 auto
flex :auto 0 0 auto

alig-self:控制子项在自己侧轴的排列方式
order：属性定义子项的排列顺序（前后顺序）

37、用js如何知道一个动画的执行结束时间段

<script type="text/javascript">
        var element = document.getElementById('demo')
        element.addEventListener('transitionend', handle, false)
        function handle(){
            alert('transitionend事件触发')
        }
    </script>

38、单行居中、多行向左

39、css常用单位，em、rem、px；rem适配

• 1rem的大小如何确定的，相对于父元素的什么属性的多少

页面所有使用rem单位的长度都是相对于根元素元素的font-size大小。即1rem等于根元素元素的font-size大小。

• 1em 的大小

子元素字体大小的em是相对于父元素字体大小 元素的width/height/padding/margin用em的话是相对于该元素的font-size。

• vh、vw
  全称是 Viewport Width 和 Viewport Height，视口的宽度和高度，1vh相当于 视口高度的 1%。

• px
  px像素（Pixel），相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

分成10份是什么布局，grid？

移动端的性能优化、rem原理

40、手写题：实现布局｜p…pp|

41、手写题：左右两边固定中间自适应

• 双飞翼
• 圣杯布局
• 左右，width：100px固定值，中间flex：1；

42、根据指定data渲染成指定样式的导航栏组件

43、使用font-weight和b标签有什么区别（seo）

HTML 的标签负责将内容标记为 HTML 元素，浏览器的默认 CSS 样式表负责按照 W3C 的建议来指定 HTML 元素的默认样式。

可以这样理解，使用 b 标签标记的内容浏览器会使用相应的默认 CSS 样式来渲染。b 标签是一个单纯的 HTML样式标签，它指定文本要用粗体，这样看来本质上是没有区别。

44、回流重绘的触发条件、如何避免回流重绘

45、手写一个star评分组件，vue？

46、一个元素和父元素一样高

47、 如何让两个fontsize不一样的元素底部对齐，他提示用flex布局来做

align-items: baseline

48、css的position

49、当鼠标处于hover状态时对标志旋转180度

style中，关键是img和.box:hover img的设置，首先我们需要先给img设置transition属性，这里的属性指定了动画的方式和持续时长。然后给.box设置当鼠标上移时:hover时img的动作为旋转180度：

transform: rotate(180deg);

50、幽灵空白节点

幽灵空白节点”是内联盒模型中非常重要的一个概念，具体指的是：在HTML5文档声明中，内联元素的所有解析和渲染表现就如同
每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵
一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”。

51、css高耗能属性

0.1px,0.5px实现方法

52、css层叠上下文

53、css3的新特性

54、translate动画

55、怎么实现轮播图

这可能是轮播图最简单点的实现之一，通过更改图片的src来实现该效果，首先需要将图片命名格式统一比如pic01.jpg，pic02.jpg…,再通过js使用定时器去改变img标签里面的src图片链接的名字来实现切换效果。代码如下：

56、画一个180、90、45的扇形

57、z-index、层叠

58、 触底分页实现原理

滚动条距离上边的高度+视口的高度 》 页面的高度就触发分页，继续加载，虚拟列表等。

$(document).scroll(function(){        var bheight = $(document).height();//获取窗口高度
        var sheight = $("body")[0].scrollHeight;//获取滚动条高度，[0]是为了把jq对象转化为js对象
        var stop = $("body").scrollTop();//滚动条距离顶部的距离
        if(stop>=sheight-bheight){//当滚动条到顶部的距离等于滚动条高度减去窗口高度时
            queryMailList();
        }
    });

59、 flex拉伸变形问题

flex-shrink:0;
div标签包裹

60、div的等比缩放

• 响应式，媒体查询，不同屏幕下的高度和宽度
• 百分比，

61、height、margin、padding的百分比根据什么来计算的

• margin、padding设置百分比，是相对于父元素的宽度width来计算的，包括margin的上下左右
• width、height百分比分别根据父级元素块的宽度和高度来计算的
• 相对定位的top、left父级元素的高度和宽度来计算的
• 绝对定位的top、left、width、height是根据包含它的第一个不是static定位元素的高度和宽度来计算的
• 固定定位top、left(position:fixed)，根据浏览器视口的高度和宽度来计算的
• translate：根据自身的宽高来计算的
• border-radius:相对于自身
• background-size:相对背景区的宽高

62、清除浮动的方法

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象，这个现象叫浮动溢出。为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。
  清除浮动主要是为了解决父元素因为子级元素浮动引起的内部高度塌陷的问题。

1.额外标签法：添加一个空白标签，style="clear:both"闭合浮动

优点：通俗易懂，书写方便。
缺点：添加许多无意义的标签，结构化比较差。
clear：both：本质就是闭合浮动， 就是让父盒子闭合出口和入口，不让子盒子出来
  
2. 父元素添加overflow：hidden

触发bfc，实现清除浮动，代码简洁，内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素。

3. 使用after伪元素清除浮

优点：符合闭合浮动思想，结构语义化正确。
缺点：ie6-7不支持伪元素：after，使用zoom:1触发hasLayout。

#parent:after{
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
}
#parent{
    /* 触发 hasLayout */ 
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}

4、直接给父盒子设置固定的高度
5、双伪元素清除浮动

63、transform和position的性能

position.这是因为top和left的改变会触发浏览器的 reflow 和 repaint ，整个动画过程都在不断触发浏览器的重新渲染，这个过程是很影响性能的。

为了解决这个问题，我们使用 transform 中的 translate() 来替换 top 和 left ，重写一下这个动画效果。那么，为什么 transform 没有触发 repaint 呢？原因就是：transform 动画由GPU控制，支持硬件加速，并不需要软件方面的渲染。

（1）transform

（2）opacity

（3）filter

总结：

1、transform 会使用 GPU 硬件加速，性能更好；position + top/left 会触发大量的重绘和回流，性能影响较大。

2、硬件加速的工作原理是创建一个新的复合图层，然后使用合成线程进行渲染。

3、3D 动画 与 2D 动画的区别；2D动画会在动画开始和动画结束时触发2次重新渲染。

4、使用GPU可以优化动画效果，但是不要滥用，会有内存问题。

5、理解强制触发硬件加速的 transform 技巧，使用对GPU友好的CSS属性。

64、div和span区别（inline、block、inline-block）

行内元素与块级元素

65、单行文本溢出，显示…,用JS方法

单行文本溢出：
width:100px;
text-overflow:ellipsis

多行文本溢出：

• JS方法：

function substrLength(elementId,length){
    //elementId,元素id，length字符串长度
    var text = doucument.getElementById(elementId);
    var result = "";
    if(text.innerText.length > length){
        result = text.innerText.substr(0,length)+"...";
    }else{
        result = textinnerText;
    }

    text.innerText = result;
}

substrLength('ID','length')

66、css如何让页面div高度一致，小的适应大的

67、项目中css样式做了响应式吗 （说了vh，以及那个lib-flexible这个库）

68、flex:0 1 auto什么意思？

flex: flex-grow 有空余空间时候不放大，flex-shrink 没有空间的时候进行压缩， flex-basis:分配多余空间之前，项目占据的主轴空间

flex-grow
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

flex-basis
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

69、css动画、js动画

css实现动画：animation transition transform

js实现动画：setInterval setTimeout requestAnimationFrame
优点：
过程控制，可以在动画播放过程中对动画进行控制：开始、暂停、回放、终止、取消都是可以做到的。
动画效果比css3动画丰富,有些动画效果，比如曲线运动,冲击闪烁,视差滚动效果，只有JavaScript动画才能完成。
CSS3有兼容性问题，而JS大多时候没有兼容性问题。
缺点：
JavaScript在浏览器的主线程中运行，而主线程中还有其它需要运行的JavaScript脚本、样式计算、布局、绘制任务等,对其干扰导致线程可能出现阻塞，从而造成丢帧的情况。代码的复杂度高于CSS动画。

70、获取盒子宽度

• offsetwidth
• clientwidth
• scrollwidth

71、vh的兼容性

vw、vh是相对于viewport视窗的宽高进行计算的单位，相对于浏览器的窗口的大小。

72、让不支持高级css属性(比如grid布局)的浏览器支持这些属性有什么办法？原理是什么？这个没答上来…

那么如何使用最新的 Grid 功能？直接采取相同的策略：尝试回退到一个相似的布局。

我们的布局应该逐步增强。使用较旧浏览器的用户可能只能看到一个更简单但可用的版式，而那些使用最新浏览器的用户将获得完整的用户体验。

有时候，我们不需要 CSS 特性查询之类的奇特功能。这时，我们就可以利用 CSS 属性的工作原理：在 CSS 类中重新定义属性时，最后一个有效的属性会被视作要使用的属性。

特性查询

属性的工作原理

后备方案

#container {
    display: flex;
    display: grid;

    /* 如果 Grid 不可用，则第二个属性声明将失效，且浏览器会应用第一个属性声明的值 `flex` */
}

73、css3的动画与js动画相比性能更高的原因

性能高的原因：1、css是关键帧动画，补间动画部分由浏览器完成，浏览器可以对动画进行优化；2、代码简单，性能调优方向固定；3、CSS动画运行在合成线程中，不会阻塞主线程，并且在合成线程中完成的动作不会触发回流和重绘，因而其渲染成本小

-CSS3动画

CSS3 动画也被称为补间动画，原因是只需要添加关键帧的位置，其他的未定义的帧会被自动生成

因为我们只设置了几个关键帧的位置，所以在进行动画控制的时候比较困难，不能再半路暂停动画，或者在动画过程中添加一些其他操作，都不大容易

但是 CSS 动画也有很多的好处

浏览器可以对动画进行优化
帧速不好的浏览器，CSS3 可以自然降级兼容
代码简单，性能调优方向固定

• 首先，JS 动画是逐帧动画，在时间帧上绘制内容，一帧一帧的，所以他的可再造性很高，几乎可以完成任何你想要的动画形式。但是由于逐帧动画的内容不一样，会增加制作的负担，占用比较大的资源空间。

但是它也有很多的优势

细腻的动画
可控性高
炫酷高级的动画

-CSS动画与JS动画的对比
CSS 动画大多数都是补间动画，而 JS 动画是逐帧动画

编码的高效，采用 JS 去实现的动画，无论多简单的动画，都需要去控制整个过程，当然你可能会说可以采用一些库来解决这些问题，但是这些库的实际运行可能要比原生实现的效率要低的多

性能的高效，在我们前面讲到了回流和重绘，如果我们要操作一个元素向右移动，我们可能需要控制 dom.style.left 属性，每次来改变元素的位置，而结合我们所说的，几何属性的改变必然会引起回流，回流必然引起重绘，可想而知如果我们采用 JS 来实现动画，这个代价有多大，这会造成浏览器在不断的计算页面，从而导致浏览器内存堆积。同时由于 JavaScript 运行在浏览器的主线程中，主线程中还有其他的重要任务在运行，因而可能会受到干扰导致线程阻塞，从而丢帧

而 CSS 的动画是运行在合成线程中的，不会阻塞主线程，并且在合成线程中完成的动作不会触发回流和重绘

当然还有一个重要的点：JS 动画运行在 CPU，而 CSS 动画运行在 GPU

总的来说， CSS动画的渲染成本小，并且它的执行效率高于 JavaScript 动画