前端css面试题（重要！！！）（三）

最新推荐文章于 2025-05-01 23:24:04 发布

TechTorch

最新推荐文章于 2025-05-01 23:24:04 发布

阅读量805

点赞数 30

分类专栏：前端面试题文章标签：前端 css 面试

本文链接：https://blog.csdn.net/qq_63144902/article/details/147637309

版权

前端面试题专栏收录该内容

4 篇文章

订阅专栏

文章目录

42.如何用 CSS 实现一个三角形?

原理：利用css属性中的border属性，通过将元素的宽度和高度设置为0，然后设置不同边的border属性的颜色，可以创建一个三角形

举例：如果需要创建一个向上的三角形，设置底边，左边，右边的border属性即可（可以在心里面画图）

.triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

43.如何用 CSS 实现一个扇形?

1、利用clip-path属性：

clip-path 可以定义一个可见区域，允许裁剪元素的某些部分从而创建各种图形。

要实现一个扇形，最简单的方法是使用圆的片段。

.sector {
  width: 200px;
  height: 200px;
  background: #f06;
  clip-path: path(
    "M 100 100 L 200 100 A 100 100 0 0 1 100 0 Z"
  );
    /* 
    "M 100 100" - 从中心点 (100, 100) 开始。
    "L 200 100" - 画一条直线到右侧边界中点 (200, 100)。
    "A 100 100 0 0 1 100 0" - 画一个圆弧到顶部中点 (100, 0)。
    "Z" - 闭合路径。
  */
}

2、利用border属性:

设置border为50%设置为一个圆，然后设置边框颜色

.sector {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 100px;
  border-color: transparent #f06 transparent transparent;
  border-radius: 50%;
  /* border-radius 使边框曲线更加平滑，形成圆弧效果 */
}

如果需要改变扇形方向，可以添加transform：rotate（deg），transform-origin：center center；设置旋转基准点

.fan-rotated {
  transform: rotate(45deg);
  transform-origin: center center; /* 旋转基准点 */
}

如果想要扇形做展开或者合拢的动画，可以结合transition或animation

clip-path 动画:在 keyframes 中逐帧改变 clip-path:polygon(…)的坐标，形成扇形从小到大的展开动画

border动画：通过逐渐改变border-width，从0到100px，也能模拟扇形展开，不过精准控制角度时稍微复杂

44.如何用 CSS 实现一个宽高自适应的正方形？

1、最简单的方法是使用padding-top或使用padding-bottom。

因为在css中，padding 的百分比是相对于父元素的宽度来计算的。通过这种方法可以确保元素的宽高成比例，保持正方形的形状。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应正方形</title>
    <style>
        .square {
            width: 50%; /* 设置square的宽度为父容器的50% */
            padding-top: 50%; /* padding-top的百分比是基于父容器计算的 ，保持宽高比例为1:1*/
            background-color: lightblue; /* 仅用于展示效果 */
            position: relative; /* 让内部元素能够相对定位 */
        }

        .square-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;//通过这些属性，让内容区域填充整个正方形容器。
        }
    </style>
</head>
<body>
    <div class="square">
        <div class="square-content">
            正方形内容
        </div>
    </div>
</body>
</html>

在这个例子中，.square的padding-top 设置为 50%，这保证了它的高度总是等于宽度的 50%，也就是保持 1:1的比例成为一个正方形。

2.使用伪元素插入一个空的块:如果不想在容器中放置无意义的内容或对于内部的内容有其他的需求，可以使用伪元素实现相同的效果。

.square:before {
    content: "";
    display: block;
    padding-top: 100%; /* 保持宽高比例为1:1 */
}

3.flex布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应正方形-Flexbox</title>
    <style>
        .flex-square {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 50%;
            padding-top: 50%;
            background-color: lightcoral;
            position: relative;
        }

        .flex-square-content {
            position: absolute;
        }
    </style>
</head>
<body>
    <div class="flex-square">
        <div class="flex-square-content">
            正方形内容
        </div>
    </div>
