【01】标准CSS盒模型和IE盒模型的区别
盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型宽高属性的范围只包含content，而IE盒模型的宽高属性范围包含了border、padding和content。
一般来说，我们可以通过修改元素的box-sizing属性来改变元素的盒模型。
拓展1：有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）
拓展2：盒模型有四部分构成：分为内容content、内边距padding、边框border和外边距margin
拓展3：在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则启用IE盒模型。如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C标准盒模型。
【02】::before和:after中双冒号和单冒号的区别
CSS3规定使用单冒号表示伪类，双冒号表示伪元素。但有时会发现，伪元素使用了单个冒号，这是由于旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。
【03】CSS中哪些属性可以继承
属性在定义中会给出该属性是否具有继承性，一个具有继承性的属性会在没有指定值的时候，使用其父元素同属性的值来作为自己的值。
当属性不是继承属性时，可以通过将其值设置为inherit来使其继承父元素同名属性的值。inherit关键字用于显式地指定继承性，可用于任何继承性/非继承性属性。
如下所示，为有继承性的属性。
1、字体相关属性：如font、font-family、font-weight、font-size、font-style等
2、文本相关属性：如color、text-indent、text-align等
3、表格布局属性：如caption-side、border-collapse、empty-cells
4、列表属性：list-style-type、list-style-image、list-style-position、list-style
5、光标属性：cursor
6、元素可见性：visibility
7、还有一些不常用的：speak，page，设置嵌套引用的引号类型quotes等属性【04】伪类和伪元素的区别
CSS引入伪类和伪元素专门用来修饰不在文档树中的部分，即格式化文档树以外的信息。
什么是伪类？
伪类没有单独的标签，只有触发特殊条件时才能看到，存在于DOM文档树，逻辑上存在，但在文档树中却无须标识的“幽灵”分类。
伪类本质上是为了弥补常规CSS选择器的不足，以便获取更多的信息。比如，当用户悬停在指定元素时，可以通过:hover为该元素添加样式。
什么是伪元素？
伪元素创建了一个有内容的虚拟容器。伪元素是虚拟元素，仅逻辑上存在，本身并不存在于DOM文档树中（ 元素结构存在，可以被CSS正常操作，但没有html结构）。比如通过::before在元素前增加文本，并为其添加样式，用户虽可以看到这些文本，但这些文本实际上是不在文档树中的。
一个标签诞生时，其逻辑的最前面位置和最后面位置，各有一个伪元素，平常看不到，可以通过伪元素选择器选中并修改。
伪元素可当作正常inline元素来操作。content属性是伪元素独有的，可以修改伪元素的内容。
区别？
根本区别：是否创造了新的元素，新创造的元素即为 "伪元素" 。
伪类一般匹配元素的一些特殊状态，，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。
注意
CSS3规定伪元素使用两个冒号，伪类使用一个冒号，用以区分伪类和伪元素。
但有时会发现，伪元素使用了单个冒号，这是由于旧版本的W3C规范并未对此进行特别区分，因此目前绝大多数的浏览器都支持使用这两种方式表示伪元素。
【05】CSS选择器的种类
id选择器
类选择器
标签选择器（div,h1,p）
后代选择器（h1 p）
相邻后代选择器（子）选择器（ul>li）
兄弟选择器（li~a）
相邻兄弟选择器（li+a）
属性选择器（a[rel="external"]）
伪类选择器（a:hover,li:nth-child）
伪元素选择器（::before、::after）
通配符选择器（*）【06】CSS优先级算法如何计算
权重越大，优先级越高。
相同权重的声明，根据样式的引入顺序，后声明的优先级高。
【07】关于伪类LVHA的解释
a标签有四种状态，分别是链接访问前、链接访问后、鼠标滑过、激活。
a标签的四种状态分别对应四种伪类：:link、:visited、:hover、:active。
当链接未访问时
当鼠标划过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪类后面声明。
当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式，必须将:active声明放到:link和:hover之后。因此得出LVHA这个顺序
当链接访问过时：情况基本同上，只不过需要将:link换成:visited
注意：这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，也就不存在覆盖的问题。
a:link { color: red; }
a:visited { color: green; }
a:hover { color: blue; }
a:active { color: black; }【08】CSS3新增伪类有哪些
fatherElem:nth-child(n)：选中父元素下的第n个子元素
fatherElem:nth-last-child(n)：作用同上，不过从后开始查找
fatherElem:last-child：选中最后一个子元素
fatherElem:only-child：匹配属于父元素中唯一子元素的元素
elem:nth-of-type(n)：匹配elem类型中的第n个同级兄弟元素
elem:first-of-type：匹配elem类型中的第1个同级兄弟元素，相当于:nth-of-type(1)
elem:last-of-type：匹配elem类型中的最后1个同级兄弟元素
elem:only-of-type：如果父元素中有唯一一个elem类型的子元素，则选中该子元素
elem:empty：匹配不包含子元素和内容的elem类型的元素
elem:target：匹配当前活动的elem元素
fatherElem:not(elem)：匹配非elem类型的每个子元素
:enabled：匹配每个启用的表单元素
:disabled：匹配每个禁用的表单元素
:checked：用于单选按钮和复选框，匹配已被选中的元素，只有opera浏览器支持【09】如何居中div
（1）水平居中
方法一：给div设置一个宽度，然后添加margin:0 auto。
div {
width: 200px;
margin: 0 auto;
}方法二：利用text-align:center和font-size:0。
.container {
background: rgba(0, 0, 0, 0.5);
text-align: center;
font-size: 0;
}
.box {
display: inline-block;
width: 500px;
height: 400px;
background-color: pink;
}注意：文本节点默认会占据一些宽度，font-size等于0可以取消这些莫名奇妙的宽度。
（2）水平+垂直居中
方法一：利用绝对定位和margin: auto（未知容器的宽高）
div {
position: absolute;
width: 300px;
height: 300px;
margin: auto; /*添加top/left/bottom/right都为0后，可以对应方向实现平分*/
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: pink; /*方便看效果*/
}方法二：利用绝对定位和margin: -100px 110px;（已知容器的宽高）
/*确定容器的宽高宽500高300的层设置层的外边距
div{*/
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
margin: -150px -250px;/*外边距为自身宽高的一半*/
background-color: pink;/*方便看效果*/
}方法三：利用绝对定位和transform属性（未知容器的宽高）
/*未知容器的宽高，利用`transform`属性*/
div {
position: absolute;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: pink; /*方便看效果*/
}方法四：利用弹性布局
/*利用flex布局实际使用时应考虑兼容性*/
.container {
display: flex;
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}
.containerdiv {
width: 100px;
height: 100px;
background-color: pink; /*方便看效果*/
}（3）总结：
1.设置div宽度后，利用margin:0 auto来实现元素的水平居中
2.利用text-align:center和font-size:0来实现元素的水平居中
3.绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心，可以实现水平和垂直方向上的居中
4.绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心，可以实现水平和垂直方向上的居中
5.绝对定位，设置四个方向的值都为0，设置margin:auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中
6.使用弹性布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中
对于宽高不定的元素：
（4）（5）（6）方法，可以实现元素的垂直和水平的居中【10】display有哪些值
1、block：块级元素。默认宽度为父标签宽度，可设置宽高，换行显示
2、inline：行级元素。默认宽度为内容宽度，不可设置宽高，同行显示
3、inline-block：行级块元素。默认宽度为内容宽度，可设置宽高，同行显示
4、none：元素不显示，并从文档流中移除
5、inherit：规定应该从父元素继承display属性的值
6、table：当前标签作为块级表格来显示
7、list-item：当前标签当作块级列表来显示，并添加样式列表标记【11】当元素处于不可见状态时，scrollTop无效
不一定，通过CSS属性display:none隐藏元素时，设置scrollTop属性无效。但使用visibility隐藏元素，scrollTop属性是有效的。
因为，通过CSS属性display:none隐藏元素时，元素并没有被渲染到页面上，浏览器无法计算位置信息，无法准确处理滚动位置。