首页 > 其他分享 >css面试题

css面试题

时间：2024-10-21 09:21:56浏览次数：3  
标签：面试题 元素 height CSS border display css 属性

总结不易，点个赞在走吧

文章目录

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

CSS盒子模型是理解网页布局和元素尺寸的基础，它描述了每个HTML元素如何作为一个矩形盒子来呈现，这个盒子由四个部分组成：内容区（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。下面是对这四个部分的详细说明：

  1. 内容区（Content）：这是盒子模型的核心部分，用于放置文本、图片或其他媒体内容。内容区的尺寸可以通过width和height属性来设置。
  2. 内边距（Padding）：内边距位于内容区的外围，用于控制内容区与边框之间的空间。通过设置padding属性，可以调整内边距的大小，使内容与边框之间保持一定的距离。padding可以分别设置上、右、下、左四个方向的值，也可以统一设置所有方向的值。
  3. 边框（Border）：边框围绕在内边距之外，用于定义盒子的边界。边框的样式、宽度和颜色可以通过border属性来设置。例如，border: 1px solid black;表示创建一个1像素宽的实线黑色边框。
  4. 外边距（Margin）：外边距位于边框之外，用于控制当前盒子与其他元素之间的间距。通过设置margin属性，可以控制盒子之间的距离，避免元素过于拥挤。与padding类似，margin也支持设置四个方向的值。
    此外，还需要注意的是，盒子模型的尺寸计算方式有两种：标准盒模型和IE盒模型（或称为怪异盒模型）。在标准盒模型中，元素的总宽度等于width + padding + border + margin；而在IE盒模型中，width属性包含了padding和border，即元素的实际内容宽度等于width - padding - border。可以通过设置box-sizing属性来选择使用哪种盒模型，例如，box-sizing: content-box;对应标准盒模型，而box-sizing: border-box;则对应IE盒模型。
    在这里插入图片描述

2.怪异盒模型/IE盒模型

怪异盒模型（Quirks Mode Box Model），也被称为IE盒模型，是一种不同于标准盒模型（W3C盒模型）的尺寸计算方式。在怪异盒模型中，元素的width和height属性包括了内容区、内边距（padding）和边框（border）的总和，而不像标准盒模型那样仅指内容区的尺寸。

如何启用怪异盒模型

怪异盒模型通常在浏览器的“怪异模式”（Quirks Mode）下启用。怪异模式是为了兼容旧版浏览器和一些老网站而存在的，当浏览器检测到某些特定的DOCTYPE声明或完全缺少DOCTYPE声明时，会进入怪异模式。

* {
  box-sizing: border-box;
}
使用场景

● 标准盒模型：适用于大多数现代Web开发，因为它更符合W3C标准，且更容易理解和预测。
● 怪异盒模型：在需要保持固定外部尺寸，同时内部内容区域随padding和border变化时，使用box-sizing: border-box;可以达到类似的效果

3.line-height和height的区别？

line-height 和 height 是 CSS 中两个常用的属性，它们在控制元素的高度和行间距方面有着不同的用途和行为。下面是这两个属性的具体区别和用法：

height

● 定义：height 属性用于设置元素的高度。
● 作用对象：主要应用于块级元素（如 div、p）和具有固定高度的行内块级元素（如 img、input）。
● 影响范围：height 直接控制元素的内部高度，不包括内边距（padding）、边框（border）和外边距（margin）。
● 常见用法：

div {
  height: 100px; /* 设置元素的高度为100像素 */
}
line-height

● 定义：line-height 属性用于设置行间距，即行与行之间的垂直距离。
● 作用对象：主要用于文本内容，尤其是行内元素（如 span）和文本节点。
● 影响范围：line-height 控制的是文本行的高度，而不是整个元素的高度。它会影响文本的垂直对齐方式。
● 常见用法：

p {
  line-height: 1.5; /* 设置行间距为字体大小的1.5倍 */
  line-height: 30px; 
}
主要区别
  1. 用途不同：
    ○ height 用于设置元素的整体高度。
    ○ line-height 用于设置文本行的间距。
  2. 影响对象不同：
    ○ height 影响整个元素的高度，包括内容区、内边距、边框。
    ○ line-height 仅影响文本行的高度，主要用于控制文本的垂直对齐和行间距。
  3. 单位和计算方式不同：
    ○ height 可以使用绝对单位（如 px、em）或百分比。
    ○ line-height 可以使用绝对单位、相对单位（如 em）或无单位的数字（表示相对于字体大小的比例）。