</body>
</html>

4.使用媒体查询确保正方向适应不同的视口和设备

@media (max-width: 600px) {
    .square {
        width: 80%;
        padding-top: 80%;
    }
}

45.如何在网页中画一条 0.5px 的线?

1.使用css transform属性，通过css样式，将height或width设置为1px，然后用scale缩放

.line {
  width: 100%;
  height: 1px;
  background-color: black;
  transform: scaleY(0.5);
}

2.使用border和transform：用一个元素的边框绘制，然后通过缩放调整

.line {
  width: 100%;
  border-top: 1px solid black;
  transform: scaleY(0.5);
  transform-origin: center;
}

3.使用svg：直接在html中放一个svg标签，设置线条的strokeWidth为0.5

<svg width="100%" height="1">
  <line x1="0" y1="0" x2="100%" y2="0" style="stroke:black;stroke-width:0.5" />
</svg>

4.使用background-img：通过css的背景图设置一种线性渐变。只显示所需要的部分

.line {
  width: 100%;
  height: 1px;
  background-image: linear-gradient(to right, black 50%, transparent 50%);
  background-size: 2px 1px;
}

46.如何给网页设置小于 12px 的字体?

在常规的 CSS 中，直接设置小于 12px 的字体在一些浏览器(特别是 Chrome)中是无效的。

因为它们有最小字体限制。不过，我们有几种方法可以绕过这个限制，实现小于12px 的字体：

1、方法1:使用CSS的 transform 属性

通过 transform:scale()属性来缩放元素，从而实现小于 12px 的视觉效果。

具体的实现方式是先将字体设置为12px，然后使用 transform:scale()来缩小。

.small-font {
    font-size: 12px;
    transform: scale(0.75);
    transform-origin: left top;
}

2)通过图片替代文字

如果只是为了展示一些小文字，可以将文字转换为图片，然后在网页中使用标签展示图片。虽然这稍微有点不灵活，但在一些特殊场景下也是一个可行的办法。

<img src="small-text.png" alt="小于 12px 的文字">

注意：使用相对字体大小的单位（em/rem）无法突破浏览器的限制

<div style="font-size: 8px;">
    <p style="font-size: 1em;">这是一个可能小于 12px 的字体。</p>
</div>

在父元素设置了一个基础字体大小，在子元素中使用相对于基础字体大小的比例，但是浏览器的最小字体设置为12px，那么上述的配置无效，字体还是12px

47.什么是 1px 问题?如何解决 1px 问题

1px问题，指的是在移动端开发时，由于设备屏幕的高分辨率，导致在页面上显示的 1 像素线条实际显示时看起来比设计稿中的要粗。

这个问题通常出现在 Retina 屏幕或者其他高 DPI的设备上，因为这些设备的物理像素是逻辑像素的多倍，从而使得设计需要的1像素线在实际显示时显得更粗。

解决 1px 问题的方法有很多，常用的有以下几种：

1)使用视网膜图像(Retinalmages)

2)使用视网膜边框(Retina Borders)

3)使用 transform 缩放

4)使用媒体查询

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) { 
  .border {
    border-width: 0.5px;
  }
}

3)使用 transform 缩放:通过 CSS3 的 transform 属性，将元素进行缩放。

例如，可以将宽度为 1px的线通过 scaleY(0.5)来进行缩放，但注意要通过父元素来留出相应的空间，这样当元素被缩小时，依然能达到1 px线的效果。

.line {
  height: 2px;
  transform: scaleY(0.5);
  transform-origin: top; /* 设置缩放中心点 */
  background-color: black;
}

4)使用媒体查询根据不同的设备像素比来动态变化 CSS 样式，比如在高 DPI设备上设置 0.5px 的边框，对于普通屏幕则使用1px。

.element {
  border-bottom: 1px solid black;
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .element {
    border-bottom: 0.5px solid black;
  }
}

