20210128 104道常见经典CSS面试题笔记(1-10)

1 标准的CSS盒子模型和低版本的IE盒子模型有什么不同？
盒模型是由四个部分组成，分别是margin，border，padding和content。
标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的范围只包含了content，而IE盒模型的width和height属性的范围包含了border，padding和content。
一般来说，可以通过修改元素的box-sizing属性来改变元素的盒模型

2 CSS选择符有哪些？
id选择器 #id
类选择器 .myClassName
标签选择器 div h1 p
后代选择器 h1 p
相邻后代选择器 ul>li
兄弟选择器 li~a
相邻兄弟选择器 li+a
属性选择器 a[rel=“external”]
伪类选择器 a:hover li:nth-child
伪元素选择器 ::before ::after
通配符选择器 *

3 ::before和::after中双冒号和单冒号有什么区别？两个伪元素的作用
单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素
双冒号是在当前规范中引入的，用于区分伪类和伪元素。不过浏览器需要同时支持旧的已经存在的伪元素写法，比如 :first-line,:first-letter,:before,:after等
而新的在CSS3中引入的伪元素则不允许再支持旧的单冒号写法
想让插入的呢日出现在其它内容前，使用::before，否则使用::after
在代码顺序上，::after生成的内容也比 ::before生成的内容靠后。
如果按堆栈视角 ::after生成的内容会在 ::before生成的内容之上。

4 伪类和伪元素的区别
CSS引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句话中的第一个字母，或者是列表中的第一个元素。
伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，可以通过:hover来描述这个元素的状态。
伪元素用于创建一些不在文档中的元素，并为其添加样式。它们允许为元素的某些部分设置样式。比如说可以通过::before来在一个元素前添加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

5 CSS中哪些属性可以继承
每个CSS属性定义的概述都指出了这个属性是默认继承还是不继承的，这决定了当没有为元素的属性指定值时该如何计算。
当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。
当元素的一个非继承属性没有指定值时，则取属性的初始值initial value。
有继承的属性:
字体系列属性
font, font-family, font-weight, font-size, font-style, font-variant, font-stretch, font-size-adjust
文本系列属性
text-indent, text-align, text-shadow, line-height, word-spacing, letter-spacing, text-transform, direction, color
表格布局属性
caption-side, border-collapse, empty-cells
列表属性
list-style-type, list-style-image, list-style-position, list-style
光标属性
cursor
元素可见性
visibility
不常用属性
speak, page, quotes
注意:当一个属性不是继承属性时，可以使用inherit关键字指定一个属性应从父元素继承它的值，inherit关键字用于显式的指定继承性，可用于任何继承性/非继承性属性

6 CSS优先级算法如何计算
CSS的优先级是根据样式声明的特殊性值来判断的。
选择器的特殊性值分为四个等级
标签内选择符 x，0，0，0
ID选择符 0，x，0，0
class选择符/属性选择符/伪类选择符 0，0，x，0
元素和伪元素选择符 0，0，0，x
计算方法

1. 每个等级的初始值为0
2. 每个等级的叠加为选择器出现的次数相加
3. 不可进位 比如 0，99，99，99
4. 依次表示为 0，0，0，0
5. 每个等级计数之间没关联
6. 等级判断从左向右，如果某一位数值相同，则判断下一位数值
7. 如果两个优先级相同，则最后出现的优先级高 ！important也适用
8. 通配符选择器的特殊性值为 0，0，0，0
9. 继承样式优先级最低，通配符样式优先级高于继承样式
10. !important它没有特殊性值，但它的优先级是最高的，为了方便记忆，可以认为它的特殊性值为1，0，0，0
    计算实例:

#demo a{color:red;} // 特殊性值 0,1,0,1
div#demo a{color:orange;} // 特殊性值 0,1,0,2

注意：

1. 样式应用时 CSS会先查看规则的权重 !important，加了权重的优先级最高，当权重相同的时候会比较规则的特殊性
2. 特殊性值越大的声明优先级越高
3. 相同特殊值的声明，根据样式引入的顺序，后声明的规则则优先级高
4. 部分浏览器由于字节溢出问题出现的进位表现不做考虑

7 关于伪类LVHA的解释
a标签有四种状态:链接访问前，链接访问后，鼠标滑过，激活，分别对应四种伪类:link，:visited，:hover，:active
当链接未访问时:

1. 鼠标滑过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪类后声明;
2. 当鼠标点击激活a链接时，同时满足:link,:hover,:active三种状态，要显示a标签激活时的样式。必须将;active声明放到:link和:hover之后，因此得出LVHA这个顺序

当链接访问过时:
情况基本同上，只不过需要将:link换成:visited
这个顺序是可以改变的，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没有被访问，不可能同时满足。

8 CSS3新增伪类有哪些

elem:nth-child(n) /*选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数值，也可以接受函数*/
elem:nth-last-child(n) /*作用同上 不过从后开始查找*/
elem:last-child /*选中最后一个子元素*/
elem:only-child /*如果elem是父元素下唯一的子元素，则选中*/
elem:nth-of-type(n) /*选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数*/
elem:first-of-type /*选中父元素下第一个elem类型元素*/
elem:last-of-type /*选中父元素下最后一个elem类型元素*/
elem:only-of-type /*如果父元素下的子元素只有一个elem类型元素，则选中该元素*/
elem:empty /*选中不包含子元素和内容的elem类型元素*/
elem:target /*选择当前活动的elem元素*/
:not(elem) /*选择非elem元素的每个元素*/
:enabled /*控制表单控件的禁用状态*/
:disabled /*控制表单控件的禁用状态*/
:checked /*单选框或复选框被选中*/

9 如何居中DIV
可参考我的另外一篇文章
如何让一个div水平垂直居中
总结一般常见的几种居中方法

1. 利用margin 0 auto来实现元素的水平居中
2. 利用绝对定位
3. 使用flex布局

10 dispaly有哪些值 分别的作用
block 块类型 默认宽度为父元素宽，可设置宽高，换行显示。
none 元素不显示 并从文档流中移除。
inline 行内元素类型 默认宽度为内容宽度 不可设置宽高 同行显示。
inline-block 默认宽度为内容宽度，可以设置宽高，同行显示。
list-item 像块类型元素一样显示，并添加样式列表标记。
table 此元素会作为块级表格来显示。
inherit 规定应该从父元素继承display属性的值