前端面试题（CSS篇）

TaihuaTan

已于 2024-04-30 21:59:52 修改

阅读量623

点赞数 8

分类专栏： CSS 文章标签： css 前端

于 2024-04-30 21:35:34 首次发布

本文链接：https://blog.csdn.net/m0_71379438/article/details/138350463

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.介绍一下CSS的盒子模型？

CSS的盒子模型是网页布局和样式设计的核心概念之一。盒子模型基本上将HTML元素视为一个矩形的盒子，这个盒子由内容、内边距（padding）、边框（border）和外边距（margin）组成。

1.内容（Content）:这是盒子模型的核心部分，通常包含文本、图片或其他媒体内容。内容的宽度和高度可以通过width和height属性来设置。
2.内边距（Padding）：内边距是内容区域和边框之间的空间。内边距是透明的，你可以使用padding属性来设置上下左右的内边距。
3.边框（Border）：边框是包围在内边距和内容外面的线条。边框的颜色、样式和宽度可以通过border属性来设置。
4.外边距（Margin）：外边距是边框与其他元素之间的空间。外边距也是透明的，你可以使用margin属性来设置上下左右的外边距。

值得注意的是，当我们在设置元素的宽度和高度时，这个值通常是内容的宽度和高度，而不包括内边距、边框和外边距。但是，如果你设置了box-sizing: border-box;，那么元素的宽度和高度将包括内容、内边距和边框，但不包括外边距。

CSS的盒子模型对于理解元素在页面上的布局和定位非常重要，也是进行复杂布局和样式设计的基础。

2.line-height和heigh区别?

line-height和height在CSS中虽然都与高度有关，但它们的定义、用途和针对的对象都有显著的区别。

1.定义与用途：

line-height：这是用于设置行高的属性，它主要影响行框的布局，特别是行与行之间的距离。在多行文本中，line-height决定了文本行基线之间的垂直距离。这个属性不允许使用负值。
height：这是用于设置元素高度的属性，它定义的是元素内容区的高度。在内容区外面，还可以增加内边距、边框和外边距。

2.表示意义：

line-height：主要用于表示文本行之间的垂直距离，即行高。
height：主要用于表示元素自身的高度，包括内容、内边距和边框（当使用box-sizing: border-box;时）。

3.使用范围与针对对象：

line-height：主要针对行内元素，特别是文本内容。它一般与字体相关，用于设置文本的垂直间距和布局。
height：可以应用于所有类型的HTML元素，无论是块级元素还是行内元素。它主要用于设置元素的整体高度。

总结来说，line-height和height在CSS中各有其独特的用途和定义。line-height主要用于控制文本行之间的垂直间距，而height则用于设置元素的整体高度。在使用时，需要根据具体的需求和场景来选择合适的属性。

3.CSS选择符有哪些？哪些属性可以继承？

CSS选择符（也称为选择器）是用于选择你想要样式化的HTML元素的模式。以下是一些常见的CSS选择符：

1.元素选择符：选择HTML文档中的元素。例如，p 选择所有段落。

p {
    color: blue;
}

2.类选择符：以点（.）来指定。例如，.intro 选择所有class属性中包含"intro"的元素。

.intro {
    font-size: 16px;
}

3.ID选择符：以井号（#）来指定。例如，#firstname 选择ID为"firstname"的元素。

#firstname {
    background-color: yellow;
}

4.属性选择符：基于元素的属性来选择元素。例如，[target] 选择所有带有target属性的元素。

[target] {
    color: red;
}

5.伪类选择符：用于选择HTML元素的特定状态。例如，:hover 选择鼠标指针浮动在其上的元素。

a:hover {
    color: green;
}

6.后代选择符（空格分隔）：选择某个元素的后代元素。例如，div p 选择所有在

元素内的

元素。

div p {
    font-weight: bold;
}

7.子元素选择符（大于号 >）：选择某个元素的直接子元素。例如，div > p 选择所有直接作为

子元素的

