当前位置：首页 > news >正文

2024前端面试准备之CSS篇（二）

news 2025/7/1 14:25:13

全文链接

1. 什么是伪类和伪元素

伪类（Pseudo-class）: 伪类是选择器的一种，用于选择特定状态或条件下的元素。它们以冒号（:）开头，用于向选择器添加额外的特定条件。例如，:hover伪类用于选择鼠标悬停在元素上的状态，:nth-child(n)伪类用于选择父元素下的第n个子元素等。
伪元素（Pseudo-element）: 伪元素是选择器的一种，用于在元素的特定部分上添加样式。它们以双冒号（::）开头，用于向选择器添加额外的虚拟元素。伪元素用于在文档中生成额外的内容，或者将样式应用于元素的特定部分。例如，::before伪元素用于在元素之前插入内容，::after伪元素用于在元素之后插入内容等。

伪类用于选择元素的特定状态，而伪元素用于选择元素的特定部分或位置。

盒模型是指在网页布局中，每个元素被视为一个矩形的盒子，它包括内容区域、内边距、边框和外边距。这四个部分组成了一个元素的盒模型。

盒模型的属性包括：

宽度（width）：元素的内容区域的宽度，不包括边框、内边距和外边距。
高度（height）：元素的内容区域的高度，不包括边框、内边距和外边距。
边框（border）：元素的边框，包括边框的宽度、样式和颜色。
内边距（padding）：元素的内容区域与边框之间的距离，可以设置上、右、下、左四个方向的内边距。
外边距（margin）：元素与其他元素之间的距离，可以设置上、右、下、左四个方向的外边距。
盒模型的总宽度（box-sizing）指定元素的宽度如何计算，包括内容区域、内边距和边框，可以设置为content-box（默认值，宽度不包括内边距和边框）或者border-box（宽度包括内边距和边框）。
盒模型的布局方式（display）：指定元素的布局方式，如块级元素（block）、行内元素（inline）或者行内块级元素（inline-block）。
盒模型的定位方式（position）：指定元素在文档中的定位方式，如静态定位（static）、相对定位（relative）、绝对定位（absolute）或者固定定位（fixed）。
盒模型的堆叠顺序（z-index）：指定元素在重叠部分的显示顺序，值越大越靠前显示。
盒模型的背景（background）：指定元素的背景颜色、图片、重复方式等属性。