CSS 类型 ​

什么是 CSS3 盒子模型？ ​

详细讲解：css3 盒子模型

一句话回答面试官：盒子模型主要分为两种， IE 盒模型和 W3C 盒模型。例如 IE 盒模型中，盒子的 width 宽度是包含 border 边框 和 padding 内边距，而 W3C 盒模型则是不包含。在 css3 新标准中添加了 box-sizing 属性，可以切换两种盒模型，分别是 content-box 和 border-box。

css3 新特性有哪些？ ​

详细讲解：css3 新特性

一句话回答面试官： css3 新特性主要包含了盒子模型、圆角、阴影、渐变色、动画、flex 布局、选择器等。

注意：面试官可能会二次提问什么是 flex 布局。

css 选择器有哪些？ ​

详细讲解：css 选择器

一句话回答面试官：css 选择器包含了 id 选择器、类选择器、标签选择器、属性选择器、后代选择器、子代选择器、伪类选择器、伪元素选择器等。

注意：面试官可能会二次提问 css 选择器权重如何划分。

css 选择器权重如何划分？ ​

详细讲解：权重划分

一句话回答面试官：正常情况下，!important 的优先级是最高，其次就是内联样式，然后到 ID 选择器、类选择器，最后是其他选择器。但是子代和后代选择器不同，选择的层级越深则是优先级越高。

什么是 flex 布局？ ​

详细讲解：flex 布局

一句话回答面试官：flex 是目前比较流行的一种布局，因为它十分简单灵活，可以轻松实现大多数网页布局。主要通过主轴和交叉轴进行改变布局，例如通过 justify-content: center 和 align-items: center 可以实现子元素水平垂直居中效果，或者通过 flex-direction 属性可以改变主轴的方向。

注意：如果面试官要考察你的 css，那么 flex 一定会提问。

如何让一个元素水平垂直居中？有几种方式？ ​

详细讲解：实现元素水平垂直居中效果

一句话回答面试官： 有三种实现方式，第一种是通过 flex 实现，第二种是结合绝对定位和 margin 实现，第三种是结合绝对定位和 transform 实现。例如 flex 方式可以通过 justify-content: center 和 align-items: center 可以实现子元素水平垂直居中效果。

绝对、相对、固定定位三者有什么区别？ ​

详细讲解：绝对、相对、固定定位三者区别

一句话回答面试官：默认都是文档流布局方式，元素会挨个进行排列。但是设置了绝对定位，该元素就会脱离文档流，并且可以相对某个元素进行定位，就会用到相对定位。固定定位和绝对定位很像，但是固定定位不受相对定位影响。

CSS3 动画能实现哪些过渡效果？ ​

详细讲解：动画相关

一句话回答面试官：css 2D 动画可以实现让元素水平移动、放大缩小、旋转、变形、渐隐渐显等过度效果。3D 动画在 2D 的基础上，可以额外实现对 X、Y、Z 三个轴的方向移动。

如何实现小于 12px 的字体？ ​

详细讲解：实现小于 12px 的字体

一句话回答面试官：浏览器默认的最小字号是 12px，可以通过 zoom 或者 transform scale 的方式实现。其中两者最主要的区别是 zoom 的缩放会让其占据的空间发生变化，而 transform scale 却不会。另外 transform scale 默认是相对于元素的中间部分进行缩放的。