值与单位

CSS中的值和单位有哪些？

答案

核心概念

CSS值和单位系统提供了多种方式来表示尺寸、颜色、时间等属性值，正确选择单位对于创建响应式和可维护的样式至关重要。

长度单位

绝对单位
- px：像素，最常用的单位
- pt：点，主要用于打印
- cm、mm、in：厘米、毫米、英寸
相对单位
- em：相对于父元素的字体大小
- rem：相对于根元素的字体大小
- %：相对于父元素的百分比
- vw、vh：视口宽度/高度的百分比
- vmin、vmax：视口较小/较大尺寸的百分比

颜色值

关键字：red、blue、transparent
十六进制：#ff0000、#f00
RGB/RGBA：rgb(255, 0, 0)、rgba(255, 0, 0, 0.5)
HSL/HSLA：hsl(0, 100%, 50%)、hsla(0, 100%, 50%, 0.5)

时间单位

s：秒
ms：毫秒

角度单位

deg：度
rad：弧度
turn：圈数

代码示例

/* 长度单位示例 */
.container {
  width: 100%;           /* 相对于父元素宽度 */
  max-width: 1200px;     /* 绝对像素值 */
  font-size: 1.2rem;     /* 相对于根元素字体大小 */
  padding: 2em;          /* 相对于当前元素字体大小 */
  height: 50vh;          /* 视口高度的50% */
}

/* 颜色值示例 */
.element {
  color: #333;                    /* 十六进制 */
  background: rgba(255, 0, 0, 0.5); /* RGBA */
  border-color: hsl(120, 100%, 50%); /* HSL */
}

/* 动画时间单位 */
.animation {
  transition: all 0.3s ease;
  animation: rotate 2s infinite;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* 响应式单位应用 */
.responsive {
  font-size: clamp(14px, 2.5vw, 24px); /* 响应式字体 */
  margin: calc(1rem + 2vw);              /* 计算值 */
}

单位选择建议

场景	推荐单位	原因
字体大小	`rem`、`em`	可缩放，易于维护
边距间距	`rem`、`em`	与字体大小成比例
容器宽度	`%`、`vw`	响应式布局
边框宽度	`px`	精确控制
媒体查询	`em`、`rem`	适应用户字体设置

display none 和 visibility hidden 区别

答案

核心概念

display: none 和 visibility: hidden 都是用来隐藏元素的方法，但它们在页面渲染和布局上有本质区别。

主要区别

渲染树中的表现
- display: none 会让元素完全从渲染树中消失，渲染的时候不占据任何空间
- visibility: hidden 不会让元素从渲染树消失，渲染时元素继续占据空间，只是内容不可见
继承性
- display: none 是非继承属性，子孙节点消失由于元素从渲染树消失造成，通过修改子孙节点属性无法显示
- visibility: hidden 是继承属性，子孙节点消失由于继承了 hidden，通过设置 visibility: visible 可以让子孙节点显式
重排重绘影响
- 修改常规流中元素的 display 通常会造成文档重排
- 修改 visibility 属性只会造成本元素的重绘
可访问性
- 读屏器不会读取 display: none 元素内容
- 读屏器会读取 visibility: hidden 元素内容

示例说明

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display vs Visibility 区别演示</title>
    <style>
        .container {
            border: 2px solid #333;
            margin: 20px;
            padding: 10px;
            background-color: #f0f0f0;
        }
        
        .box {
            width: 100px;
            height: 100px;
            background-color: #ff6b6b;
            margin: 10px;
            display: inline-block;
            text-align: center;
            line-height: 100px;
            color: white;
            font-weight: bold;
        }
        
        .display-none {
            display: none;
        }
        
        .visibility-hidden {
            visibility: hidden;
        }
        
        .controls {
            margin: 20px;
            padding: 10px;
            background-color: #e8f4fd;
            border-radius: 5px;
        }
        
        button {
            margin: 5px;
            padding: 8px 16px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        button:hover {
            background-color: #45a049;
        }
        
        .explanation {
            margin: 20px;
            padding: 15px;
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            border-radius: 4px;
        }
    </style>
</head>
<body>
    <h1>Display: none vs Visibility: hidden 区别演示</h1>
    
    <div class="explanation">
        <h3>关键区别：</h3>
        <ul>
            <li><strong>Display: none</strong> - 元素完全从渲染树中消失，不占据空间</li>
            <li><strong>Visibility: hidden</strong> - 元素仍然占据空间，只是不可见</li>
        </ul>
    </div>
    
    <div class="controls">
        <button onclick="toggleDisplay()">切换 Display: none</button>
        <button onclick="toggleVisibility()">切换 Visibility: hidden</button>
        <button onclick="resetAll()">重置所有</button>
    </div>
    
    <div class="container">
        <h3>原始状态：</h3>
        <div class="box">Box 1</div>
        <div class="box">Box 2</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
    </div>
    
    <div class="container">
        <h3>Display: none 效果：</h3>
        <div class="box">Box 1</div>
        <div class="box display-none" id="display-box">Box 2 (display: none)</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
    </div>
    
    <div class="container">
        <h3>Visibility: hidden 效果：</h3>
        <div class="box">Box 1</div>
        <div class="box visibility-hidden" id="visibility-box">Box 2 (visibility: hidden)</div>
        <div class="box">Box 3</div>
        <div class="box">Box 4</div>
    </div>
    
    <script>
        function toggleDisplay() {
            const box = document.getElementById('display-box');
            if (box.classList.contains('display-none')) {
                box.classList.remove('display-none');
            } else {
                box.classList.add('display-none');
            }
        }
        
        function toggleVisibility() {
            const box = document.getElementById('visibility-box');
            if (box.classList.contains('visibility-hidden')) {
                box.classList.remove('visibility-hidden');
            } else {
                box.classList.add('visibility-hidden');
            }
        }
        
        function resetAll() {
            document.getElementById('display-box').classList.remove('display-none');
            document.getElementById('visibility-box').classList.remove('visibility-hidden');
        }
    </script>
</body>
</html>

面试官视角

该题考察对 CSS 渲染机制的理解，是前端面试中常见的基础题。面试官通过此题可以了解候选人对浏览器渲染流程的理解程度。

延伸阅读

px 如何转为 rem

答案

核心概念

px（像素）转换为 rem（根元素字体大小的相对单位）需要先确定一个基准的根元素字体大小。通常，我们将根元素（<html>）的字体大小设置为一个特定的值，比如 16px。

转换公式

假设根元素的字体大小为 16px，那么转换公式为：rem 值 = px 值 / 16

例如，如果有一个元素的宽度为 100px，转换为 rem 就是：100 / 16 = 6.25rem

自动转换方法

使用 CSS 预处理器

Sass 示例：

@function pxToRem($pxValue) {
  @return $pxValue / 16 + rem;
}

.element {
  width: pxToRem(100);
}

Less 示例：

.pxToRem(@pxValue) {
  @remValue: @pxValue / 16;
  @return @remValue + rem;
}

.element {
  width: pxToRem(100);
}

使用 PostCSS 插件

可以使用 postcss-pxtorem 插件实现自动转换：

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 16,
      propList: ['*']
    }
  }
}