48.CSS 中是否存在父选择器?其背后的原因是什么

CSS 中是没有直接的父选择器的。也就是说，在纯CSS中，无法从子元素选择父元素。

主要原因是CSS 本质上是一个单向的、从上到下的样式描述语言。

解决方案：

使用JavaScript，在运行时动态地修改父元素样式。例如，使用parentElement 属性及相应的 DOM 操作。

// 将parent class应用于某个特定子元素的父节点
document.querySelector('.child-class').parentElement.classList.add('parent-class');

CSS 变量和自定义属性:通过 CSS 变量，我们可以让子元素“通知”父元素进行某些样式上的变化，虽然这并不是严格意义上的选择器，但可以在某些场景下实现类似功能。

预处理器:像 Sass 或 Less 这样的 CSS 预处理器有一定程度上的父选择支持，不过这只是编译时的伪选择器，最终生成的仍然是自上而下的 CSS 规则。

.child-class {
  // ...
  
  @at-root .parent-class & {
    // 父选择器的样式
  }
}

49.有哪些默认 display: block 元素和 display:inline元素？

display：block元素： < div>，< p>，< h1>至 < h6>，< ul>，< ol>，< li>，< header>，< footer>，< section>，< article>

display-inline：< span>,< a>,< strong>,< em>,< img>，< br>，< code>，< S>，< u>，< b>

display：其他取值block，inline，inline-block，flex，inline-flex，grid，inline-grid，none，table，table-row，table-cel1

50.line-height: 100%和line-height: 1 有什么区别？

1、单位不同:100% 是基于字体大小的百分比，1是倍数。

2、继承行为不同:100% 会被解析成具体的像素值，1 则保持倍数继承。

推荐使用line-height: 1; 更加通用和灵活，尤其是在复杂布局和响应式设计中。

51.如果在伪元素中不写 content 会发生什么

在 CSS 中，伪元素是一种特殊的选择器，允许你对特定的部分进行样式化处理。

常见的伪元素有::before和::after。

其中，伪元素中一个关键的属性是 content ，用于设置伪元素的内容。

如果不在伪元素中写content，伪元素将不会被渲容。如果在伪元素中不写染，因此也就不会显示任何内容或占据任何空间。

具体地说，如果你在样式中定义了伪元素并应用了一些样式，但未设置 content 属性，那么这些样式将不会生效。同样的，伪元素将被认为是不存在的。

/* 有效的伪元素显示样式 */
.element::before {
    content: "Hello, ";
    color: red;
}

/* 无效的伪元素，因为没有设置 content */
.element::after {
    color: blue;
}

在以上例子中，.element::before 会显示"Hello,"，且颜色为红色，而.element::after 则不会显示或应用颜色蓝色，因为没有设置 content。

了解伪元素的工作原理对于前端开发非常重要。下面我来进一步探讨一下与伪元素 content 属性相关的细节问题。

1、content 属性值:

可以是字符串:例如 content:“Hello”;

可以是来自 HTML的属性:例如 content:attr(data-content);

可以是空字符串:例如content:“”;.

可以是图像:例如content:url(image.png);.

2、适用场景:

在按钮或链接中添加装饰性图标，

用来清除浮动:利用::after伪元素和content:"”来实.

使用clear 清除浮动。

实现视觉上的结构标记，例如在某些 U设计中对元素添加.

某些前缀或后缀。

3、伪元素和伪类的区别:

·伪类(如:hover，:focus )描述某种特定状态，例如用户交互。

伪元素(如::before，::after )描述某些文档中特殊位置的样式。

4)注意事项:

::before和::after在绝大多数现代浏览器中都能很好地工作，但老旧的 IE 版本对其支持较差。

伪元素的内容(由 content 属性设置)不会被语音阅读器阅读，因此不能应用于被传递关键信息

52.CSS 伪元素和伪类的作用和区别?

CSS 伪元素和伪类都是用于修饰文档的特定部分，但它们的作用和应用场景有所不同。

