CSS

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;即可。