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 特点

1. IE 无法调整那些使用 px 作为单位的字体大小；
2. 国外的大部分网站能够调整的原因在于其使用了 em 或 rem 作为字体单位；
3. 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>