伪元素用于创建不平常的标记，即增加文档里实际不存在的元素，常用于将样式应用到某个元素的一部分。

而伪类则表示元素的某种状态，因而可以选择和样式化元素的特定状态。

伪元素:伪元素主要用于选取和样式化某个元素的一部分比如首字母、第一行文本、或是在某个元素内容之前或之后插入内容。常见的伪元素有 ::before、::first-line::after和::first-letter

伪类:伪类则用于选择那些特殊状态下的元素，比如鼠标悬停、被点击等。常见的伪类有:hover、:focus、:active 和:nth-child 。

语法区别:伪类一般使用单个冒号:，而伪元素在 CSS3 标准中使用双冒号::。例如::hover是伪类，而::before是伪元素。

伪元素和伪类在实战中的应用非常广泛，除了基础应用外，我们可以挖掘更多高级技巧来提升页面表现效果。

伪元素扩展:a)::before 和 :after: 利用这两个伪元素，可以在元素的内容之前和之后插入额外的内容或样式，常用作装饰效果。例如在按钮前添加图标或者在特定文本之后添加引号。

.button::before {
  content: '🔥';
  margin-right: 8px;
}

::first-letter 和 ::first-line: 这两个伪元素能够选择并样式化某段文本的首字母和首行，非常适合文章排版中的美化效果。

p::first-letter {
  font-size: 2em;
  font-weight: bold;
}

伪类扩展:
1、动态伪类:如 :hover、:focus 等，用于实现交互效果，比如鼠标悬停高亮、输入框聚焦改变边框颜色。

a:hover {
  color: red;
}
input:focus {
  border-color: blue;
}

2、结构性伪类: 如:last-child 等，用于选择特:nth-child、定位置的元素。

li:nth-child(odd) {
  background-color: #f2f2f2;
}
li:last-child {
  border-bottom: none;
}

3、综合应用:
灵活布局: 利用伪元素可以实现复杂的布局结构，特别是当我们需要一些不影响文档流的修饰元素时，例如玩具标签云、导航菜单分割线等。

.nav::after {
  content: '';
  display: block;
  clear: both;
}

动画和过渡效果: 结合伪类，可以制作一些有趣的动画效果，如按钮点击后的微动效应、图片加载过程中的占位符效果等。

.image:hover::after {
  opacity: 0.5;
}

53.flex-shrink和flex-grow 的默认值是多少，作用是什么

1、flex-shrink 默认值是 1，表示当容器空间不足时，子元素可以缩小。

flex-shrink定义了当父容器的空间不足时，子元素缩小的比例。默认值是1，意味着所有子元素都会按比例缩小。

使用场景:适用于页面在不同屏幕宽度之间转换时，确保元素不会溢出容器。

例如，一个响应式布局中，文本或图片能自动缩小以适应较小屏幕。举例来说:

.container {
    display: flex;
}
.item {
    flex-shrink: 2;
}

这里的 .item 将在空间不足时比其他默认 .item 缩小得更快。

2、flex-grow 默认值是 0，表示当容器空间有多余时，子元素不会放大。

flex-grow定义了当父容器拥有多余空间时，子元素放大的比例。默认值是 0，意味着如果有余量，子元素不会放大。

使用场景:适用于元素需要根据可用空间动态扩展以填满父容器。

例如，在一个导航栏中，一些元素(如搜索栏)需要根据导航栏的总宽度来动态调节宽度。举个例子:

.container {
    display: flex;
}
.item {
    flex-grow: 1;
}

这里的 .item 将在有多余空间时根据比例进行放大

注意:

默认值的设定有助于我们在没有显式声明时，布局可以有一定的响应性。

flex-basis属性与这两个属性一起使用，指定元素的初始尺寸。

所有这三个属性(flex-grow、fex-shrink和 flex-basis)可以结合在一起，通过 flex 缩写来统一设置，如 flex:1 1 auto;。

54.CSS 中 flex: 1 是什么意思?

