CSS面试题

1. CSS中的盒模型

CSS中盒模型有两种：标准盒模型和IE盒模型，盒模型都是由四个部分组件，分别是：

content：内容区域，即元素的实际内容，如文本、图片等。
padding：内边距，元素内容与边框之间的空间。
border：边框，元素的边界线。
margin：外边距，元素与其他元素之间的空间。

不同模型的区别：

标准盒模型的width和height属性范围只包含了content，不包括padding、 border。
IE盒模型的width和height属性范围包含了content、padding、border。

可以根据box-sizing属性来选择不同的盒模型：

content-box：标准盒模型（默认值），width和height属性范围只包含了content，不包括padding、 border。
border-box：IE盒模型，width和height属性范围包含了content、padding、border。

2. 说下以下元素获取尺寸的区别

dom.style.width
getComputedStyle(dom).width
dom.clientWidth
dom.getBoundingClientRect().width

1. dom.style.width

获取元素的内联样式宽度，单位是像素（px）。如果元素没有设置内联样式宽度，返回空字符串。这里获取的是DOM树的内联样式宽度，不是最终渲染的宽度。简单验证，就是添加一个class修改宽度，查看dom.style.width还是内联样式宽度，但getComputedStyle(dom).width和dom.clientWidth、dom.getBoundingClientRect().width都改变了。

读取这个属性不会造成回流（reflow），因为它是从浏览器的DOM树中直接读取的，不会触发浏览器重新计算元素的布局。

2. getComputedStyle(dom).width

这个读取的是CSSOM树中的值，也就是说所有CSS样式内联样式计算后的结果，是最终CSS计算的结果。返回的是字符串类型的宽度值，单位是像素（px）。

这里只是CSS最终的计算结果，但还不是最终渲染的宽度。

3. dom.clientWidth

这个读取的是布局树（layout tree）中的值，没有单位，是一个数值类型的宽度值。

读取这个属性的时候会导致回流（reflow），因为它会触发浏览器重新计算元素的布局。

注意这个也不一定是最终渲染的宽度，因为还可能包含变形（transform）、缩放（scale）等，变形是在draw阶段进行的，所以会影响最终渲染的宽度。

4. dom.getBoundingClientRect().width

这里获取的是元素的最终（呈现）绘制宽度（drawn width），没有单位。

a :link、a:hover、a:visited、a:active中，有什么关联吗？

1. 伪类的定义与作用

这些伪类都是针对 <a> 标签的状态进行样式应用的，它们帮助我们根据用户和浏览器的交互来动态改变链接的外观。

a:link： 表示尚未访问的链接。它针对那些用户尚未点击并访问过的链接。
a:visited： 表示已经访问过的链接。这个状态会在用户访问过该链接之后生效。
a:hover： 表示鼠标悬停在链接上时的状态。当用户将鼠标放在链接上时，hover 状态会被触发。
a:active： 表示链接被激活时的状态。一般是当用户点击链接时，在点击的瞬间会触发这个状态（但不意味着页面已经跳转，点击动作本身）。

2. 它们的关联和顺序

这些伪类有一定的优先级和顺序，并且它们是按照一定的状态变化顺序发生的。这个顺序就是：

a:link → a:visited → a:hover → a:active

顺序解释：

1. a:link 和 a:visited 主要与链接的访问状态相关：
- a:link 样式应用于用户尚未点击的链接。
- a:visited 样式应用于用户已点击过的链接。
这两者是互斥的，因为每个链接要么是未访问过的（link），要么是已访问过的（visited）。
1. a:hover 是用户将鼠标悬停在链接上时的状态。这个状态优先于 active，意味着如果鼠标悬停在链接上，hover 会生效，而不管链接是“未访问”还是“已访问”。
1. a:active 在用户点击链接的瞬间被激活。它的生效时间很短，通常只会在点击期间起作用。

3. 优先级和样式覆盖规则

在实际应用中，CSS中的选择器匹配顺序也是非常重要的。样式的优先级如下：

a:active > a:hover > a:visited > a:link; 这个顺序也符合它们的触发顺序，因为用户的交互对状态的改变具有逐步优先级。
a:hover 和 a:active 的样式可以覆盖 a:link 和 a:visited 的样式，因为它们触发的时机更晚。如果同时设置了 a:link 和 a:hover 的颜色，a:hover 会生效。

css

/* 未访问链接 */
a:link {
  color: blue;
}

/* 已访问链接 */
a:visited {
  color: purple;
}

/* 鼠标悬停链接 */
a:hover {
  color: red;
}

/* 激活链接（点击时） */
a:active {
  color: green;
}

当链接 尚未访问 时，它会是蓝色（a:link）。
当链接 已访问 时，它会是紫色（a:visited）。
当鼠标悬停在链接上时，它会变成红色（a:hover），并且 悬停时优先级更高。
当用户 点击链接 时，链接会变成绿色（a:active），但只有在点击瞬间有效。

CSS面试题 ​

1. CSS中的盒模型 ​

2. 说下以下元素获取尺寸的区别 ​

a :link、a:hover、a:visited、a:active中，有什么关联吗？ ​

1. 伪类的定义与作用 ​

2. 它们的关联和顺序 ​