我对问题进行了分类整理，并给了自己的回答。大部分知识点都有专题链接（来源于本博客相关文章），用于自己前端CSS部分的查漏补缺。虽作为一个面试资料，但感觉也能帮助前端新手梳理CSS的知识点。
CSS 边框的基础使用
图1为border最普遍的用法，border: solid 10px #ffb6b9;。用多了你会不会就觉得border是由四个矩形边框拼接而成，但其实是错的。实际上，元素的border是由三角形组合而成，为了说明这个问题，我们继续看：
图2，我们为边框四个方向设置不同颜色，border-color: #ffb6b9 #fae3d9 #bbded6 #8ac6d1;，并加大边框宽度。
图3，我们进一步将元素的宽高设为0。我们发现，此时元素由上下左右4个三角形组成。
为了实现一个三角形，那就很简单了，我们只需将其它border边的颜色设置为白色或者透明色即可
图4，border-color: transparent transparent #bbded6;，设置上三角，左右三角为透明，那么我们就能看到一个图4的三角形了。
.triangle { width: 0; height: 0; border: 50px solid; border-color: transparent transparent #bbded6; } 水平垂直居中个人常用的水平垂直居中方法，具体的可以戳链接我写的很全，在本文里只提供思路。
水平垂直居中无非分成内联元素的居中和块级元素的居中。最简单的方法就是使用flex布局，但要注意浏览器兼容性问题，包括后面提到的transform。
内联元素的水平和垂直居中分别可以使用text-align: center;和line-height解决
块级元素的水平和垂直居中又需要考虑这个元素的宽高是否固定，如果固定则定位和margin的auto属性就能解决。例：
#container{ width: 1000px; height: 1000px; position: relative; } #center{ width: 100px; height: 100px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; }还有一种方法，拿水平居中来举例：
step1：left:50%; 将子元素定位到父元素1/2宽的位置
step2：margin-left:-1/2自身宽 将子元素向左移动自身宽度的一半
当宽高不固定的时候，也可以使用transform:translateX(-50%)来实现step2。
由于使用了float后，浮动元素脱离了普通文档流，因此块级元素常用的margin:auto无效了。改用定位的方法（即上面提到的step1、step2）
好，正文开始。
▶盒子模型 介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？每一个盒子都被划分为四个区域：内容区、内边距区、边框区、外边区。
样式设置里with和height指的内容区的宽高。
标准盒子模型：padding、border和margin不会影响content的尺寸，但是会增加元素框的总尺寸。
IE盒子模型：内容区大小包含了padding、border。
box-sizing属性？用来控制元素的盒子模型的解析模式，默认值为content-box
context-box：联想W3C的标准盒子模型。元素盒子的width和height属性指的是内容盒子，这时候添加边框和内边距不会影响内容盒子的大小，但会导致整个元素盒子变大。
border-box：联想IE传统盒子模型。width和height属性的值将会包含padding和border，从视觉上规定了箱子的大小。
▶样式与选择器 为什么要初始化CSS样式因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
CSS 预处理器用的最多的：Less、Scss、Stylus
CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，例如你可以在CSS中使用变量、简单的逻辑程序、函数等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处。
CSS优先级算法如何计算？必看-一定要搞懂的选择器优先级和权重问题