代码实现
height 示例
<div style="height: 100px; background-color: lightblue;">
这是一个高度为100像素的div。
</div>
line-height 示例
<p style="line-height: 1.5; font-size: 16px;">
  这是一个设置了行间距为1.5倍字体大小的段落。<br>
  每一行之间的距离会增加。
</p>
总结

● height：当你需要精确控制一个元素的高度时，使用 height。例如，设置一个固定高度的导航栏或容器。
● line-height：当你需要改善文本的可读性或调整文本的垂直对齐时，使用 line-height。例如，设置段落的行间距，使文本更易阅读。

4.CSS选择符有哪些？

  1. 标签选择符（Type Selector）
    ○ 选择特定类型的 HTML 元素。
    ○ 示例：p { color: blue; } 选择所有的

    元素。

  2. 类选择符（Class Selector）
    ○ 选择具有特定类名的元素。
    ○ 示例：.my-class { color: red; } 选择所有类名为 my-class 的元素。
  3. ID 选择符（ID Selector）
    ○ 选择具有特定 ID 的元素。
    ○ 示例：#my-id { font-size: 20px; } 选择 ID 为 my-id 的元素。
  4. 通用选择符（Universal Selector）
    ○ 选择文档中的所有元素。
    ○ 示例：* { margin: 0; padding: 0; } 重置所有元素的外边距和内边距。
  5. 属性选择符（Attribute Selector）
    ○ 选择具有特定属性或属性值的元素。
    ○ 示例：[type=“text”] { width: 100px; } 选择所有 type 属性值为 text 的元素。
  6. 伪类选择符（Pseudo-class Selector）
    ○ 选择处于特定状态的元素。
    ○ 示例：a:hover { color: green; } 选择鼠标悬停在链接上的状态。
  7. 伪元素选择符（Pseudo-element Selector）
    ○ 选择元素的特定部分。
    ○ 示例：p::first-line { font-weight: bold; } 选择段落的第一行。
  8. 后代选择符（Descendant Selector）
    ○ 选择某个元素内的特定后代元素。
    ○ 示例：div p { color: blue; } 选择所有在 内的

    元素。

  9. 子选择符（Child Selector）
    ○ 选择某个元素的直接子元素。
    ○ 示例：ul > li { color: red; } 选择所有
    • 的直接子元素
    • 。
    • 相邻兄弟选择符（Adjacent Sibling Selector）
      ○ 选择紧接在另一个元素之后的元素。
      ○ 示例：h1 + p { margin-top: 0; } 选择紧跟在 <h1> 后面的 <p> 元素。
    • 通用兄弟选择符（General Sibling Selector）
      ○ 选择同级的后续元素。
      ○ 示例：h1 ~ p { font-style: italic; } 选择所有在 <h1> 后面的 <p> 元素。

5.哪些属性可以继承？

  1. 颜色 (color)：文本颜色。
  2. 字体 (font)：包括 font-family、font-size、font-weight、font-style 等。
  3. 文本 (text)：包括 text-align、text-decoration、text-indent、text-transform 等。
  4. 列表 (list)：包括 list-style、list-style-type、list-style-image、list-style-position 等。
  5. 行高 (line-height)：行间距。
  6. 字母间距 (letter-spacing)：字符之间的间距。
  7. 单词间距 (word-spacing)：单词之间的间距。
  8. 文本缩进 (text-indent)：段落首行缩进。
  9. 可见性 (visibility)：元素的可见性。
  10. 引用 (quotes)：引号的样式。
  11. 方向 (direction)：文本的方向（从左到右或从右到左）。
  12. Unicode 范围 (unicode-bidi)：双向文本的嵌入方向。
  13. 白空间处理 (white-space)：空白字符的处理方式。

6.CSS优先级算法如何设计

CSS的特性：继承性，层叠性，优先级
优先级比较: !import > 内联样式 > id > class > 标签 > 通配符

