1、两种CSS盒模型？
在使用CSS进行布局和设计时，所有的HTML元素都可以看作一个盒子模型，包括外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。如下图
- 标准盒模型（
box-sizing: content-box）与怪异（IE）盒模型（box-sizing: border-box）的区别：前者content的宽度/高度不变，后者的content的宽度/高度把padding和border部分也计算进去。
2、水平居中的方法？
- 元素为行内元素，设置父元素
text-align: center - 如果元素宽度固定，可以设置左右
margin: 0 auto; - 如果元素为绝对定位，设置父元素
position: relative，元素设left: 0；right: 0；margin: auto; - 使用
flex-box布局，指定justify-content: center； display设置为tabel-ceil；
3、垂直居中的方法？
- 使用
display: flex布局，用align-item: center实现； - 绝对定位中设置
top: 0和bottom: 0，margin: 0 auto实现； - 绝对定位中固定高度时设置
top:50%，margin-top值为高度一半的负值； - 文本垂直居中设置
line-height为height值。
4、flex布局的用法和常用属性？
flex布局即弹性布局，可以通过display: flex来设置一个弹性容器，容器内的子元素会根据设置的属性进行排列；
常用的属性：flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content。
5、BFC规范？
块格式化上下文(Block Formatting Context，BFC)是Web页面中盒模型布局的CSS渲染模式。它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用，主要体现在浮动清除、浮动定位和阻止父子元素的margin折叠。
创建规则：
-
根元素
-
浮动元素（
float不取值为none） -
绝对定位元素（
position取值为absolute或fixed） -
display取值为inline-block、table-cell、table-caption、flex、inline-flex之一的元素 -
overflow不取值为visible的元素
6、清除浮动的方法
常用的方法有:
overflow: hidden或者overflow: auto;- 在浮动元素之后添加一个空元素如
<div class="clear"></div>，通过CSS赋予clear: both； - 给浮动元素的容器添加一个
clearfix的class，然后给这个class添加一个:after伪元素实现元素末尾添加一个看不见的块元素清除浮动。
总结：要么使用clear属性，要么触发浮动元素父元素的BFC，使父元素可以包含浮动元素。
7、CSS优先级？
- 优先级就近原则，同权重情况下样式定义最近者为准；
- 载入样式以最后载入的定位为准；
- 优先级为:
!important> 行内样式 >id>class>tag> 通配符 > 系统默认;
8、LESS和Sass?
他们是CSS预处理器。他是CSS上的一种抽象层。他们是一种特殊的语法/语言编译成CSS。
例如Less是一种动态样式语言. 将CSS赋予了动态语言的特性，如变量，继承，运算， 函数. LESS 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可一在服务端运行 (借助Node.js);
而Sass 是一款强化CSS的辅助工具，它在CSS语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令CSS 更加强大与优雅。使用Sass以及Sass的样式库（如 Compass)有助于更好地组织管理样式文件，以及更高效地开发项目。需要Ruby环境
9、CSS3的animation？
animation是css3新增的动画属性，这个css3动画的每一帧是通过@keyframes来声明的，keyframes声明了动画的名称，通过from、to或者是百分比来定义。