元素。

div > p {
    color: purple;
}

8.相邻兄弟选择符（加号 +）：选择紧接在另一元素后的元素，且二者有相同父元素。例如，h1 + p 选择紧接在<h1>元素后出现的

元素。

h1 + p {
    margin-top: 0;
}

9.一般兄弟选择符（波浪号 ~）：选择某元素之后的所有兄弟元素，且二者有相同父元素。例如，h1 ~ p 选择<h1>元素之后出现的所有<p>元素。

h1 ~ p {
    color: gray;
}

至于CSS属性的继承，以下是一些可以继承的CSS属性示例：

文本相关的属性，如 color、font-family、font-size、text-align 等。
列表相关的属性，如 list-style、list-style-type、list-style-position 等。
表格布局相关的属性，如 border-collapse、empty-cells、caption-side 等。
可见性相关的属性，如 visibility 和 opacity（注意，opacity 不是完全继承的，它会与父元素的opacity相乘）。

然而，并非所有CSS属性都可以继承。例如，border、margin、padding、background、width、height 等属性就不会被继承。这些属性需要明确地为每个元素指定。

4.CSS优先级算法如何计算？

CSS优先级的计算是一个复杂但重要的过程，它决定了当多个样式规则应用于同一个元素时，哪个规则将被应用。CSS优先级算法基于三个主要因素：重要性（Importance）、特异性（Specificity）和源顺序（Source Order）。

1.重要性（Importance）：

! important 规则会覆盖任何其他声明。如果一个声明包含! important，那么它将具有最高优先级，无论其特异性如何。
如果两个冲突的声明都有 ! important，那么特异性更高的声明将获胜。
如果两个冲突的声明特异性相同且都有 ! important，则后出现的声明将获胜（根据源顺序）。

2.特异性（Specificity）：

特异性是一个权重系统，由四个部分组成（从左到右重要性递减）：

* 内联样式（在HTML元素内部，如 `style="color:red;"`），特异性为 1,0,0,0。
* ID选择器（如 `#myId`），特异性为 0,1,0,0。
* 类选择器、属性选择器和伪类（如 `.myClass`、`[type="text"]`、`:hover`），特异性为 0,0,1,0。
* 标签选择器和伪元素（如 `div`、`p`、`::before`、`::after`），特异性为 0,0,0,1。
* 通配符选择器（如 `*`）、子代选择器（如 `>`）、相邻兄弟选择器（如 `+`）和一般兄弟选择器（如 `~`）不增加特异性。
* 继承的样式没有特异性。

特异性计算时，从左到右进行比较，如果某一级别上的数值大于另一个选择器，那么整个特异性就更大。如果所有四个级别的数值都相等，则比较源顺序。

3.源顺序（Source Order）：
当两个声明具有相同的特异性和都没有 ! important 时，后出现的声明将覆盖先出现的声明。源顺序基于在CSS样式表中出现的顺序，或者在<link>元素或<style>元素在HTML文档中出现的顺序。

注意：虽然! important规则具有最高优先级，但在实际开发中应尽量避免使用，因为它会破坏CSS的层叠和继承规则，使代码更难理解和维护。在可能的情况下，应尽可能通过调整选择器的特异性或使用源顺序来解决冲突。

5.用CSS画一个三角形？

在CSS中，你可以使用边框（border）技巧来绘制一个三角形。通过设置元素的宽度和高度为0，并仅保留一边的边框，你可以创建一个三角形。

以下是一个例子，展示了如何使用CSS绘制一个向上的三角形：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Triangle</title>
<style>
    .triangle {
        width: 0;
        height: 0;
        border-left: 50px solid transparent;   /* 左边框设置为透明 */
        border-right: 50px solid transparent;  /* 右边框设置为透明 */
        border-bottom: 100px solid red;        /* 底边框设置为红色，并控制三角形的大小 */
    }
</style>
</head>
<body>

<div class="triangle"></div>

</body>
</html>

