1. 盒子模型
1.1 标准盒子模型
标准盒子模型包括margin、border、padding、content，其中content只包括内容本身不包括其他内容，即内容的宽度和高度分别是content的高度和宽度。
1.2 IE盒子模型
IE盒子模型包括margin、border、padding、content，其中content包含了border和padding，即内容的宽度和高度分别是content + padding + boder 的宽度和高度。
1.3 两种盒子模型的切换
使用box-sizing: border-box切换为IE盒子模型，使用box-sizing: content-box 切换为标准盒子模型。
1.4 使用JS获取、设置盒子模型的宽高
1.4.1 方法一： 通过DOM结点
element.style.width / height
缺点： 不通用，只能获取行内样式，不能获取内嵌样式和外链样式。
1.4.2 方法二： 通用型
window.getComputedStyle(element).width / height
优点： 通用方法，Chrome和FireFox都能使用。
1.4.3 方法三： IE型
element.currentStyle.width / height
缺点： 通用方法，IE独享。
1.4.4 方法四：
element.getBoundingClientRect().width / height
1.5 边距重叠问题
边距重叠问题，即两个兄弟元素或父子元素之间竖直方向的margin不叠加，取用较大值。
1.6 解决边距重叠问题（BFC）
1.6.1 元素设置浮动float: left || right
1.6.2 元素设置overflow: hidden || auto;
1.6.3 元素设置position: absolute || fixed
1.6.3 元素设置display: flex || inline-block ||
2. CSS选择器
2.1 CSS选择器顺序
id 选择器 > 类选择器 = 伪类选择器 > 标签选择器
2.2 CSS选择器有哪些？
id 选择器、类选择器、标签选择器、伪类选择器、相邻选择器、子代选择器、后代选择器、通配符选择器、属性选择器。
2.3 CSS中可以继承的样式
font-size、color、font-family、text-indent。
3. link与import的区别
第一，link是HTML中的标签，而import则是由CSS提供的，虽然两者都是为页面添加样式，但是来源不同。
第二，link与页面同步加载，import是在页面加载完毕之后才开始进行加载。
第三，link的兼容性比import要好。
4. CSS3有哪些新特性
box-shadow、text-shadow、border-radius、gradient、transform、rgba、媒体查询、多栏布局、border-image。
5. 为什么要对CSS进行初始化
因为浏览器的兼容问题，每一个浏览器对某些标签的默认值是不同的，如果我们不对CSS进行设置，那么在页面中的展示效果就会不同。所以我们需要初始化CSS样式。
6. 三列布局的方法
6.1 方法一：浮动
使用 float，左侧设置float:left，右侧设置float: right，中间不设置。
需要注意的是在编写HTML的时候先左后右再中间。
6.2 方法二：定位
使用position，左侧设置position: absolute; left: 0; top: 0;，右侧设置position: absolute; right: 0; top: 0;，父级设置position: relative;。
这个方法不需要在意HTML中的位置。
6.3 方法三：flex布局
使用flex布局，父级设置display: flex;，中间设置flex: 1;即可。
6.4 方法四：grid布局
使用grid布局，父级设置display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns: 300px auto 300px;即可。
