前端高频面试题 CSS篇

通过从网上看到的面经，总结的一些高频的前端CSS面试题，有很多不会，于是找资料，并通过代码实现，自己提供了一些参考答案。

目录

1.怎样会产生浮动？
2.如何清除浮动？
3.盒子模型，以及IE和其他浏览器的却别？
4.CSS3新特性有哪些？
5.em 和 rem 的区别？
6.重排和重绘？
7.行元素和块元素？
8.border-box 和 content-box 的区别？
9.伪元素和伪类？
10.unset?
11.CSS选择器优先级？
12.水平垂直居中布局？
13.两列等高布局？

1.怎样会产生浮动？

某一个元素的float属性设置为left或者right，这个元素就会脱离文档流，左右浮动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。

2.如何清除浮动？

方法比较多，这里介绍三种典型的方法：
a.在与浮动元素的同级元素中加一个空的div，并将其css属性设置为

.clear1 { clear: both; }

优点：通俗易懂，容易掌握
缺点：添加了太多空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，所以你看了这篇文章之后还是建议不要用了吧。
b.父元素css属性设置为
.ovef2 { overflow: auto; zoom:1; }
优点：不存在结构和语义化问题，代码量极少
缺点：overflow为hidden时内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；overflow为auto时会产生firefox和IE的兼容性问题。
c.父元素使用:after 伪元素

.clear-fix3 { zoom:1 } .clear-fix3::after { display: block; visibility: hidden; clear:both; height:0; content:'' }

优点：简洁，没有其他问题
缺点：代码量看似略大

3.盒子模型，以及IE和其他浏览器的区别？

盒子模型由内往外分别包括：
content、padding、border、margin

上图为标准W3C盒子模型示意图，它的
width = content的宽度
height = content的高度
而IE盒子模型的
width = (content + padding + border) 的宽度
height = (content + padding + border) 的高度

4.CSS3新特性有哪些？

这个题答案就比较多了，建议大家回答一些比较常用的特别是自己用过的新特性，下面我简单介绍一些：
a.css选择器
(1）E:last-child 匹配父元素的最后一个子元素E。
(2）E:nth-child(n)匹配父元素的第n个子元素E。
(3）E:nth-last-child(n) CSS3 匹配父元素的倒数第n个子元素E。
b.加载字体
@font-face 可以用来加载字体样式，而且它还能够加载服务器端的字体文件，让客户端显示客户端所没有安装的字体。

@font-face { font-family: Runic; src:url(RUNICMT0.eot); }

c.圆角
设置border-radius属性
d.设置阴影
box-shadow / text shadow
属性值：水平移动距离 垂直移动距离 阴影距离 颜色

.shadow { box-shadow: 2px 2px 2px black; text-shadow: 2px 2px 2px black; }

e.多列布局
column-count 列数
column-gap 列之间的间隔大小
column-rule 列之间的分隔线

.column-container { column-count: 3; column-gap: 35px; column-rule: 1px solid gray; }

f.背景颜色渐变效果
linear-gradient(方向，初始颜色，结束颜色)

.gradient_bg { background-image : linear-gradient(to top, red, yellow); }

g.弹性盒子模型
即flex布局，这里不详细说明了，有兴趣的可以看：runboo上面的教程
h.过渡动画效果
transition:过渡属性 动画时间 动画类型 动画延迟时间

.transition-demo { transition:border-color .5s ease-in .1s; }

i.动画效果
animation:动画名称 动画时间 动画类型 动画延迟时间
@keyframes 动画名称 { 中间状态 }

.animation-demo { animation:mymove .5s ease-in .1s; } @keyframes mymove { 0% { opacity : 0 } 100% { opacity : 1 } } 5.em 和 rem 的区别？

em的值并不是固定的， em会继承父级元素的字体大小。看一下例子：

<style> .font-father { font-size: 1.5em; /* 实际为24px */ } .font-son { font-size: 1.5em; /* 实际为36px */ } </style> <div > <a>hello </a> <span >boy</span> </div>

而rem只会继承根元素root的字体大小，所以把上例中em都改成rem，就成了下图：

6.重排和重绘？