css盒模型
参考答案
（1）有两种， IE 盒子模型（怪异盒模型）、W3C 盒子模型（标准盒模型）；
（2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)；
（3）区 别： IE的content部分把 border 和 padding计算了进去;
另附详细解释：
BFC是什么,详解BFC、IFC、GFC、FFC
CSS中的BFC详解
清除浮动
移动端h5布局，都用到了哪些？
rem：实现原理
百分比
vw、vh
弹性flex：flex各个属性了解一下，熟记！
box布局、grid布局了解一下吧
flex布局,讲flex，手写出flex常用的属性，并且讲出作用
rem em布局
移动端1px问题
css选择器的优先级
参考答案
!important > 行内样式 > ID选择器 > 类选择器 > 元素 > 通配符 > 继承 > 浏览器默认属性
同一级别css引入方式不同，优先级不同 总结排序：内联(行内)样式 > 内部样式表 > 外部样式表 > 导入样式
同一元素的同一个属性 优先级：id选择器 > class选择器 > 标签选择器
如何垂直居中？
1.
display:table
display:table-cell; vertical-align:middle;
2.
display:flex;
align-iterms:center;
3.
position:absolute;
top:50%；
margin: -xxpx;
4.
position:absolute;
top:50%;
transform:translate(0, -50%);
5.
position:absolute;
top:calc(50% - xxpx);
css画三角形？
单行或多行省略
will-change
css实现图片自适应宽高
CSS选择符有哪些？哪些属性可以继承？
参考答案
1. id选择器（ # myid）
2.类选择器（.myclassname）
3.标签选择器（div, h1, p）
4.相邻选择器（h1 + p）
5.子选择器（ul > li）
6.后代选择器（li a）
7.通配符选择器（ * ）
8.属性选择器（a[rel = "external"]）
9.伪类选择器（a:hover, li:nth-child）
* 可继承的样式： font-size font-family color, UL LI DL DD DT;
* 不可继承的样式：border padding margin width height ;
浅谈translate属性与相对定位、绝对定位的区别
参考答案
使用 CSS3 translate 属性和绝对定位、相对定位属性加上 top、left 数值都可以使元素产生位移，但存在细微差别，表现在offsetLeft 和 offsetTop 属性。使用绝对定位、相对定位属性加上 top、left ，会影响offsetTop和 offsetLeft 的值；
使用translate，offsetTop和 offsetLeft 与没有产生位移的元素没有区别，即无论translate 的值为多少，这offsetTop和 offsetLeft 的值都是固定不变的。
eg1：相对定位或绝对定位+left和top属性
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
position: relative; /*或position: absolute;*/
width: 200px;
height: 200px;
background-color: red;
top: 100px;
left: 200px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById("container");
console.log(container.offsetLeft); //200
console.log(container.offsetTop);//100
</script>
</body>
</html>
eg2：translate属性
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#container {
position: relative; /*或position: absolute;*/
width: 200px;
height: 200px;
background-color: red;
transform: translate(300px,100px);
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var container = document.getElementById("container");
console.log(container.offsetLeft);//0
console.log(container.offsetTop);//0
</script>
</body>
</html>
一篇文章说清浏览器解析和CSS（GPU）动画优化
伪类和伪元素
less、scss区别(了解一下就行，我没碰到过)
less循环生成类
移动端兼容问题都遇到过哪些？怎么解决的？
其他优秀的面试题合集地址：