在这个例子中，.triangle 类的元素被设置为一个宽度和高度都为0的块级元素。然后，我们设置了三个边框：左边框、右边框和底边框。左边框和右边框都被设置为透明，而底边框被设置为红色。由于元素的宽度和高度都为0，所以只有边框可见，从而形成一个三角形。你可以通过调整边框的宽度来改变三角形的大小，或者通过改变边框的颜色来改变三角形的颜色。

6.一个盒子不给宽度和高度如何水平垂直居中？

在没有明确给出盒子（通常指的是HTML元素）的宽度和高度的情况下，实现其水平垂直居中确实需要一些技巧。以下是一些常见的方法：

1. 使用Flexbox
Flexbox是CSS3中引入的一个强大的布局工具，可以轻松实现元素的水平垂直居中。

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 或其他你需要的值，以确保容器有足够的高度 */
}

.box {
  /* 不需要指定宽度和高度，Flexbox会自动处理 */
}

2. 使用Grid
CSS Grid也是一个强大的布局工具，可以实现更复杂的布局需求，包括元素的水平垂直居中。

.container {
  display: grid;
  place-items: center; /* 同时设置justify-items和align-items为center的简写 */
  height: 100vh; /* 或其他你需要的值，以确保容器有足够的高度 */
}

.box {
  /* 不需要指定宽度和高度 */
}

3. 使用定位（Position）和transform
如果父元素有相对定位（position: relative），并且你希望子元素在父元素内部居中，可以使用定位和transform属性。

.container {
  position: relative;
  height: 100vh; /* 或其他你需要的值，以确保容器有足够的高度 */
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 将元素自身的中心点移动到父元素的中心点 */
}

4. 使用表格布局（不推荐）
虽然这种方法在现代布局中不太常见，但使用表格布局也可以实现元素的水平垂直居中。不过，由于表格布局的语义化和可访问性问题，通常不推荐使用这种方法。

以上方法各有优缺点，你可以根据自己的需求和场景选择合适的方法。在实际开发中，Flexbox和Grid是两种非常流行的布局工具，值得深入学习。

7.display有哪些值？说明他们的作用。

display是CSS中一个非常重要的属性，它决定了元素如何在页面上呈现。display属性的值有很多种，下面是一些常见的值及其作用：
1.none：

作用：元素不会被显示，且不会占据页面上的空间。与visibility: hidden;不同，display: none;的元素不会保留其物理空间。

2.block：

作用：元素会被显示为块级元素。块级元素会开始一个新行，并且会尽量占据其父元素提供的全部宽度（除非设置了特定的宽度）。块级元素可以包含其他块级元素和内联元素。

3.inline：

作用：元素会被显示为内联元素。内联元素不会开始一个新行，并且只占据其必需的空间（即文本内容或图片等的空间）。内联元素不会包含块级元素，但可以包含其他内联元素。

4.inline-block：

作用：元素会被显示为内联块级元素。这意味着元素会像内联元素一样排列，但可以设置宽度、高度以及垂直方向上的内边距和外边距。

5.list-item：

作用：元素会被显示为列表项。在元素前会添加列表标记（如圆点、数字等）。

6.table、table-row、table-cell：

作用：这些值可以将元素显示为表格、表格行或表格单元格。它们提供了一种不使用HTML表格标签也能实现表格布局的方法。

7.flex：

作用：元素会被设置为弹性容器，其直接子元素会成为弹性项。弹性布局是一种现代的布局方式，可以轻松实现各种复杂的布局需求。

8.grid：

作用：元素会被设置为网格容器，其直接子元素会成为网格项。网格布局是一种二维布局系统，可以同时处理行和列，实现更加灵活和复杂的布局。

9.run-in：

作用：这个值较少使用，它表示元素会根据上下文作为块级元素或内联元素显示。

10.inherit：

作用：元素会继承其父元素的display属性值。

这些值只是display属性的一部分，实际上还有很多其他值，但上述值是最常见和最常用的。每种值都有其特定的用途和适用场景，选择合适的值可以帮助你实现所需的页面布局和效果。

