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 默认是相对于元素的中间部分进行缩放的。