考点 1：初始化样式
问题
- 什么是 CSS 初始化？并说说为什么要初始化 CSS 样式？
答案
CSS 初始化是指：开发者对浏览器的默认样式进行重置。
1、浏览器差异 因为浏览器的兼容问题，不同的样式会有默认初始样式，margin 和 padding，下划线等等，浏览器不同， 数值还不一样，如果直接写样式，会出现差异，布局出现错乱，所以要初始化样式，达到统一的布局。
2、提高编码质量 初始化 CSS 后，可以让开发者省去很多写单独兼容的代码，减少代码体积，节约网页下载时间；还会使得我们开发网页内容时更加方便简洁，开发者就不用考虑太多基础样式的兼容问题了。
考点 2：关于盒模型
问题
- 请说出你对盒模型的理解。
答案
理解：我们可以把页面上所有的html 元素都可以看作是盒子，也就是说整个 html 页面就是由无数个盒子通过特定的布局结合在一起的。 每个盒子由 4 部分构成：外边距 margin、内边距 padding、内容 content、边框 border。如下图：
而目前市面上存在 2 中盒模型：标准盒模型 和IE 盒子模型，它俩对计算宽度和高度的不同。先说标准盒模型，也就是 W3C 规定的盒子模型。
在标准模式下： 盒子总宽度 = width + padding + border + margin。盒子总高度 = height + padding + border + margin。
也就是（划重点啦!!!!）我们设置的 width/height 只是内容 content（上图橙色的部分）的宽/高度，不包含 padding 和 border 值 。
反过来，我们再看看 IE 盒子模型，又称怪异盒模型。
在 IE 盒子模型下： 盒子总宽度 = width+ margin = (内容区宽度 + padding + border) + margin。盒子总高度 = height + margin = (内容区高度 + padding + border) + margin。 也就是我们设置的 width/height 包含了 padding 和 border 值（如上图橙色+浅绿色+黄色三部分）。总结：标准盒子模型和 IE 盒子模型的差别就在于宽度和高度包含的范围不同。
注意啦！加分项来了：拓展到 CSS3 的 box-sizing 新特性 CSS3 新增了 box-sizing 属性，它可以让开发者指定盒子模型种类。
值为 content-box：padding 和 border 不算在我们设置的 width/height 里面。也就是说，指定盒子模型为标准盒模型。
值为 border-box：padding 和 border 算在了我们设置的 width/height 里面。也就是说，也就是指定盒子模型为 IE 盒子模型。
考点 3：隐藏元素
问题
- 请说说隐藏一个元素的几种方法，以及它们之间的区别。
答案
第 1 种：设置元素的 display 为 none 是最常用的隐藏元素的方法。 将元素设置为 display:none 后，元素在页面上将彻底消失，元素本来占有的空间就会被其他元素占有，也就是说它会导致浏览器的重排和重绘。
第 2 种：设置元素的 visibility 为hidden。 和 display:none 的区别在于，元素在页面消失后，其占据的空间依旧会保留着，所以它只会导致浏览器重绘而不会重排，适用于那些元素隐藏后不希望页面布局会发生变化的场景。
第 3 种：设置元素的 opacity 为 0。 这种方法和 visibility:hidden 的一个共同点是元素隐藏后依旧占据着空间，但我设置透明度为 0 后，元素只是隐身了，它依旧存在页面中。
注意：加分项来啦！！！拓展到三种隐藏元素的对于点击事件绑定的区别 如果对这 3 中不同隐藏元素的 dom 节点绑定其点击事件，会有下面的结论： display:none：元素彻底消失，很显然不会触发其点击事件 visibility:hidden：设置元素的 visibility 后无法触发点击事件，说明这种方法元素也是消失了，只是依然占据着页面空间。 opacity:0：可以触发点击事件，原因也很简单，设置元素透明度为 0 后，元素只是相对于人眼不存在而已，对浏览器来说，它还是存在的，所以可以触发点击事件。
考点 4：清除浮动
问题
- 请你说出你用过清除浮动的几种办法，以及它们的优缺点。
答案
第 1 种：在最后一个浮动标签后，新加一个标签，给其设置 clear：both；
使用这种办法，如果我们清除了浮动，父元素自动检测子盒子最高的高度，然后与其同高。优点：通俗易懂，方便。 缺点：添加无意义标签，语义化差，所以不建议使用。
第 2 种：给父元素添加 overflow:hidden。
优点：代码简洁。 缺点：如果内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素，因为设置了 overflow：hidden，看具体情况来决定是否使用。
第 3 种：使用 after 伪元素清除浮动。
优点：符合闭合浮动思想，结构语义化正确. 缺点：ie6-7 不支持伪元素 :after，使用zoom:1 触发 hasLayout。整体相对来说，推荐使用 after 伪元素来清除浮动。
考点 5：CSS3 新特性
问题
请说出你使用过哪些 CSS3 新特性？border-radius
答案
border-radius：用于实现圆角。box-shadow：用于实现阴影。 border-image：用于实现边框图片。text-shadow：用于实现文字阴影。 linear-gradient：用于实现背景线性渐变。 transform：用于实现元素变形，包括旋转 rotate、扭曲 skew、缩放 scale 和移动 translate 以及矩阵变形matrix。 transition：用于在一定的时间区间内，把元素从一种状态平滑地过渡到另一种状态。animation：结合@keyframes 创建实现动画。
问题
请说出 CSS3 新增伪类有哪些？分别代表什么含义？
答案
p:first-of-type 选择属于其父元素的首个元素。p:last-of-type 选择属于其父元素的最后元素。p:only-of-type 选择属于其父元素唯一的元素。p:only-child 选择属于其父元素的唯一子元素。p:nth-child(2) 选择属于其父元素的第二个子元素。 :enabled :disabled 表单控件的禁用状态。 :checked 单选框或复选框被选中。
考点 6：样式优先级
问题
CSS 样式的优先级是怎么样的？
答案
!important > 内联样式 > ID 选择器 > 伪类 > 属性选择器 > 类选择器 > 标签选择器 > 通配符（*） 。如非特殊情况，慎用!important。因为使用!important 会扰乱原本层叠和权重产生正常的作用顺序，使后期维护带来麻烦。
考点 7：单位对比
问题
请说出你常用的几个 CSS 单位，比如：px，em，rem 等。
答案
px：最常用的，它是相对于显示器屏幕分辨率而言的。 优缺点：比较稳定和精确，但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。
em：相对单位，基准点为父节点字体的大小，如果自身定义了 font-size 按自身来计算（浏览器默认字体是 16px），整个页面内 1em 不是一个固定的值。 优缺点：em 的值并不是固定的，它会继承父级元素的字体大小。
rem：相对单位，基于 root 元素，即根据 html 元素的大小来计算，不受容器本身字体大小的影响，全部根据 html 的字体大小重新计算。设定根元素的font-size 属性，默认为 16px，那么 1rem = 16px。 优缺点：这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。
考点 8：技巧题
问题
用纯 CSS 创建一个三角形的原理是什么？
答案
技巧：采用的是相邻边框链接处的均分原理，将元素的宽高设为 0，只设置 border , 将任意三条边隐藏掉 （颜色设为 transparent ），剩下的就是一个三角形。
问题
怎么让 Chrome 支持小于 12px 的文字？
答案
技巧：针对 chrome 浏览器，加webkit 前缀，用 transform:scale()这个属性进行放缩。
问题
CSS 如何去除 inline-block 元素间的间距？
答案
我们使用 CSS 把非 inline-block 的元素改为inline-block 的时候，元素之间就会产生默认的间距。 技巧：使用 font-size:0。这个方法基本上可以解决大部分浏览器下 inline-block 元素之间的间，不过 Chrome 浏览器默认有最小字体大小限制，因为，考虑到兼容性，我们还需要添加：-webkit-text-size-adjust。
问题
CSS 如何实现单行文本溢出显示省略号？
答案
技巧：用 text-overflow:ellipsis 属性，还需要加宽度 width 属来兼容部分浏览器。
问题
CSS 如何实现多行文本溢出显示省略号？（注意是多行）
答案
技巧：用 box-orient 和 line-clamp 属性，还需要加 width 和overflow。
问题
如何修改 chrome 记住密码后自动填充表单的黄色背景 ？
答案
技巧：用-webkit-autofill 属性。
问题
让页面里的字体变清晰，变细用 CSS 怎么做？
答案
技巧：用 -webkit-font-smoothing 属性。 -webkit-font-smoothing: antialiased; 注 意 : -webkit-font-smoothing 在 window 系 统 下 没 有 起 作 用 ， 但 是 在 IOS 设 备 上 起 作 用 -webkit-font-smoothing：antialiased 是最佳的，灰度平滑。
考点 9：编程题
问题
编程题：如何用 CSS 实现多列等高布局，即需要每个列的高度能与最高的那个列等齐？
答案
方法一：使用 padding 和 margin 实现。
方法二：使用 display:table 实现。
方法三：使用 flex 实现。
问题
编程题：如何用 CSS 实现一个不定宽高的盒子能够水平垂直居中？
答案
核心是使用 justify-content 和 align-items 实现。
感谢视频号「翻身的码农」作者：大成子