8.对BFC规范(块级格式化上下文:block formatting context)的理解？

BFC（Block Formatting Context）规范，即块级格式化上下文，是Web页面布局的一个重要概念。它是一个独立的渲染区域，在这个区域中，元素的布局和渲染会遵循特定的规则，而不会影响到这个区域之外的元素。

BFC的主要特性包括：

1.元素的垂直边距不会重叠：在普通的布局中，两个相邻的块级元素的垂直外边距可能会重叠。但在BFC中，这种情况会被避免，使得布局更加清晰和规范。
2.包含浮动元素：在BFC中，浮动元素会被包含在内，防止它们影响周围的布局。这是通过使浮动元素的父元素形成BFC来实现的，这样可以确保父元素能够包含其所有的浮动子元素。
3.阻止外边距折叠：当两个相邻的块级元素的外边距发生折叠时，如果它们属于不同的BFC，那么外边距折叠就不会发生。

BFC的用途非常广泛，包括：

清除浮动：当父元素包含浮动元素时，父元素的高度可能会塌陷。通过将父元素设置为BFC，可以防止高度塌陷。
防止外边距重叠：当两个相邻元素的外边距发生重叠时，可以通过将其中一个元素设置为BFC来防止重叠。
创建多栏布局：通过将容器元素设置为BFC，可以实现多栏布局，使得多个子元素按照一定的规则进行排列。
解决文字环绕问题：当文字需要环绕在一个元素周围时，可以将该元素设置为BFC，使得文字按照规定的方式环绕排列。

创建BFC的方法有多种，例如：

设置元素的float属性为left或right。
设置元素的position属性为absolute或fixed。
设置元素的overflow属性为auto、scroll或hidden。

总之，BFC规范在Web页面布局中起着非常重要的作用，它可以帮助我们更好地控制元素的布局和排列，解决一些常见的布局问题。

9.清除浮动有哪些方式？

清除浮动的方式有多种，以下是一些常见的方法：

1.使用额外的标签（不推荐）
通过在浮动元素之后添加一个额外的块级元素（如

），并设置其clear属性为both、left或right。例如：

<div style="float: left; width: 100px; height: 100px;">Left Float</div>
<div style="clear: both;"></div>

这种方法简单但不够语义化，且增加了额外的HTML标签。

2.使用伪元素（推荐）
通过CSS的:after伪元素，在浮动元素的容器内添加一个看不见的元素来清除浮动。这个方法的好处是不需要额外的HTML标签，且兼容性好。

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.clearfix {
    /* 触发 hasLayout（仅IE7）或创建BFC */
    zoom: 1; /* IE6/7 */
}

然后在需要清除浮动的元素上应用.clearfix类。

3.设置父元素的高度
如果浮动元素的高度是固定的，可以直接设置父元素的高度来“包含”浮动元素。但这种方法不够灵活，当浮动元素高度不固定时无法适用。

4.使用overflow属性
给父元素设置overflow属性（如auto或hidden），这样可以触发父元素形成BFC（块级格式化上下文），从而包含浮动的子元素。但需要注意的是，overflow可能会导致不必要的滚动条出现或内容裁剪。

5.使用Flexbox或Grid布局
现代CSS布局技术如Flexbox和Grid也可以用来清除浮动。这些布局模型本身就能很好地处理子元素的排列和定位，无需担心浮动带来的问题。

6.使用display: flow-root
在CSS Display Level 3规范中，新增了一个display属性值flow-root，它可以创建一个块格式化上下文，并且不会改变元素的显示类型。但需要注意的是，这个属性的兼容性目前还不是特别好。

在实际开发中，推荐使用伪元素的方式来清除浮动，因为它既简单又兼容性好。

10.在网页中的应该使用奇数还是偶数的字体？为什么呢？

在网页中，推荐使用偶数字号的字体。这主要是因为偶数字号在多个方面都有优势：