flex:1在CSS中用于 flex布局，它是 flex-grow、flex-shrink 和 flex-basis 三个属性的简写。具体来说，flex:1等同于 flex:1 1 0，这意味着:

flex-grow:1-- 元素可以根据剩余空间进行扩展。

flex-shrink:1–元素在空间不足时可以缩小。

flex-basis:0–元素的基础尺寸为 0，剩余空间会根据flex-grow 属性进行分配。

总之，flex:1通常用于使元素在容器中平均分配多余的空间，显得各个元素一样宽。

详解：

1)flex-grow :决定了 flex 项目在有多余空间时的扩展能力。值为正整数，数值越大，分配的空间越多。

2)flex-shrink : 决定了 flex 项目在空间不足时的收缩能力。值为正整数，数值越大，收缩的比例越大。

3)flex-basis : 定义了 flex 项目的基础尺寸。在有多余空间时，以这一定义的基础进行扩展或收缩。

4)简写属性:flex是flex-grow、flex-shrink和flex-basis的简写，可以同时定义这些属性，从而简化代码。

其他常见值：

flex:2会使该元素占据相对于 flex:1 元素两倍的空间。

-flex:01 auto 表示元素不能扩展，但在必要时可以缩小基础尺寸依据内容自动决定而非 0。

54.CSS 如何快速选取同组兄弟元素的偶数序号元素？

CSS 中可以使用:nth-of-type 伪类选择器来快速选取同组兄弟元素的偶数序号元素。

例如，如果需要选择某一类元素的偶数序号元素，可以使用以下选择器

.element:nth-of-type(even) {
  /* 样式 */
}

可以是任意的 HTML标签，比如 div，p，1i 等element这将选中所有类型为 element的偶数序号元素。

55.如何检测 CSS 动画的 FPS （帧率）值?

FPS：即每秒呈现的帧数，可以通过js的requestAnimationFrame方法配合相应的事件来计算。基本思路是每帧动画时记录当前时间，并通过时间差计算帧率

let lastTime = performance.now();
let frameCount = 0;

function measureFPS() {
    let currentTime = performance.now();
    frameCount++;
    
    if (currentTime - lastTime >= 1000) {  // 每秒统计一次
        let fps = frameCount;
        console.log(`FPS: ${fps}`);
        frameCount = 0;
        lastTime = currentTime;
    }
    
    requestAnimationFrame(measureFPS);
}

requestAnimationFrame(measureFPS);

requestAnimationFrame 方法:用于告知浏览器你希望执行动画并请求浏览器在下一次重绘之前调用指定的回调函数的方法。与传统的 setInterval 不同能够更智能地优化动画效果，使其更加requestAnimationFrame流畅。浏览器会根据自身的刷新频率(通常是60Hz)来调用这个函数，让动画帧率更加稳定。

56.如何在浏览器可视区域画一个最大的正方形？

在浏览器的可视窗口内画一个最大的正方形，核心思路就是利用浏览器窗口的高度和宽度，选择较小的那个值来设置正方形的边长。这样正方形才能完全适应在可视区域内。实现方式可以简单概括为

1、用 JavaScript 获取窗口的宽度和高度。

2、取两者中的较小值，设为正方形的边长。

3、使用 CSS 来设置这个正方形的大小和居中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .square {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: lightblue;
        }
    </style>
    <title>Max Square</title>
</head>
<body>
    <div id="square" class="square"></div>
    <script>
        function drawMaxSquare() {
            const square = document.getElementById('square');
            const windowWidth = window.innerWidth;
            const windowHeight = window.innerHeight;//直接忽略滚动条，获取浏览器可视区域宽度和高度
            const sideLength = Math.min(windowWidth, windowHeight);
            square.style.width = `${sideLength}px`;
            square.style.height = `${sideLength}px`;
        }

        // Initial draw
        drawMaxSquare();

        // Redraw if window is resized
        window.addEventListener('resize', drawMaxSquare);
    </script>
</body>
</html>