面试官视角

该题考察对 CSS 单位系统和响应式设计的理解，是前端开发中的实用知识点。面试官通过此题可以了解候选人对现代 CSS 开发工具链的熟悉程度。

延伸阅读

calc

答案

核心概念

CSS 属性计算函数 calc() 是用来进行动态的尺寸计算以及数值混合运算的一种函数。它增强了纯 CSS 的灵活性，允许你在属性值的设置中直接执行基础的加（+）、减（-）、乘（*）、除（/）运算。

基本语法

property: calc(expression);

其中，expression 可以包括：

其他 CSS 单位值
数字常量
括号来控制运算顺序

基础示例

.element {
  width: calc(100% - 50px); // 宽度是容器宽度减50px
  padding: calc(1em + 10px); // 上下内边距是当前字体尺寸的1em加上10px
  margin: calc(10px / 2); // 外边距为5px
  font-size: calc(12px + 2vw); // 根据视窗宽度改变字体大小
}

高级用法

使用 calc() 的同时可以嵌套使用 min() 和 max() 函数，这种组合对响应式设计非常有用。

.element {
  width: calc(min(100%, 500px)); // 宽度始终是容器的100%，但不超过500px
  font-size: calc(max(12px, 1vw)); // 在某些实现中此用法可能不生效
}

注意事项

在进行除法运算时，要注意除数不能为零
CSS 变量可以在 calc() 中使用，使得你能够进行更灵活的样式控制
calc() 必须确保表达式的两侧是兼容的单位，比如不能将像素（px）和百分比（%）相除
运算符之间需要有空格。calc(50% -50px) 是无效的，而 calc(50% - 50px) 是有效的

实际应用场景

calc() 的一个常见用途是在响应式设计中，你可以用 calc() 来设置一个固定宽度和视口宽度的融合：

.container {
  width: calc(100% - 20px); /* 虚拟列不存在时，容器宽度为屏幕宽度减去20px */
}
.grid {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  // 这部分代码创建一个栅格布局，其中每一格至少宽250px，每列最大填充至填满屏幕
}

面试官视角

该题考察对 CSS 高级特性的理解，是前端开发中的实用知识点。面试官通过此题可以了解候选人对现代 CSS 功能的掌握程度。

延伸阅读

line-gradient

答案

核心概念

在 CSS 中，设置渐变色可以使用 background 属性和相应的渐变函数。CSS 提供两种类型的渐变：线性渐变（linear-gradient）和径向渐变（radial-gradient）。