1.像素对齐：在像素屏幕上，字体的显示是以像素为单位的。偶数字号的字体更容易像素对齐，这样可以避免字体在像素边界上被渲染成半透明的样式，从而提高字体的清晰度和可读性。
2.网页布局：在网页设计中，经常使用网格布局、栅格系统等结构化布局方式，这些布局方式通常采用偶数像素值。因此，使用偶数字号的字体更容易适应这些布局要求，使页面更加美观和一致。
3.比例关系：偶数字号更容易与页面中其他部分的字号构成一个比例关系，这有助于保持页面的整体视觉效果和谐统一。
4.浏览器兼容性：一些低版本的浏览器（如IE6）会将奇数字号强制转化为偶数字号进行渲染。同时，偶数宽的汉字在去除字体间距后，实际填充的像素宽度是奇数，这样汉字的中竖线左右是平分的，视觉效果更均衡。
5.系统差异：在某些操作系统中（如Windows），自带的点阵字体只提供特定偶数大小的点阵。例如，从Windows Vista开始，中易宋体只提供12、14、16px这三个大小的点阵。在这种情况下，使用偶数字号可以确保字体在这些系统上的显示效果更加清晰和一致。

综上所述，从像素对齐、网页布局、比例关系、浏览器兼容性和系统差异等方面考虑，在网页中使用偶数字号的字体是更为合适的选择。

11.有几种定位？分别是根据什么定位的？

在网页布局中，常见的定位方式有五种，它们分别是：

1.静态定位（Static Positioning）：

这是元素的默认定位方式。在静态定位下，元素按照正常的文档流进行布局，即块级元素从上到下排列，行内元素从左到右排列。静态定位的元素不会被特殊定位，也不会受到top、right、bottom、left、z-index等属性的影响。

2.相对定位（Relative Positioning）：

相对定位是相对于元素在文档流中的原始位置进行定位。即使设置了相对定位，元素仍然会占据文档流中的空间。使用top、right、bottom、left属性可以使元素相对于其正常位置进行偏移。

3.绝对定位（Absolute Positioning）：

绝对定位是相对于最近的已定位祖先元素（即设置了position属性为absolute、relative、fixed或sticky的元素）进行定位。如果没有已定位的祖先元素，那么它会相对于初始包含块进行定位。绝对定位的元素会脱离正常的文档流，不占据空间。

4.固定定位（Fixed Positioning）：

固定定位是相对于浏览器窗口进行定位。即使页面滚动，固定定位的元素也会始终保持在相对于浏览器窗口的相同位置。top、right、bottom、left属性用于确定元素的位置。

5.粘性定位（Sticky Positioning）：

粘性定位可以被看作是相对定位和固定定位的混合。元素在跨越特定阈值之前为相对定位，之后为固定定位。这个阈值是通过top、right、bottom、left属性设置的。

在使用这些定位方式时，还需要注意z-index属性。这个属性可以设置元素的堆叠顺序（哪个元素应该位于顶部），对于绝对定位、固定定位和粘性定位的元素特别有用。需要注意的是，z-index只对定位元素（即position属性不为static的元素）有效。

12.CSS如何优化性能？

使用link标签将CSS文件与HTML文件分离，避免使用@import导入CSS。
压缩CSS文件，减少文件大小，提高加载速度。
避免使用不必要的嵌套和复杂的CSS选择器，减少浏览器解析和渲染的时间。
利用CSS3的动画和过渡效果替代JavaScript动画，提高页面性能。

13.z-index属性在什么情况下会失效？

当父元素的position属性为relative时，子元素的z-index可能失效。解决方法是将
父元素的position属性改为absolute、fixed或static。
如果元素没有设置position属性为非static值（如relative、absolute、fixed），则z-index也会失效。解决方法是设置元素的position属性。
如果元素在设置z-index的同时还设置了float浮动，则可能导致z-index失效。解决方法是去除float浮动，改用display:inline-block等其他方法实现布局。