值与单位✅
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 | 适应用户字体设置 |
CSS 1PX 是什么？
答案
延伸阅读
- Blink Coordinate Spaces 讲解 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 开发工具链的熟悉程度。
延伸阅读
CSS 有哪些函数值，用过哪些？
答案
核心概念
CSS函数是一种特殊的值类型，允许在CSS属性中执行计算、变换或引用其他值。CSS提供了丰富的内置函数，涵盖数学计算、颜色处理、图形变换、布局控制等多个方面。
数学计算函数
/* calc() - 基础数学运算 */
.element {
width: calc(100% - 50px);
font-size: calc(1rem + 2vw);
margin: calc(10px * 2);
}
/* min() / max() - 取最小/最大值 */
.responsive {
width: min(90vw, 800px); /* 取较小值 */
font-size: max(16px, 1.2vw); /* 取较大值 */
}
/* clamp() - 限制范围 */
.clamp-demo {
font-size: clamp(14px, 4vw, 24px); /* 最小14px，最大24px */
width: clamp(200px, 50%, 600px); /* 响应式宽度限制 */
}
/* abs(), sign(), mod(), rem() - 高级数学函数（较新） */
.advanced-math {
margin: abs(-10px); /* 绝对值：10px */
transform: rotate(calc(sign(-45) * 45deg)); /* 符号函数 */
}
颜色相关函数
/* RGB/RGBA 颜色函数 */
.color-rgb {
color: rgb(255, 0, 0);
background: rgba(0, 0, 255, 0.5);
/* 现代语法 */
border-color: rgb(255 0 0 / 0.8);
}
/* HSL/HSLA 颜色函数 */
.color-hsl {
color: hsl(120, 100%, 50%); /* 绿色 */
background: hsla(240, 100%, 50%, 0.3);
/* 现代语法 */
border-color: hsl(0 100% 50% / 0.5);
}
/* 颜色混合函数（较新特性） */
.color-mix {
color: color-mix(in srgb, red 50%, blue);
background: color-mix(in hsl, yellow, green 30%);
}
/* 相对颜色语法（实验性） */
.relative-color {
--base-color: red;
color: hsl(from var(--base-color) h s calc(l * 0.8));
}
变换函数（transform）
.transform-functions {
/* 平移 */
transform: translate(50px, 100px);
transform: translateX(50px);
transform: translateY(100px);
transform: translateZ(20px);
transform: translate3d(50px, 100px, 20px);
/* 缩放 */
transform: scale(1.5);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scale3d(1.5, 0.8, 1);
/* 旋转 */
transform: rotate(45deg);
transform: rotateX(90deg);
transform: rotateY(180deg);
transform: rotateZ(45deg);
transform: rotate3d(1, 1, 0, 45deg);
/* 倾斜 */
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(20deg);
/* 透视和矩阵 */
transform: perspective(500px);
transform: matrix(1, 0, 0, 1, 50, 100);
transform: matrix3d(1,0,0,0, 0,1,0,0, 0,0,1,0, 50,100,0,1);
}
渐变函数
.gradient-functions {
/* 线性渐变 */
background: linear-gradient(45deg, red, blue);
background: linear-gradient(to right, #ff0000 0%, #0000ff 100%);
/* 径向渐变 */
background: radial-gradient(circle, red, blue);
background: radial-gradient(ellipse at center, red 0%, blue 100%);
/* 圆锥渐变 */
background: conic-gradient(red, yellow, green, blue, red);
background: conic-gradient(from 45deg, red, blue);
/* 重复渐变 */
background: repeating-linear-gradient(
45deg,
red 0px,
red 10px,
blue 10px,
blue 20px
);
background: repeating-radial-gradient(
circle,
red 0px,
red 10px,
transparent 10px,
transparent 20px
);
}
滤镜函数
.filter-functions {
/* 模糊 */
filter: blur(5px);
/* 亮度和对比度 */
filter: brightness(1.5);
filter: contrast(200%);
/* 饱和度和色相 */
filter: saturate(2);
filter: hue-rotate(90deg);
/* 反色和棕褐色 */
filter: invert(1);
filter: sepia(100%);
/* 透明度和阴影 */
filter: opacity(0.5);
filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
/* 组合使用 */
filter: blur(2px) brightness(1.5) contrast(1.2);
}
布局相关函数
.layout-functions {
/* CSS Grid 函数 */
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: repeat(auto-fill, 100px);
/* fit-content() */
width: fit-content(300px);
grid-template-columns: fit-content(200px) 1fr;
/* minmax() */
grid-template-columns: minmax(100px, 1fr) 200px;
}
形状和路径函数
.shape-functions {
/* 基本形状 */
clip-path: circle(50px);
clip-path: ellipse(50px 30px);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: inset(10px 20px 30px 40px);
/* 路径 */
clip-path: path('M 10 10 L 100 10 L 100 100 Z');
/* 形状外边距 */
shape-outside: circle(50px);
shape-outside: polygon(0 0, 100% 0, 100% 100%);
}
内容和引用函数
.content-functions {
/* attr() - 获取属性值 */
content: attr(data-label);
width: attr(data-width px, 100px);
/* counter() - 计数器 */
content: counter(section-counter);
content: counter(item, lower-roman);
/* counters() - 嵌套计数器 */
content: counters(section, ".");
/* url() - 引用资源 */
background-image: url('image.jpg');
cursor: url('cursor.cur'), pointer;
}
CSS变量和环境函数
.variable-functions {
/* var() - CSS变量 */
color: var(--primary-color, blue);
margin: var(--spacing, 1rem);
/* env() - 环境变量 */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
height: env(keyboard-inset-height, 0px);
}
实际应用示例
/* 响应式卡片布局 */
.card {
width: clamp(250px, 30vw, 400px);
height: fit-content(500px);
background: linear-gradient(135deg,
color-mix(in srgb, var(--primary) 80%, white),
var(--primary)
);
transform: perspective(1000px) rotateX(calc(var(--hover, 0) * 5deg));
filter: drop-shadow(0 calc(4px + var(--hover, 0) * 8px)
calc(8px + var(--hover, 0) * 16px) rgba(0,0,0,0.1));
transition: transform 0.3s ease;
}
/* 动态网格 */
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
gap: clamp(1rem, 3vw, 2rem);
}
/* 创意形状 */
.creative-shape {
width: min(300px, 80vw);
height: min(300px, 80vw);
background: conic-gradient(
from calc(var(--rotation, 0) * 1deg),
hsl(0 70% 60%),
hsl(60 70% 60%),
hsl(120 70% 60%),
hsl(180 70% 60%),
hsl(240 70% 60%),
hsl(300 70% 60%),
hsl(360 70% 60%)
);
clip-path: polygon(
50% 0%,
calc(50% + 25px) 25%,
100% 50%,
calc(50% + 25px) 75%,
50% 100%,
calc(50% - 25px) 75%,
0% 50%,
calc(50% - 25px) 25%
);
filter: blur(calc(var(--blur, 0) * 1px))
brightness(calc(1 + var(--brightness, 0) * 0.5));
}
函数分类总结
| 分类 | 函数 | 主要用途 |
|---|---|---|
| 数学计算 | calc(), min(), max(), clamp() | 动态计算、响应式布局 |
| 颜色处理 | rgb(), hsl(), color-mix() | 颜色定义和混合 |
| 变换操作 | translate(), rotate(), scale() | 元素变换动画 |
| 渐变效果 | linear-gradient(), radial-gradient() | 背景渐变 |
| 滤镜效果 | blur(), brightness(), contrast() | 视觉效果处理 |
| 布局控制 | repeat(), minmax(), fit-content() | Grid/Flexbox布局 |
| 形状路径 | circle(), polygon(), path() | 元素裁剪和形状 |
| 内容引用 | attr(), counter(), url() | 动态内容和资源 |
| 变量环境 | var(), env() | 动态值和环境适配 |
面试官视角
- 差：只知道几个基础函数如
calc()、rgb() - 良：了解常用函数分类，能说出实际使用经验
- 优：深入理解函数组合使用，能举例复杂应用场景，了解新特性
延伸阅读
- CSS函数参考 - MDN完整函数列表
- CSS Values and Units - W3C规范
- Can I Use - CSS Functions - 浏览器兼容性查询
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，...：渐变中颜色停止点，至少需要两个
示例说明
径向渐变（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中有哪些颜色表示方法，有什么区别？
答案
核心概念
CSS提供了多种颜色表示方法，让开发者能够准确地定义元素的颜色值，满足不同的设计需求。
颜色表示方法
-
关键字颜色
- 预定义颜色名：
red、blue、green等 - 系统颜色：
transparent、currentColor
- 预定义颜色名：
-
十六进制（Hex）
- 6位格式：
#ff0000（红色） - 3位简写：
#f00（等同于#ff0000） - 8位格式：
#ff0000ff（包含透明度）
- 6位格式：
-
RGB/RGBA
- RGB：
rgb(255, 0, 0) - RGBA：
rgba(255, 0, 0, 0.5)（带透明度）
- RGB：
-
HSL/HSLA
- HSL：
hsl(0, 100%, 50%)（色相、饱和度、亮度） - HSLA：
hsla(0, 100%, 50%, 0.5)（带透明度）
- HSL：
-
现代颜色语法
- 新的RGB语法：
rgb(255 0 0 / 0.5) - 新的HSL语法：
hsl(0 100% 50% / 0.5)
- 新的RGB语法：
代码示例
/* 关键字颜色 */
.keyword {
color: red;
background: transparent;
border-color: currentColor; /* 继承文字颜色 */
}
/* 十六进制 */
.hex {
color: #ff0000; /* 红色 */
background: #f00; /* 红色简写 */
border-color: #ff000080; /* 带透明度 */
}
/* RGB/RGBA */
.rgb {
color: rgb(255, 0, 0);
background: rgba(255, 0, 0, 0.5);
/* 新语法 */
border-color: rgb(255 0 0 / 0.5);
}
/* HSL/HSLA */
.hsl {
color: hsl(0, 100%, 50%); /* 红色 */
background: hsla(120, 100%, 50%, 0.8); /* 绿色带透明度 */
/* 新语法 */
border-color: hsl(240 100% 50% / 0.3); /* 蓝色带透明度 */
}
/* 实际应用 */
.theme-colors {
--primary: #007bff;
--success: hsl(120, 100%, 25%);
--warning: rgb(255, 193, 7);
--danger: rgba(220, 53, 69, 0.9);
}
颜色选择建议
| 场景 | 推荐格式 | 原因 |
|---|---|---|
| 设计稿转换 | Hex | 设计工具常用 |
| 需要透明度 | RGBA/HSLA | 支持透明度 |
| 颜色调整 | HSL | 便于调整明暗 |
| CSS变量 | 任意格式 | 根据需求选择 |
inherit、initial、unset、revert 有什么区别？
答案
核心概念
inherit、initial是CSS中用于控制属性值继承和重置的关键字，它们与unset、revert一起构成了CSS的全局关键字系统，用于明确控制属性值的来源。
关键字详解
-
inherit
- 强制属性值从父元素继承
- 对所有属性都有效，包括通常不继承的属性
- 如果没有父元素，则使用属性的初始值
-
initial
- 将属性重置为CSS规范中定义的初始值
- 忽略用户代理样式表和用户样式表
- 每个CSS属性都有规范定义的初始值
- 初始值列表可以在规范中找到 Property Index
-
unset
- 对于可继承属性：表现如
inherit - 对于不可继承属性：表现如
initial
- 对于可继承属性：表现如
-
revert
- 回滚到用户代理样式表中的值
- 如果用户代理样式表中没有值，则表现如
unset
代码示例
/* HTML结构 */
/*
<div class="parent">
<p class="child">子元素文本</p>
</div>
*/
.parent {
color: red;
border: 2px solid blue;
font-size: 18px;
}
.child {
/* inherit - 强制继承父元素的值 */
border: inherit; /* 继承父元素的 border: 2px solid blue */
/* initial - 使用初始值 */
color: initial; /* 重置为黑色（color的初始值） */
font-size: initial; /* 重置为medium（约16px） */
/* unset - 智能重置 */
margin: unset; /* margin不可继承，等同于initial：0 */
font-family: unset; /* font-family可继承，等同于inherit */
/* revert - 回到浏览器默认样式 */
display: revert; /* 回到p元素的默认display: block */
}
/* 实际对比示例 */
.comparison {
color: blue;
border: 1px solid red;
margin: 20px;
}
.comparison .test1 {
color: inherit; /* 蓝色（继承父元素） */
}
.comparison .test2 {
color: initial; /* 黑色（初始值） */
}
.comparison .test3 {
border: inherit; /* 1px solid red（继承父元素） */
}
.comparison .test4 {
border: initial; /* none（border的初始值） */
}
.comparison .test5 {
margin: unset; /* 0（margin不可继承，使用初始值） */
}
.comparison .test6 {
color: unset; /* 蓝色（color可继承） */
}
实际应用场景
/* 重置按钮样式 */
.btn-reset {
all: initial; /* 重置所有属性为初始值 */
font-family: inherit; /* 但保持字体继承 */
}
/* 强制继承 */
.inherit-all {
border: inherit; /* 让border也能继承 */
background: inherit; /* 让background也能继承 */
}
/* 智能重置 */
.smart-reset {
all: unset; /* 智能重置所有属性 */
}
/* 回到浏览器默认 */
.browser-default {
all: revert; /* 回到浏览器默认样式 */
}
/* 组件样式重置 */
.component {
/* 重置可能被全局样式影响的属性 */
color: initial;
background: initial;
border: initial;
/* 保持有用的继承 */
font-family: inherit;
font-size: inherit;
}
属性继承性对比
/* 可继承属性示例 */
.inheritable-props {
color: red; /* 可继承 */
font-family: Arial; /* 可继承 */
font-size: 18px; /* 可继承 */
line-height: 1.5; /* 可继承 */
text-align: center; /* 可继承 */
}
/* 不可继承属性示例 */
.non-inheritable-props {
border: 1px solid blue; /* 不可继承 */
margin: 10px; /* 不可继承 */
padding: 5px; /* 不可继承 */
width: 200px; /* 不可继承 */
background: yellow; /* 不可继承 */
}
.child-demo {
/* 对于可继承属性 */
color: unset; /* 等同于 inherit，继承父元素 */
color: initial; /* 重置为黑色 */
/* 对于不可继承属性 */
margin: unset; /* 等同于 initial，重置为0 */
margin: inherit; /* 强制继承父元素的margin */
}
关键字对比表
| 关键字 | 可继承属性 | 不可继承属性 | 使用场景 |
|---|---|---|---|
inherit | 继承父元素值 | 强制继承父元素值 | 强制继承，包括通常不继承的属性 |
initial | 重置为初始值 | 重置为初始值 | 完全重置，忽略继承和用户样式 |
unset | 继承父元素值 | 重置为初始值 | 智能重置，根据属性特性决定行为 |
revert | 回到用户代理样式 | 回到用户代理样式 | 回到浏览器默认样式 |
面试官视角
- 差：只知道基本概念，不理解继承机制
- 良：理解inherit和initial的区别，知道基本用法
- 优：深入理解CSS继承体系，能举例说明实际应用场景，了解unset和revert
延伸阅读
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元素内容
- 读屏器不会读取
示例说明
面试官视角
该题考察对 CSS 渲染机制的理解，是前端面试中常见的基础题。面试官通过此题可以了解候选人对浏览器渲染流程的理解程度。
延伸阅读
display:none 和 visibility:hidden 有什么区别？
答案
| 分类 | display: none | visibility: hidden |
|---|---|---|
| 空间占用 | 元素从文档流中移除，不占空间，后续元素会填补其位置 | 元素仍占据空间，仅不可见，后续元素不变 |
| 继承性 | 非继承属性，子元素也被隐藏（父元素被移除） | 是继承属性，子元素也默认隐藏，但可设置 visible 显示 |
| 重排与重绘 | 触发重排（Reflow），影响页面布局 | 仅触发重绘（Repaint），不影响页面布局 |
面试官视角
- 差：不了解两种隐藏方式的区别
- 良：知道基本区别，能根据场景选择合适方式
- 优：深入理解性能影响，能优化页面渲染
延伸阅读
- MDN: visibility - 官方文档
- CSS性能优化 - 性能指南