CSS面试题

一、4.14基础

1.1、隐藏元素的方法有哪些

● display: none:渲染树不会包含该渲染对象,因此该元素不会在页面中占据位置，也不会响应绑定的监听事
件。
● visibility: hidden:元素在页面中仍占据空间，但是不会响应绑定的监听事件。
● opacity: 0:将元素的透明度设置为0,以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应
元素绑定的监听事件。
● position: absolute: 通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。
● z-index:负值:来使其他元素遮盖住该元素，以此来实现隐藏。
● clip/clip-path :使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置,但是不
会响应绑定的监听事件。
● transform: scale(0,0):将元素缩放为0,来实现元素的隐藏。 这种方法下，元素仍在页面中占据位置， 但是
不会响应绑定的监听事件。

1.2、 transition和animation的区别

● transition是过渡属性， 强调过度，它的实现需要触发-个事件(比如鼠标移动上去，焦点，点击等)才执行
动画。它类似于flash的补间动画，设置一个开始关键帧， -个结束关键帧。
● animation是动画属性，它的实现不需要触发事件，设定好时间之后可以自己执行，且可以循环一个动画。
它也类似于flash的补间动画，但是它可以设置多个关键帧(用@keyframe定义)完成动画。

1.3、 css优化和提高性能的万法有哪些?

加载性能:
(1) css压缩:将写好的css进行打包压缩，可以减小文件体积。
(2) css单一 样式:当需要下边距和左边距的时候，很多时候会选择使用margin:top 0 bottom 0;但margin-
目
bottom:bottom;margin-left:left;执行效率会更高。
(3)减少使用@import,建议使用link,因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行
加载。.
选择器性能:
(1)关键选择器(key selector) 。选择器的最后面的部分为关键选择器(即用来匹配目标元素的部分)。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等;
(2)如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则(这样样式系统就不会浪费时间去匹配它们了)。
(3)避免使用通配规则，如*{}计算次数惊人，只对需要用到的元素进行选择。
(4)尽量少的去对标签进行选择，而是用class。
(5)尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。

渲染性能:
(1)慎重使用高性能属性:浮动、定位。
(2)尽量减少页面重排、重绘。
(3)去除空规则: {} 。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。
(4)属性值为0时，不加单位。
(5)属性值为浮动小数0.**,可以省略小数点之前的0。
(6)标准化各种浏览器前缀:带浏览器前缀的在前。标准属性在后。
(7)不使用@import前缀，它会影响css的加载速度。
(8)选择器优化嵌套，尽量避免层级过深。
(9) css雪碧图，同一页面相近部分的小图标,方便使用，减少页面的请求次数,但是同时图片本身会变大，使! 2
用时，优劣考虑清楚，再使用。
(10)正确使用display的属性，由于display的作用， 某些样式组合会无效，徒增样式体积的同时也影响解析性能。

可维护性、健壮性:
(1)将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。

1.4、 Sass、Less 是什么?为什么要使用他们?

他们都是CSS预处理器，是CSS.上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。例如Less 是一种动态样式语言，

将CSS赋予了动态语言的特性，如变量，继承，运算，函数， LESS 既可以在客户端上运行(支持IE 6+, Webkit, Firefox), 也可以在服务端运行(借助Node.js)。
为什么要使用它们?
结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理， 减少无意义的机械劳动。
可以轻松实现多重继承。完全兼容CSS代码，可以防便地应用到老项目中。LESS 只是在CSS语法_上做了扩展，所以老的CSS代码也可以与LESS代码-同编译。

二、页面布局4.14

1.常见的CSS布局单位，常用的布局单位包括像素(px)，百分比(%)，em,rem ,Vw/vh。