线性渐变（Linear Gradient）

线性渐变是从一个点到另一个点的颜色过渡。它可以通过以下方式设置：

.element {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}

direction：定义渐变的方向，可以是角度（如 45deg）或预定义的关键词（如 to bottom, to top, to right, to left）
color-stop1，color-stop2，...：渐变中颜色停止点，至少需要两个

示例说明

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 线性渐变演示</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f5f5f5;
        }
        
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .gradient-box {
            height: 150px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-weight: bold;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }
        
        .linear-horizontal {
            background: linear-gradient(to right, #ff6b6b, #4ecdc4);
        }
        
        .linear-vertical {
            background: linear-gradient(to bottom, #a8edea, #fed6e3);
        }
        
        .linear-diagonal {
            background: linear-gradient(45deg, #667eea, #764ba2);
        }
        
        .linear-multiple {
            background: linear-gradient(to right, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
        }
        
        .linear-with-stops {
            background: linear-gradient(to right, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
        }
        
        .radial-gradient {
            background: radial-gradient(circle, #ff6b6b, #4ecdc4);
        }
        
        .radial-ellipse {
            background: radial-gradient(ellipse, #a8edea, #fed6e3);
        }
        
        h2 {
            color: #333;
            margin-bottom: 10px;
        }
        
        .description {
            background: white;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <h1>CSS 渐变效果演示</h1>
    
    <div class="description">
        <h3>渐变类型说明：</h3>
        <ul>
            <li><strong>线性渐变</strong> - 从一个点到另一个点的颜色过渡</li>
            <li><strong>径向渐变</strong> - 从中心点向外扩散的颜色过渡</li>
            <li><strong>颜色停止点</strong> - 定义渐变中颜色的位置和过渡</li>
        </ul>
    </div>
    
    <div class="container">
        <div>
            <h2>水平线性渐变</h2>
            <div class="gradient-box linear-horizontal">
                to right, #ff6b6b, #4ecdc4
            </div>
        </div>
        
        <div>
            <h2>垂直线性渐变</h2>
            <div class="gradient-box linear-vertical">
                to bottom, #a8edea, #fed6e3
            </div>
        </div>
        
        <div>
            <h2>对角线性渐变</h2>
            <div class="gradient-box linear-diagonal">
                45deg, #667eea, #764ba2
            </div>
        </div>
        
        <div>
            <h2>多色线性渐变</h2>
            <div class="gradient-box linear-multiple">
                to right, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4
            </div>
        </div>
        
        <div>
            <h2>带停止点的渐变</h2>
            <div class="gradient-box linear-with-stops">
                to right, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%
            </div>
        </div>
        
        <div>
            <h2>径向渐变（圆形）</h2>
            <div class="gradient-box radial-gradient">
                circle, #ff6b6b, #4ecdc4
            </div>
        </div>
        
        <div>
            <h2>径向渐变（椭圆）</h2>
            <div class="gradient-box radial-ellipse">
                ellipse, #a8edea, #fed6e3
            </div>
        </div>
    </div>
    
    <div class="description">
        <h3>渐变语法：</h3>
        <pre><code>background: linear-gradient(direction, color-stop1, color-stop2, ...);
background: radial-gradient(shape size at position, start-color, ..., last-color);</code></pre>
    </div>
</body>
</html>

径向渐变（Radial Gradient）

径向渐变是从中心点向外扩散的颜色过渡：

.element {
  background: radial-gradient(shape size at position, start-color, ..., last-color);
}

面试官视角

该题考察对 CSS 渐变功能的掌握，是前端开发中的实用知识点。面试官通过此题可以了解候选人对 CSS 视觉效果实现的熟悉程度。

延伸阅读

size

答案

CSS尺寸设置的单位包括：

像素（Pixel，缩写为px）：是最常用的单位，表示屏幕上的一个点，可以精确地指定元素的大小。
百分比（Percentage，缩写为%）：相对于父元素的大小，可以根据父元素的大小来设置子元素的大小。
em：相对于当前元素的字体大小，用于设置字体大小时很常用。
rem：相对于根元素（即html元素）的字体大小。
vh/vw：相对于视口（Viewport）的高度和宽度。
cm、mm、in、pt、pc等长度单位：用于打印样式表，不建议在Web开发中使用。
自定义单位：可以通过CSS的calc()函数自定义单位，比如使用“1fr”作为网格布局中的单位。

需要注意的是，不同的浏览器可能会有不同的计算方式和默认值，因此在设置尺寸时需要进行充分的测试和兼容性处理。

CSS中的值和单位有哪些？​

display none 和 visibility hidden 区别​

px 如何转为 rem​

calc​

line-gradient​

size​

CSS中的值和单位有哪些？

display none 和 visibility hidden 区别

px 如何转为 rem

calc

line-gradient

size