CSS的盒子模型有哪些？
W3C标准盒模型：width=contntIE怪异盒模型：width=contnt+padding-lft+padding-right+bordr-lft+bordr-right
为什么要初始化CSS样式？
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
最简单的初始化方法就是：*{padding:0;margin:0;}（不建议）
CSS优先级如何计算？
同权重下，优先级就近原则（离被设置元素越近优先级别越高），载入样式以最后载入的为准：
内联样式表（标签内部）嵌入样式表（当前文件中）外部样式表（外部文件中）
不同权重下，优先级关系：
!important内联样式ID选择器类选择器=属性选择器=伪类选择器标签选择器=伪元素选择器通配符选择器计算选择符中ID选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按a、b、c的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中a、b、c都相等，则按照“就近原则”来判断
参考：CSS样式优先级
什么是FOUC？如何避免
FlashOfUnstyldContnt：用户定义样式表加载之前浏览器使用默认样式显示文档，用户样式加载渲染之后再从新显示文档，造成页面闪烁。解决方法：把样式表放到文档的had
考虑下面的代码，h1和p元素的margin-bottom的值分别应该是多少px？（假设h1和p是同级元素）。
html{font-siz:%;}h1{font-siz:m;margin-bottom:1m;}p{font-siz:1m;margin-bottom:1m;}
h1的margin-bottom是3px，p的margin-bottom是16px
这种现象的发生在于1m等同于它当前的font-siz。因为h1中的font-siz被设置为了m,其用在h1内的m来计算的属性，就为1m=3px。(对于大多数的用户(和浏览器)，font-siz的值为%，就会默认为16px，除非用户通过浏览器设置来改变font-siz的默认值)
引申部分：
面试题中，一般m会跟rm、px、vh、vw等单位进行比较使用场景和区别，px、m和rm应该是被比较的比较多的，简单介绍一下：
px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的，是一个虚拟单位。是计算机系统的数字化图像长度单位，如果px要换算成物理长度，需要指定精度DPIm是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对浏览器的默认字体尺寸。它会继承父级元素的字体大小，因此并不是一个固定的值rm是CSS3新增的一个相对单位(rootm,根m),使用rm为元素设定字体大小事，仍然是相对大小但相对的只是HTML根元素
推荐阅读：
关于vh、vw可以看看大漠的再聊移动端页面的适配95%的中国网站需要重写CSS媒体查询--PX,EMorREM?（关于文中提到的REMvsEM一文也推荐看一下）
题外：
上次在掘金上看到有人在争关于m的话题，一方说m是相对于父元素的大小，这也是网上被引用的比较多的解释，另一方说m是相对于自己本身的字体大小。争议的根源是font-siz具有继承性，它的对错请自己分辨，不过有争议是好事，争议让我们更深入的了解问题。（既然说到继承了，面试官会不会说：假设我们认为m是继承的，请用ES6面向对象简单还原一下我们的问题，然后又是其他一堆东西...）
css清除浮动的几种方式
clar:bothovrflow（hiddn和auto可以清除浮动，visibl不行）clarfix
clarfix方法一：
利用:aftr和:bfor来在元素内部插入两个元素块，其实现原理类似于clar:both方法（只使用clarfix:aftr时在跨浏览器兼容问题会存在一个垂直边距叠加的bug）
.clarfix:bfor,.clarfix:aftr{contnt:".";display:block;hight:0;visibility:hiddn;}.clarfix:aftr{clar:both;}.clarfix{zoom:1;}/*IE8*/
clarfix方法二：
Nicolsa在《BttrfloatcontainmntinIEusingCSSxprssions》中介绍的方法
.clarfix:bfor,.clarfix:aftr{contnt:"";display:tabl;}.clarfix:aftr{clar:both;ovrflow:hiddn;}.clarfix{zoom:1;/*IE8*/}
参考：ClarFloat
BFC是什么?怎么触发？有什么用？
BFC即BlockFormattingContxts(块级格式化上下文)，是W3CCSS.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
只要元素满足下面任一条件即可触发BFC特性：
body根元素浮动元素：float除non以外的值绝对定位元素：position(absolut、fixd)display为inlin-block、tabl-clls、flxovrflow除了visibl以外的值(hiddn、auto、scroll)
BFC作用：
不和浮动元素重叠清除元素内部浮动解决上下相邻两个元素重叠
推荐阅读：
BFC和hasLayout10分钟理解BFC原理
重绘和回流（重排）是什么，如何优化？
Rflow（回流）：当RndrTr中的一部分（或全部）因为元素的尺寸、布局、隐藏等改变而需要重新构建。这就称为回流Rpaint（重绘）：当RndrTr中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格、而不会影响布局的，就是重绘
重绘（Rpaint）不一定会引起回流（Rflow重排），但回流必将引起重绘（Rpaint）
导致Rflow（回流）的情况：
页面首次加载添加或者删除可见的DOM元素；元素位置改变；元素尺寸改变——边距、填充、边框、宽度和高度内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；页面渲染初始化；浏览器窗口尺寸改变——rsiz事件发生时；
减少回流、重绘其实就是需要减少对rndrtr的操作（合并多次多DOM和样式的修改），并减少对一些styl信息的请求，尽量利用好浏览器的优化策略。具体方法有：
直接改变classNam，如果动态改变样式，则使用cssTxt（考虑没有优化的浏览器）让要操作的元素进行离线处理，处理完后一起更新不要经常访问会引起浏览器flush队列的属性，如果你确实要访问，利用缓存让元素脱离动画流，减少回流的RndrTr的规模
参考：页面重绘和回流以及优化
rgba()和opacity的透明效果有什么不同？
rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）
如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60＊0ms＝16.7ms
怎么解决移动端Rtina屏幕1px边框问题？
viwport+rm实现0.5px方案bordr-imagbackground-imag多背景渐变实现使用box-shadow模拟边框伪类+transform实现
推荐阅读：
7种方法解决移动端Rtina屏幕1px边框问题再谈Rtina下1px的解决方案
csshack原理及常用hack
由于不同的浏览器和浏览器各版本对CSS的支持及解析结果不一样，以及CSS优先级对浏览器展现效果的影响，我们可以据此针对不同的浏览器情景来应用不同的CSS。
CSSHack大致有3种表现形式，CSS属性前缀法、选择器前缀法以及IE条件注释法（即HTML头部引用ifIE）Hack，实际项目中CSSHack大部分是针对IE浏览器不同版本之间的表现差异而引入的。
属性前缀法（即类内部Hack）：例如IE6能识别下划线""和星号"*"，IE7能识别星号"*"，但不能识别下划线""，IE6~IE10都认识"\9"，但firfox前述三个都不能认识。选择器前缀法（即选择器Hack）：例如IE6能识别html.class{}，IE7能识别+html.class{}或者*:first-child+html.class{}。IE条件注释法(即HTML条件注释Hack)：针对所有IE（注：IE10+已经不再支持条件注释）：IE浏览器显示的内容，针对IE6及以下版本：。这类Hack不仅对CSS生效，对写在判断语句里面的所有代码都会生效。
参考：史上最全的CSShack方式一览
css布局
一般布局相关的整理:
如何水平居中一个元素（区分单行、多行）如何竖直居中一个元素（区分居中元素有高度和没有高度的情况）左侧固定，右侧自适应右侧固定，左侧自适应两边固定，中间自适应Flx布局Grid布局
布局相关的文章：
盘点8种CSS实现垂直居中水平居中的绝对定位居中技术CSS布局方案一个完整的Flxbox指南CSSGrid布局这样玩（深入了解的话，里面链接的文章可以多看看）