CSS面试知识点总结(持续更新...)

向右看齐 2022-11-04 02:01 300阅读 0赞

### CSS知识点 ###

*  1、介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？
 *  2、CSS 选择符有哪些？
 *  3. ::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。
 *  4、伪类与伪元素的区别
 *  5、CSS 中哪些属性可以继承？
 *  6、CSS 优先级算法如何计算？
 *  7、关于伪类 LVHA 的解释?
 *  8、CSS3 新增伪类有那些
 *  9、如何居中 div？
 *  10、display 有哪些值？说明他们的作用。
 *  11、position 的值 relative 和 absolute 定位原点是？
 *  持续更新中......

# 1、介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？ #

*  有两种盒子模型： IE盒模型（border-box）、W3C标准盒模型（content-box）
 *  盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分

IE盒模型和W3C标准盒模型的区别：

（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding  
（2）IE盒模型：属性width，height包含content、border和padding，指的是content  
\+padding+border。

**回答：**  
盒模型都是由四个部分组成的，分别是`margin、border、padding和content`。

标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同。标准盒模型的width和height属性的范围只包含了content，而IE盒模型的width和height属性的范围包含了border、padding和content。

我们可以通过修改元素的box-sizing属性来改变元素的盒模型。

--------------------

# 2、CSS 选择符有哪些？ #

（1）id选择器（\#myid）  
（2）类选择器（.myclassname）  
（3）标签选择器（div,h1,p）  
（4）后代选择器（h1 p）  
（5）相邻后代选择器（子）选择器（ul>li）  
（6）兄弟选择器（li~a）  
（7）相邻兄弟选择器（li+a）  
（8）属性选择器（a\[rel=“external”\]）  
（9）伪类选择器（a:hover,li:nth-child）  
（10）伪元素选择器（::before、::after）  
（11）通配符选择器（\*）

--------------------

# 3. ::before 和:after 中双冒号和单冒号有什么区别？解释一下这 2 个伪元素的作用。 #

在CSS3中`单冒号（:）`用于CSS3伪类，`双冒号（::）`用于CSS3伪元素。（伪元素由双冒号和伪元素名称组成）.为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号来表示伪元素。

伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。

*  想让插入的内容出现在其它内容前，使用::before，否者，使用::after；
 *  在代码顺序上，::after生成的内容也比::before生成的内容靠后。
 *  如果按堆栈视角，::after生成的内容会在::before生成的内容之上。

--------------------

# 4、伪类与伪元素的区别 #

css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说，伪类和伪元素是用来修饰不在文档树中的部分，比如，一句  
话中的第一个字母，或者是列表中的第一个元素。

伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。 比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。

伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。 比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。

--------------------

# 5、CSS 中哪些属性可以继承？ #

有继承性的属性：

（1）字体系列属性  
font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust

（2）文本系列属性  
text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、  
text-transform、direction、color

（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等属性

当元素的一个继承属性没有指定值时，则取父元素的同属性的计算值。 只有文档根元素取该属性的概述中给定的初始值（这里的意思应该是在该属性本身的定义中的默认值）。

当元素的一个非继承属性没有指定值时，则取属性的初始值initial value（该值在该属性的概述里被指定）。

> 注意：当一个属性不是继承属性时，可以使用`inherit`关键字指定一个属性应从父元素继承它的值，`inherit`关键字用于显式地指定继承性，可用于任何继承性/非继承性属性。

--------------------

# 6、CSS 优先级算法如何计算？ #

CSS的优先级是根据样式声明的特殊性值来判断的。

选择器的特殊性值分为四个等级，如下：

（1）标签内选择符x,0,0,0  
（2）ID选择符0,x,0,0  
（3）class选择符/属性选择符/伪类选择符 0,0,x,0  
（4）元素和伪元素选择符0,0,0,x

**计算方法：**

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

**计算实例：**

（1）`#demo a{color: orange;}`  
特殊性值：0,1,0,1  
（2）`div#demo a{color: red;}`  
特殊性值：0,1,0,2

> 选择器特殊性值的比较是从左向右排序的，也就是说以1开头的特殊性值比所有以0开头的特殊性值要大。

--------------------

# 7、关于伪类 LVHA 的解释? #

a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:`link、:visited、:hover、:active`；

a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active；

**当链接未访问过时：**

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

**当链接访问过时**，情况基本同上，只不过需要将:link换成:visited。

--------------------

# 8、CSS3 新增伪类有那些 #

（1）elem:nth-child(n)选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数  
值，也可以接受函数。

（2）elem:nth-last-child(n)作用同上，不过是从后开始查找。

（3）elem:last-child选中最后一个子元素。

（4）elem:only-child如果elem是父元素下唯一的子元素，则选中之。

（5）elem:nth-of-type(n)选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数。

（6）elem:first-of-type选中父元素下第一个elem类型元素。

（7）elem:last-of-type选中父元素下最后一个elem类型元素。

（8）elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选中该元素。

（9）elem:empty选中不包含子元素和内容的elem类型元素。

（10）elem:target选择当前活动的elem元素。

（11）:not(elem)选择非elem元素的每个元素。

（12）:enabled 控制表单控件的禁用状态。

（13）:disabled 控制表单控件的禁用状态。  
(14):checked单选框或复选框被选中。

--------------------

# 9、如何居中 div？ #

一般常见的几种居中的方法有：

对于宽高固定的元素

*  我们可以利用`margin:0 auto`来实现元素的水平居中。
 *  利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。
 *  利用绝对定位，先将元素的左上角通过`top:50%`和`left:50%`定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。
 *  利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过`translate`来调整元素的中心点到页面的中心。
 *  使用flex布局，通过`align-items:center`和`justify-content:center`设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。

> 对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。

--------------------

# 10、display 有哪些值？说明他们的作用。 #

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

--------------------

# 11、position 的值 relative 和 absolute 定位原点是？ #

**relative定位的元素**，是相对于元素本身的正常位置来进行定位的。

**absolute定位的元素**，是相对于它的第一个position值不为static的祖先元素的padding box来进行定位的。

> 这句话我们可以这样来理解，我们首先需要找到绝对定位元素的一个position的值不为static的祖先元素，然后相对于这个祖先元素的padding box来定位，也就是说在计算定位距离的时候，padding的值也要算进去。

**拓展：**

*  `fixed`（老IE不支持）生成绝对定位的元素，相对于浏览器窗口进行定位。
 *  `static` 默认值。没有定位，元素出现在正常的流中
 *  `inherit` 规定从父元素继承position属性的值。

--------------------

# 持续更新中… #