css 高频面试题（最新）
1.经常遇到的浏览器的兼容性有哪些？原因、解决方法是什么？
1）png24为的图片在IE6浏览器上出现背景，解决方案是做成PNG8。
2）浏览器默认的margin和padding不同，解决方案是加一个全局的* {
margin: 0;
padding: 0;
}
来统一。
3）IE6双边距bug:块属性标签float后，又有横行的margin情况下，在ie
6显示margin比设置的大。
4）浮动ie产生的双边距问题：块级元素就加display：inline；行内元素转块级元素display：inline后面再加display：table。
.bb {
background-color: #f1ee18; /*所有识别*/
.background-color: #00deff\9; /*IE6、7、8识别*/
+background-color: #a200ff; /*IE6、7识别*/
_background-color: #1e0bd1; /*IE6识别*/
}
2.常用 Hack 的技巧：
（1）IE下，可以使用获取常规属性的方法来获取自定义属性，也可以使用getAttribute()获取自定义属性；（2）Firefox下，只能使用getAttribute()获取自定义属性。解决方法：统一通过getAttribute()获取自定义属性。（3）IE下，even对象有x,y属性，但是没有pageX,pageY属性；（4）Firefox下，event对象有pageX,pageY属性，但是没有x,y属性。解决方法是条件注释，缺点是在IE浏览器下可能会增加额外的HTTP请求数。（5）Chrome中文界面下默认会将小于12px的文本强制按照12px显示，可通过加入CSS属性-webkit-text-size-adjust: none;
来解决。
（6）超链接访问过后hover样式就不出现了 被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序：
L-V-H-A : a:link {
}
a:visited {
}
a:hover {
}
a:active {
}
3.css3 新增属性
border-radius:圆角
box-shadow：阴影
border-image：边框图片
text-shadow:文字阴影
transform translate 位移 rotate 旋转 scale 缩放 skew 转动时给定的角度 rotateX/rotateY/rotateZ：3D 旋转属性
box-sizing 父级宽高不变，内容随便折腾
animation 动画
tansaction 过度
transfrom 转换
4.常用的几种布局方式
- 固定布局
- 流式布局（自适应布局）
- 弹性布局（伸缩布局）
- 定位布局
- 浮动布局
- 响应式布局（媒体查询）
5.CSS 实现宽度自适应 100%,宽高 16:9 的比例的矩形
.rect {
width: 100%;
padding-bottom: 56.25%;
border: 1px solid #000;
}
padding 的值如果用百分比的话是依据于父元素宽度
6.canvas 和 SVG 的区别
**Canvas **
1、Canvas 是基于位图的，它不能够改变大小，只能缩放显示，放大或缩小时图形质量会有所损失
2、 依赖分辨率，逐像素进行渲染的
3、 Canvas 通过 Java ｓｃｒｉｐｔ 来绘制 2D 图形（动态生成）
4、 不支持事件处理器。Canvas 输出的是一整幅画布，能够以 .png 或 .jpg 格式保存结果图像
5、 适合像素处理，动态渲染和大数据量绘制，最适合图像密集型的游戏（频繁重绘对象）
6、 如果图形位置发生变化，整个场景需要重新绘制，包括任何或许已被图形覆盖的对象
**svg **
1、SVG 可缩放矢量图形（Scalable Vector Graphics），是一种使用可扩展标记语言（XML）描述 2D 图形的语言
2、不依赖分辨率,逐元素（DOM 元素）进行渲染,能够很好的处理图形大小的改变, 放大或缩小时图形质量不会有所损失
3、 基于 XML，用文本格式的描述性语言来描述图像内容
4、 支持事件处理器。SVG 绘制出的每个图形元素都是独立的 DOM 节点，能够方便的绑定事件
5、 适合静态图片展示，高保真文档查看和打印的应用场景，不适合游戏应用）
6、 如果对象属性发生变化，浏览器能自动重现图形。也就是说，SVG 绘图很容易编辑，只需要增加或移除相应的元素即可
7.如何开启 CSS3 硬件加速
Chrome, FireFox, Safari, IE9+ 以及最新的 Opera 都支持硬件加速，只要使用特定的 CSS 语句就可以开启硬件加速:
/**使用3d效果来开启硬件加速**/
.speed-up {
-webkit-transform: translate3d(250px, 250px, 250px) rotate3d(
250px,
250px,
250px,
-120deg
)
scale3d(0.5, 0.5, 0.5);
}
如果并不需要用到 transform 变换，仅仅是开启硬件加速，可以用下面的语句:
/**原理上还是使用3d效果来开启硬件加速**/
.speed-up {
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
}
对于 safari 以及 chrome，可能会在使用 animation 或者 transition 时出现闪烁的问题，可以使用以下的解决方法:
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000;
-moz-perspective: 1000;
-ms-perspective: 1000;
perspective: 1000;
/**webkit上也可以用以下语句 **/
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
注意事项
硬件加速最好只用在 animation 或者 transform 上。不要滥用硬件加速，因为这样会增加性能的消耗，如果滥用反而会使动画变得更加卡，这样就得不偿失了。
8.优先级的计算规则
-
!important 这个关键字的优先级最高。要优化考虑使用样式规则的优先级来解决问题而不是 !important.
下面要引入特殊值 0,0,0,0 每一位为 0~255（基本上不会超过 255 的）
-
内联样式. 记做: 1,0,0,0
-
然后是 ID 选择器. 记做: 0,1,0,0
-
类选择器、属性选择器和伪类选择器. 记做: 0,0,1,0
-
元素选择器和伪元素选择器. 记做: 0,0,0,1
-
通用选择器（星号）、组合符合（+，>，~，" "）和否定伪类（:not()）不影响优先级.
-
如果他们的优先级一样的话，则是后声明的样式覆盖前面声明的样式.
举个简单的栗子：
a:hover {
color: red;
}
a:link {
color: yellow;
}
根据以上的计算规则我们可以得到 a:hover 的优先级为 0,0,1,1，a:link 的优先级也为 0,0,1,1。所以 a:link 的样式覆盖了 a:hover。所以我们平常写这两个的不同样式时会把 hover 放在 link 的后面。
9.让元素隐藏有几种方法，及 display:none 和 visibility: hidden 区别 ?
1.display:none
设置元素的 display 为 none 是最常用的隐藏元素的方法。 将元素设置为 display:none 后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
2.visibility:hidden
设置元素的 visibility 为 hidden 也是一种常用的隐藏元素的方法，和 display:none 的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排。 visibility:hidden 适用于那些元素隐藏后不希望页面布局会发生变化的场景
3.opacity:0
opacity 属性我相信大家都知道表示元素的透明度，而将元素的透明度设置为 0 后，在我们用户眼中，元素也是隐藏的，这算是一种隐藏元素的方法。
这种方法和 visibility:hidden 的一个共同点是元素隐藏后依旧占据着空间，但我们都知道，设置透明度为 0 后，元素只是隐身了，它依旧存在页面中。
4.设置 height，width 等盒模型属性及 font-size 为 0
10.px，em，rem 的区别
px 像素（Pixel）。
相对长度单位。像素 px 是相对于显示器屏幕分辨率而言的。(引自 CSS2.0 手册)
PX 特点
- IE 无法调整那些使用 px 作为单位的字体大小；
- 国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位；
- Firefox 能够调整 px 和 em，rem。
**em 是相对长度单位。 **
相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
**rem 特点 **
rem 是 CSS3 新增的一个相对单位（root em，根 em），这个单位引起了广泛关注。
这个单位与 em 的区别在于使用 rem 为元素设定字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。
11.display：inline-block 什么时候会出现间隙？及解决办法。
出现情况
<style>
*{margin:0;padding:0;}
.box{overflow-x:auto;background:#fff;white-space:nowrap;}
.box span{display:inline-block;width:100px;height:30px;line-height:30px;text-align:center;background:#f00;color:#fff;}
</style>
</head>
<body>
<div class="box">
<span>111</span>
<span>111</span>
<span>111</span>
<span>111</span>
</div>
</body>
换行造成的空白符导致的
**解决办法 **
方法一： 元素之间不换行，代码如下：
111111111111
方法二： 给其父元素设置 font-size:0;给其自身设置实际需要的字号大小。 方法三： 负 margin 方法，需要注意的是这个间隙跟字号大小有关系的，所以间隙不是个确定值。
12.stylus/sass/less区别
均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系
Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念
Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；
13.知道 css 有个 content 属性吗？有什么作用？有什么应用？
css的content属性专门应用在 before/after伪元素上，用于来插入生成内容。最常见的应用是利用伪类清除浮动。
14.CSS 在性能优化方面的实践
-
css压缩与合并、Gzip压缩 -
css文件放在head里、不要用@import - 尽量用缩写、避免用滤镜、合理使用选择器
15. link 与@import 的区别
link是HTML方式，@import是CSS方式
link最大限度支持并行下载，@import过多嵌套导致串行下载，出现FOUC(文档样式短暂失效)
link可以通过rel="alternate stylesheet"指定候选样式
浏览器对 link 支持早于@import，可以使用@import对老浏览器隐藏样式
@import必须在样式规则之前，可以在css文件中引用其他文件
总体来说：link优于@import
<template>
<a href="#" class="top">
<img src="/img/arrow.png">
</a>
</template>
<style>
.top {
bottom: 10px;
position: fixed;
right: 0px;
padding: 5px;
z-index: 1000;
background: rgba(0,0,0,.5);
color: #fff;
border-radius: 5px;
}
.top img {
width: 25px;
}
</style>