7.用CSS画一个三角形


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .sanjiao_wrap{
            width: 400px;
            height: 100px;
            outline: 1px solid red;
            display: flex;
        }
        .sanjiao1 {
            /* 
            border-top/bottom:设置三角形不要设置宽度
            border-left/right:设置三角形不要设置高度
            */
           width: 0px;
           height: 0px;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid yellow;
            border-right: 50px solid transparent;
        }
        .sanjiao2 {
           width: 0px;
           height: 0px;
            border-top: 50px solid red;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
        .sanjiao3 {
           width: 0px;
           height: 0px;
            border-top: 50px solid transparent;
            border-bottom: 50px solid blue;
            border-left: 50px solid transparent;
            border-right: 50px solid transparent;
        }
        .sanjiao4 {
           width: 0px;
           height: 0px;
            border-top: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid transparent;
            border-right: 50px solid green;
        }
        .div2 {
            /*  linear-gradient  */
            width: 100px;
            height: 100px;
            /* background: linear-gradient(45deg, deeppink, yellowgreen); */
            /* background: linear-gradient(45deg, deeppink, deeppink 50%, 							yellowgreen 50%, yellowgreen 10%); */
            /* 只展示一个三角形 */
            background: linear-gradient(45deg, deeppink, deeppink 50%, transparent 50%, transparent 100%); 

        }
    </style>
</head>
<body>
    <div class="sanjiao_wrap">
        <div class="sanjiao1"></div>
        <div class="sanjiao2"></div>
        <div class="sanjiao3"></div>
        <div class="sanjiao4"></div>
    </div>
     <div class="div2"></div>
</body>
</html>

在这里插入图片描述

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

方法一：Flexbox

Flexbox 是一种非常强大且灵活的布局方式，可以轻松实现水平和垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Centering</title>

  <style>
    .container {
      display: flex;
      justify-content: center; /* 水平居中 */
      align-items: center;     /* 垂直居中 */
      height: 100vh;           /* 容器高度为视口高度 */
      border: 1px solid black; /* 边框便于观察 */
    }

    .box {
      padding: 20px;
      background-color: lightblue;
    }
  </style>

</head>

<body>
  <div class="container">
    <div class="box">
      我是一个居中的盒子
    </div>

  </div>

</body>

</html>
方法二：Grid

CSS Grid 也是一种强大的布局方式，可以轻松实现多维布局，包括水平和垂直居中。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Grid Centering</title>

  <style>
    .container {
      display: grid;
      place-items: center; /* 水平和垂直居中 */
      height: 100vh;       /* 容器高度为视口高度 */
      border: 1px solid black; /* 边框便于观察 */
    }

    .box {
      padding: 20px;
      background-color: lightblue;
    }
  </style>

</head>

<body>
  <div class="container">
    <div class="box">
      我是一个居中的盒子
    </div>

  </div>

</body>

</html>
方法三：绝对定位 + transform

使用绝对定位和 transform 也可以实现水平和垂直居中，但这种方法需要更多的 CSS 代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Absolute Positioning Centering</title>

  <style>
    .container {
      position: relative;
      height: 100vh; /* 容器高度为视口高度 */
      border: 1px solid black; /* 边框便于观察 */
    }

    .box {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /* 水平和垂直居中 */
      padding: 20px;
      background-color: lightblue;
    }
  </style>

</head>

<body>
  <div class="container">
    <div class="box">
      我是一个居中的盒子
    </div>

  </div>

</body>
</html>
方法四：表格布局

虽然表格布局不如 Flexbox 和 Grid 那么现代化，但在某些情况下仍然有效。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Table Centering</title>

  <style>
    .container {
      display: table;
      height: 100vh; /* 容器高度为视口高度 */
      width: 100%;   /* 容器宽度为视口宽度 */
      border: 1px solid black; /* 边框便于观察 */
    }

    .cell {
      display: table-cell;
      vertical-align: middle; /* 垂直居中 */
      text-align: center;     /* 水平居中 */
    }

    .box {
      display: inline-block;
      padding: 20px;
      background-color: lightblue;
    }
  </style>

</head>

<body>
  <div class="container">
    <div class="cell">
      <div class="box">
        我是一个居中的盒子
      </div>

    </div>

  </div>

</body>
</html>

9.dispaly有哪些值，作用是什么？

● none 隐藏元素
● block 把某某元素转换成块元素
● inline把某某元素转换成内联元素
● inline-block把某某元素转换成行内块元素

10.BFC是什么

BFC是一个页面上的一个隔离的独立容器，容器里面子元素不会影响到外面的元素
BFC原则：如果一个元素具有BFC，那么内部元素再怎么，都不会影响到外面的元素

创建BFC
  1. 根元素（HTML）：根元素始终会创建一个新的 BFC。
  2. 浮动元素（float 不为 none）：浮动元素会创建一个新的 BFC。
  3. 绝对定位元素（position 为 absolute 或 fixed）：绝对定位的元素会创建一个新的 BFC。
  4. 行内块元素（display 为 inline-block）：行内块元素会创建一个新的 BFC。
  5. 表单元格（display 为 table-cell，HTML 表格中的默认值）：表单元格会创建一个新的 BFC。
  6. 表标题（display 为 table-caption，HTML 表格中的默认值）：表标题会创建一个新的 BFC。
  7. 匿名表格元素（display 为 table、inline-table、table-row-group、table-header-group、table-footer-group、table-row、table-column-group、table-column、table-cell、table-caption）：这些元素会创建一个新的 BFC。
  8. 溢出值不为 visible 的块元素（overflow 不为 visible）：溢出值为 auto、scroll 或 hidden 的块元素会创建一个新的 BFC。
  9. display 为 flow-root 的元素：这是 CSS3 引入的一个新值，明确用于创建一个新的 BFC。
如何触发BFC

● float的值非none
● overflow的值非visible
● display的值为:inline-block、table-cell…
● position的值为:absoute、fixed

11.清除浮动的方式？

  1. 触发BFC
  2. 多创建一个盒子，添加样式:clear:both;
  3. .after方式
div:after{
content:'';
Hisplay: block;
clear: both;
}

12.CSS中有几种定位？分别根据什么定位的？

● 静态定位(static)：默认定位，元素按正常文档流布局。
● 相对定位(relative)：元素相对于其正常位置进行定位。
● 绝对定位(adsolute)：元素相对于最近的非 static 定位的祖先元素进行定位。
● 固定定位(fixed)：元素相对于浏览器窗口进行定位，不随页面滚动。
● 粘性定位(sticky)：元素根据用户的滚动位置进行定位，达到阈值时固定在某个位置。

13.写一个左中右布局占满屏幕，其中左，右固定宽度200，中间自适应宽度，要求先加载出中间块，写出结构和样式(双飞翼布局)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Left-Middle-Right Layout</title>
    <style>
        /* 基本样式 */
        body,
        html {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        .container {
            display: flex;
            height: 100vh;
            /* 占满整个视口高度 */
            flex-wrap: nowrap;
            /* 不换行 */
        }

        .left,
        .right {
            width: 200px;
            background-color: #f0f0f0;
            padding: 20px;
            box-sizing: border-box;
            /* 包括内边距和边框在宽度内 */
        }

        .middle {
            flex-grow: 1;
            /* 自适应宽度 */
            background-color: #e0e0e0;
            padding: 20px;
            box-sizing: border-box;
            /* 包括内边距和边框在宽度内 */
        }

        /* 重新排序以实现正确的布局 */
        .left {
            order: -1;
            /* 左侧块顺序为 -1 */
        }

        .right {
            order: 1;
            /* 右侧块顺序为 1 */
        }

        .middle {
            order: 0;
            /* 中间块顺序为 0 */
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="middle">
            <!-- 中间内容 -->
            <h1>中间块</h1>
            <p>这里是中间块的内容。</p>
        </div>
        <div class="left">
            <!-- 左侧内容 -->
            <h2>左侧块</h2>
            <p>这里是左侧块的内容。</p>
        </div>
        <div class="right">
            <!-- 右侧内容 -->
            <h2>右侧块</h2>
            <p>这里是右侧块的内容。</p>
        </div>
    </div>
</body>

</html>

14.CSS sprite（雪碧图）是什么？

雪碧图一种把多个小图标或图像合并成一张大图的技术

优点
  1. 减少HTTP请求
  2. 提高缓存效率
  3. 优化用户体验
使用
  1. 准备雪碧图
  2. 通过使用 background-image 和 background-position 属性来显示所需的图像部分。

15.display:none；与 visibility:hidden;的区别

display: none; 和 visibility: hidden; 都是 CSS 中用于控制元素可见性的属性，但它们的行为和效果有很大的不同
● display: none;：完全移除元素，不占据空间，不参与布局计算。
● visibility: hidden;：隐藏元素，但保留其占据的空间，参与布局计算。

1. display: none;

● 作用：完全移除元素，使其不占据任何空间。
● 布局影响：元素及其后代元素都不会参与布局计算，不会影响页面的其他部分。
● 渲染：元素不会被渲染到页面上，浏览器不会对其进行任何绘制操作。
● DOM 存在：虽然元素不在页面上显示，但仍然存在于 DOM 中，可以通过 JavaScript 访问和操作。

2. visibility: hidden;

● 作用：隐藏元素，但保留其占据的空间。
● 布局影响：元素仍然参与布局计算，占据其应有的空间，只是不可见。
● 渲染：元素会被渲染到页面上，但透明度为 0，不可见。

主要区别
  1. 布局影响：
    ○ display: none;：元素完全从布局中移除，不会占据任何空间。
    ○ visibility: hidden;：元素仍然占据空间，只是不可见。
  2. 渲染：
    ○ display: none;：元素不被渲染，浏览器不会对其进行任何绘制操作。
    ○ visibility: hidden;：元素会被渲染，但透明度为 0，不可见。
  3. 使用场景：
    ○ display: none;：适用于需要完全移除元素的情况，例如在响应式设计中隐藏某些内容，或者在页面加载后通过 JavaScript 动态显示或隐藏内容。
    ○ visibility: hidden;：适用于需要保留元素空间但暂时隐藏内容的情况，例如在动画效果中，或者在某些情况下需要保留元素的空间以保持布局稳定。

16.opacity 和 rgba的区别？

opacity 和 rgba 都是 CSS 中用于控制元素透明度的属性，但它们在应用和效果上有明显的区别。下面详细解释这两种属性的区别：
● opacity：设置整个元素及其子元素的透明度，影响范围广。
● rgba：仅设置颜色的透明度，不影响子元素，适用于需要单独控制颜色透明度的场景。

1. opacity

● 作用：设置元素及其所有子元素的透明度。
● 取值范围：0.0（完全透明）到 1.0（完全不透明）。
● 影响范围：不仅影响当前元素，还会影响其所有的子元素。
● 背景透明：设置透明度后，元素的背景和内容都会变得透明。

2. rgba

● 作用：设置颜色的透明度，仅影响指定的颜色。
● 取值格式：rgba(red, green, blue, alpha)，其中 red、green 和 blue 是 0 到 255 之间的整数，alpha 是 0.0（完全透明）到 1.0（完全不透明）之间的浮点数。
● 影响范围：仅影响指定的颜色，不会影响子元素。
● 背景透明：可以单独设置背景色或边框色的透明度，而不影响其他部分。

主要区别
  1. 影响范围：
    ○ opacity：影响当前元素及其所有子元素的透明度。
    ○ rgba：仅影响指定的颜色，不影响子元素。
  2. 透明度控制：
    ○ opacity：设置整个元素的透明度，包括背景、文本和子元素。
    ○ rgba：仅设置颜色的透明度，可以单独控制背景色、边框色等。
  3. 使用场景：
    ○ opacity：适用于需要整体透明效果的场景，例如模态对话框的背景遮罩。
    ○ rgba：适用于需要单独控制颜色透明度的场景，例如半透明的背景色或边框色。

17.隐藏元素的方法有哪些？

  1. display:none;
    a. 元素消失在页面上不占据空间
  2. opacity:0
    a. 设置元素的透明度为0，元素不可见，占据空间位置
  3. visibility:hidden
    a. 让元素消失，占据空间位置
  4. position:absolute
    a. 通过定位将元素移出可视区

18.px和rem的区别

● px：是像素单位，是显示器上呈现画面的像素，是绝对单位
● rem：相对单位，相对于html根节点的font-size值的大小

body{
  font-size:16rpx;
}
div{
  width:5rem; // 5 * 16px
  height:8rem: // 8 * 16px
}

19.重绘和重排有什么区别

1. 重排（Reflow）

● 定义：重排是指浏览器为了重新计算元素的几何属性（如位置和大小）而进行的布局过程。当页面的布局发生变化时，浏览器需要重新计算所有相关元素的位置和大小，这个过程称为重排。
● 触发原因：
○ 添加或删除可见的 DOM 元素。
○ 元素的几何属性变化（如宽度、高度、边距、填充等）。
○ 内容的变化（如文本内容、图片大小等）。
○ 浏览器窗口的大小变化。
○ 计算某些布局相关的属性（如 offsetWidth、offsetHeight、clientWidth、clientHeight 等）。
● 影响范围：重排通常会影响到整个页面或至少一部分页面，因为它涉及到了布局的重新计算。
● 性能影响：重排是一个昂贵的操作，因为它需要重新计算所有相关元素的位置和大小，尤其是当页面包含大量元素时，性能影响会更加明显。

2. 重绘（Repaint）

● 定义：重绘是指浏览器为了重新绘制元素的视觉效果而进行的过程。当元素的样式发生变化但不涉及布局时，浏览器只需要重新绘制该元素，这个过程称为重绘。
● 触发原因：
○ 元素的可见性变化（如 visibility 属性）。
○ 元素的背景颜色、文字颜色、边框颜色等视觉属性变化。
○ 元素的透明度变化。
● 影响范围：重绘通常只影响到发生样式变化的元素本身，不会影响其他元素的布局。
● 性能影响：重绘相对于重排来说成本较低，因为它不需要重新计算布局，只需重新绘制元素的视觉效果。

主要区别
  1. 定义：
    ○ 重排：重新计算元素的几何属性（位置和大小）。
    ○ 重绘：重新绘制元素的视觉效果。
  2. 触发原因：
    ○ 重排：涉及布局变化的操作，如添加或删除 DOM 元素、几何属性变化等。
    ○ 重绘：涉及视觉效果变化的操作，如背景颜色、文字颜色等。
  3. 影响范围：
    ○ 重排：通常影响整个页面或部分页面，因为需要重新计算布局。
    ○ 重绘：通常只影响发生样式变化的元素本身。
  4. 性能影响：
    ○ 重排：成本较高，因为需要重新计算布局。
    ○ 重绘：成本较低，因为只需重新绘制视觉效果。
优化建议
  1. 减少重排：
    ○ 批量修改样式：尽量将多个样式修改操作合并在一起，减少重排的次数。
    ○ 使用 transform 和 opacity：这些属性不会触发重排，只会触发重绘。
    ○ 避免频繁读取布局属性：如 offsetWidth、offsetHeight 等，这些操作会触发重排。
  2. 减少重绘：
    ○ 使用 CSS 动画：利用 CSS 动画而不是 JavaScript 动画，因为 CSS 动画可以更好地利用硬件加速。
    ○ 使用 will-change 属性：提前告知浏览器哪些属性会发生变化，帮助浏览器优化性能。

20.CSS3有哪些新特性

  1. 选择权增强
    a. 伪类选择器： :nth-child()、:first-child、:last-child、:only-child 等
    b. 属性选择器：如 [type=“text”]，可以根据元素的属性和属性值进行选择
  2. 边框和背景
    a. 圆角边框：border-radius
    b. 盒子阴影：box-shadow
    c. 边框图像:border-image
    d. 渐变背景：linear-gradient() 和 radial-gradient() 函数可以创建线性渐变和径向渐变背景
  3. 文本效果
    a. 文本阴影：text-shadow,可以为文字添加阴影效果
    b. 多列布局： 使用 column-count 和 column-gap 属性可以创建多列布局
.multi-column {
  column-count: 3;
  column-gap: 20px;
}
  1. 布局
    a. 弹性布局：display:flex
    b. 网格布局：display:grid
  2. 动画和过渡
    a. 过渡：使用 transition 属性可以创建平滑的过渡效果
    b. 动画：使用 @keyframes 和 animation 属性可以创建复杂的动画效果
  3. 媒体查询
    a. 响应式设计：使用媒体查询可以创建响应式布局，根据不同的屏幕尺寸应用不同的样式
  4. 变量
    a. css变量使用 --variable-name 可以定义变量，并在样式中使用 var() 函数引用变量
  5. 滤镜和混合模式
    a. 滤镜：使用 filter 属性可以应用各种滤镜效果，如模糊、灰度、亮度等
    b. 混合模式：使用 mix-blend-mode 属性可以创建混合模式效果。
  6. 用户界面
    a. 滚动条样式：使用 ::-webkit-scrollbar 等伪元素可以自定义滚动条的样式
  7. 字体和文本
    a. 自定义字体：使用 @font-face 可以加载自定义字体

标签：面试题,元素,height,CSS,border,display,css,属性
From： https://blog.csdn.net/cx18333/article/details/143101406

相关文章

  • 一天10个js面试题（七）
    1、promise的链式调用？链式调用的话就是说then的函数和新promise的resolve一起push到前一个promise的callbacks数组中当前一个promise完成后，调用它的resolve变更状态，在这个resolve里会依次调用callbacks里的回调，这样就执行了then里的方法了然后等then......
  • HTML静态网页成品作业(HTML+CSS)——中华传统美德介绍网页(2个页面)
    ......
  • 前端学习Day8 CSS常用声明 （文本 、图像篇）
    目录一、文本1.1.1、字体样式的常用属性1.1.2、语法格式1.2.1、文本样式1.2.2、语法格式 二、图像2.1.1、图像控制的常用属性2.1.2、语法格式一、文本1.1.1、字体样式的常用属性属性说明font-family设置字体的类型font-weight设置字体的粗细font-size设置字体的......
  • CSS中深入浅出系列之盒子定位：绝对定位！（脱离文档流）
    #在CSS中当一个元素被设置为绝对定位时，它会脱离正常的文档流，不再占据原本在页面布局中的空间。这意味着其他元素会忽略它的存在，就好像它不存在一样，如设计页面中的覆盖层、弹出框等时非常有用处。#一、 绝对定位的定义1、前言绝对定位可以用于脱离文档流，盒子从标准流中......
  • 第六章元素应用 CSS
    6.1使用CSS设置字体样式6.1.1.字体类型语法：font-fanily:字体名称；参数：字体名称按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应用引号括起。说明：用font-family属性可控制显示字体。不同的操作系统，其字体名是不同的。对于Windows系统，其字体名就如Word中的“字体”......
  • count(*)、count(1)哪个更快？面试必问：通宵整理的十道经典MySQL必问面试题
    一、你是如何理解Count(*)和Count(1)的？这两个并没有区别，不要觉得count()会查出全部字段，而count(1)不会。所以count()会更慢，你觉得MySQL作者会这么做吗？可以很明确地告诉你们count()和count(1)是一样的，而正确有区别的是count(字段)。如果你count()的是具体的字段，那......
  • CSS基础速刷 - 非布局样式（未完待续）
    全称：CascadingStyleSheet2.选择器选择器{属性：值；属性：值；}选择器用于匹配HTML元素，有不同的匹配规则，多个选择器可以叠加。浏览器解析CSS选择器方式和我们写选择器的方式是相反的：从右往左选择器分类伪元素（双冒号）是真实存在的元素，可以被显示出来的元素；伪类（单冒号），当鼠......
  • 横扫CSS - HTML知识复习
    HTML常见元素<metaname="viewport">视口,默认像素980px。适配移动端。HTML版本对比HTML元素分类按默认样式分：块级block（div、p）、行内/内联inline（span）、inline-block（select）按内容分：*4.嵌套关系块级元素可以包含行内元素块级元素不一定能包含块级元素行内元素......
  • 【CSS in Depth 2 精译_052】第三部分：现代 CSS 代码组织 + 第 8 章：概述层叠图层及其嵌
    当前内容所在位置（可进入专栏查看其他译好的章节内容）【第三部分现代CSS代码组织】✔️【第八章层叠图层及其嵌套】✔️8.1用layer图层来操控层叠规则（上篇）✔️8.1.1图层的定义（上篇）✔️8.1.2图层的顺序与优先级（精译中⏳）8.1.3revert-layer关键字文......
  • 代码随想录算法训练营第五天| 面试题02.07.链表相交、leetcode142 环形链表II
    1.leetcode面试题02.07.链表相交题目链接：面试题02.07.链表相交-力扣（LeetCode）文章链接：代码随想录1.1代码跟着老师写的一个版本，自己能理解思路了，但是写的话可能还是有一些难#Definitionforsingly-linkedlist.#classListNode:#def__init__(self,x):#......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99