前端开发基础（三）- css
CSS 简介
CSS 代表层叠样式表（Cascading Style Sheets），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言。
CSS 基本结构
1 | selector { |
- selector：选择器，用于指定要应用样式的 HTML 元素
- property：属性，定义要设置的样式类型
- value：属性值，指定该属性要应用的具体样式
CSS 的插入方式
- 内联样式：直接在 HTML 元素的 style 属性中编写样式
1 | <h1 style="color: blue;">Hello,World!</h1> |
- 内部样式表：将样式写在 HTML 文档的
<style>标签中，通常放在<head>部分中
1 | <style> |
- 外部样式表：将 CSS 代码写在单独的
.css文件中，通过<link>标签引入到 HTML 中
1 | <link rel="stylesheet" href="style.css" /> |
推荐的 CSS 学习资源
课程推荐：
项目实践：
FreeCodeCamp:🛫
❗❗❗ 学习重点 🤔：
选择器（Selectors）
基础选择器：
- 通用选择器（
*）：选择所有元素，如* { margin: 0; } - 元素选择器（
element）：选择特定 HTML 标签，如p { font-size: 16px; } - 类选择器（
.classname）：选择特定类名的元素，如.btn { padding: 10px; } - ID 选择器（
#id）：选择特定 ID 的元素，如#header { position: fixed; }
- 通用选择器（
组合选择器：
- 后代选择器（
element element）：选择所有后代元素，如div p { color: blue; } - 子选择器（
element > element）：仅选择直接子元素，如ul > li { list-style: none; } - 相邻兄弟选择器（
element + element）：选择紧接在另一元素后的元素，如h2 + p { font-weight: bold; } - 通用兄弟选择器（
element ~ element）：选择同一父元素下的后续兄弟元素，如h2 ~ p { margin-left: 20px; }
- 后代选择器（
属性选择器：
- 存在属性选择器（
[attribute]）：如input[required] { border-color: red; } - 指定值的属性选择器（
[attribute=value]）：如input[type="submit"] { background: green; } - 部分匹配：开头（
[attribute^="value"]）、结尾（[attribute$="value"]）、包含（[attribute*="value"]） - 其他匹配：以空格分隔的值（
[attribute~="value"]）、以连字符分隔的值（[attribute|="value"]）
- 存在属性选择器（
伪类选择器：
- 状态伪类：
:hover、:focus、:active、:visited、:disabled - 结构伪类：
:first-child、:last-child、:nth-child(n)、:nth-of-type(n)、:empty - 表单伪类：
:checked、:required、:valid、:invalid - 其他伪类：
:not()、:is()、:has()（新特性）
- 状态伪类：
伪元素选择器：
::before、::after：创建额外的内容::first-letter、::first-line：选择首字母和首行::selection：选择用户选中的文本部分::marker：修改列表项标记样式
选择器优先级计算规则：
- !important > 内联样式 > ID 选择器 > 类/伪类/属性选择器 > 元素/伪元素选择器 > 通用选择器
- 具体计算：(内联, ID 数量, 类/伪类/属性数量, 元素/伪元素数量)
实践技巧：
- 使用更具体的选择器避免过度使用 !important
- 利用 CSS 变量和属性选择器减少重复代码
- 选择器嵌套不宜超过 3 层，避免性能问题
- 使用:is()和:where()简化选择器组
盒模型（Box Model）
标准盒模型详解：
- 内容区域（content）：元素的实际内容，宽高由 width/height 控制
- 内边距（padding）：内容与边框之间的空间，可按上右下左分别设置
- 边框（border）：包括宽度、样式和颜色三个属性
- 外边距（margin）：元素与周围元素的间距，可为负值
盒模型类型：
- 标准盒模型（content-box）：width/height 仅包括内容区域
- 替代盒模型（border-box）：width/height 包括内容区域、padding 和 border
盒模型相关属性：
box-sizing：控制盒模型类型width/height：设置内容区域的宽高min-width/max-width：限制宽度的最小/最大值padding、border、margin：盒模型的三个主要组成部分box-shadow：添加阴影效果border-radius：圆角边框
外边距合并（Margin Collapse）：
- 垂直相邻的外边距会合并，取较大值
- 父子元素的外边距也可能合并
- 解决方法：设置 padding/border、使用 overflow:hidden、创建 BFC 等
内边距百分比特性：
- 内边距的百分比值是基于父元素的宽度计算的，甚至对于 top/bottom 也是如此
实践技巧：
- 在全局设置
box-sizing: border-box使布局更直观 - 使用负 margin 实现特殊布局效果
- 利用 margin: auto 实现水平居中
- 理解并合理利用外边距合并特性
布局（Layout）
传统布局技术：
- 浮动（
float）：使元素左右浮动，允许文本和内联元素环绕 - 清除浮动（
clear）：防止元素被浮动元素影响，常用值：left、right、both - 定位（
position）：static：默认值，元素处于正常文档流relative：相对于自身正常位置偏移absolute：相对于最近的已定位祖先元素定位fixed：相对于视口定位，滚动时保持位置sticky：根据滚动位置在 relative 和 fixed 之间切换
- 浮动（
Flexbox 布局详解：
- 容器属性：
display: flex：启用弹性布局flex-direction：设置主轴方向（row、column 等）justify-content：主轴对齐方式align-items：交叉轴对齐方式flex-wrap：控制项目是否换行gap：设置项目间距
- 项目属性：
flex-grow：增长系数flex-shrink：收缩系数flex-basis：基础尺寸flex：上述三属性的简写align-self：单个项目的对齐方式order：项目排列顺序
- 容器属性：
Grid 布局详解：
- 容器属性：
display: grid：启用网格布局grid-template-columns/rows：定义列/行大小grid-template-areas：命名网格区域grid-gap：网格间距grid-auto-flow：自动放置算法justify/align-content：整体内容对齐方式justify/align-items：单元格内容对齐方式
- 项目属性：
grid-column/row-start/end：指定项目位置grid-area：指定项目所属区域justify/align-self：单个项目对齐方式
- 容器属性：
特殊布局技术：
- 多列布局（Multi-column Layout）：使用
column-count、column-width等 - 表格布局（Table Layout）：使用
display: table相关属性 - 子网格（Subgrid）：让嵌套网格使用父网格的轨道
- 容器查询（Container Queries）：基于容器大小而非视口大小设置样式
- 多列布局（Multi-column Layout）：使用
实践技巧：
- 掌握 CSS Grid
fr单位和minmax()函数 - 使用 Grid 区域（area）命名实现语义化布局
- Flexbox 适合一维布局，Grid 适合二维布局
- 结合
clamp()函数创建流体响应式布局
响应式设计与媒体查询（Responsive Design & Media Queries）
媒体查询语法与用法：
- 基本语法：
@media media-type and (media-feature) { /* CSS rules */ } - 媒体类型：
screen、print、speech、all - 媒体特性：
- 视口相关：
width、height、min/max-width、min/max-height、aspect-ratio - 设备相关：
orientation、resolution、hover、pointer - 环境相关：
prefers-color-scheme、prefers-reduced-motion
- 视口相关：
- 逻辑操作符：
and、not、only、,（或）
- 基本语法：
常见断点设置：
- 移动优先：从小屏幕开始设计，使用
min-width媒体查询 - 桌面优先：从大屏幕开始设计，使用
max-width媒体查询 - 常见断点：
- 手机：< 576px
- 平板：576px - 992px
- 桌面：> 992px
- 超大屏幕：> 1200px
- 移动优先：从小屏幕开始设计，使用
相对单位系统：
- 相对字体单位：
em：相对于父元素字体大小rem：相对于根元素字体大小ch：相当于”0”字符的宽度
- 视口相对单位：
vw/vh：视口宽度/高度的 1%vmin/vmax：视口宽度和高度中的较小/较大值的 1%dvw/dvh：动态视口单位，考虑动态 UI 元素（如移动端地址栏）
- 容器查询单位（新特性）：
cqw/cqh：容器宽度/高度的 1%
- 相对字体单位：
响应式布局策略：
- 弹性网格（Fluid Grid）：使用百分比或 fr 单位
- 弹性图片（Fluid Images）：
max-width: 100%; height: auto; - 响应式排版：使用视口单位和 clamp()函数
- 内容优先级：在小屏幕上隐藏次要内容
响应式设计模式：
- 流式布局（Mostly Fluid）：多列布局在小屏幕上堆叠
- 列下沉（Column Drop）：随着屏幕变窄列逐渐下沉
- 布局位移（Layout Shifter）：根据屏幕大小重新排列内容
- 画布外导航（Off Canvas）：较小屏幕上将导航放在画布外
- 内容优先（Content-first）：根据内容重要性决定显示顺序
实践技巧：
- 使用 CSS 函数实现流体排版：
clamp(最小值, 首选值, 最大值) - 设计系统时使用响应式单位系统而非固定像素值
- 测试多种设备和分辨率，包括平板和触屏设备
- 考虑横屏和竖屏模式的布局差异
CSS 层叠与继承（Cascading & Inheritance）
层叠（Cascading）详解：
- 确定优先级的因素：
- 重要性（Importance）：
!important声明 - 来源（Origin）：用户样式 > 作者样式 > 浏览器样式
- 特异性（Specificity）：ID > 类/属性/伪类 > 元素/伪元素
- 源码顺序（Source Order）：后定义覆盖先定义
- 重要性（Importance）：
- 特异性计算公式：(内联样式, ID 数量, 类/属性/伪类数量, 元素/伪元素数量)
- 特异性实例：
#nav .list li a:hover= (0,1,2,2)body div ul li a[href]= (0,0,1,5)
- 确定优先级的因素：
继承（Inheritance）详解：
- 可继承属性：
- 文本属性：
color,font-family,font-size,line-height等 - 列表属性：
list-style,list-style-type等 - 表格边框属性：
border-collapse,border-spacing等
- 文本属性：
- 不可继承属性：
- 盒模型属性：
width,height,margin,padding,border等 - 定位属性：
position,top,right,bottom,left等 - 背景属性：
background,background-color等
- 盒模型属性：
- 控制继承的属性值：
inherit：强制继承父元素的值initial：重置为属性的初始值unset：重置为自然值（可继承属性为 inherit，不可继承属性为 initial）revert：重置为浏览器默认样式
- 可继承属性：
层叠上下文（Stacking Context）：
- 创建层叠上下文的条件：
- 根元素（
<html>） position值为absolute或relative且z-index不为autoposition值为fixed或sticky- flex/grid 容器的子元素且
z-index不为auto opacity值小于 1transform,filter,backdrop-filter不为none
- 根元素（
- 层叠顺序（从底到顶）：
- 背景和边框
- 负
z-index - 块级盒子
- 浮动盒子
- 内联盒子
z-index: 0- 正
z-index
- 创建层叠上下文的条件：
层叠层（Cascade Layers，新特性）：
- 使用
@layer规则创建和使用层叠层 - 可以控制整个样式表的优先级顺序
- 例如：
@layer base, components, utilities;
- 使用
实践技巧：
- 避免过度使用
!important，可能导致维护困难 - 使用类选择器而非 ID 选择器提高可重用性
- 利用 CSS 变量和继承减少重复代码
- 理解层叠上下文解决 z-index 问题
动画与过渡（Animations & Transitions）
过渡（Transitions）详解：
- 基本属性：
transition-property：指定要过渡的 CSS 属性transition-duration：过渡持续时间transition-timing-function：过渡速度曲线transition-delay：过渡延迟时间transition：简写属性
- 常用速度曲线：
ease：默认，慢-快-慢linear：匀速ease-in：慢-快ease-out：快-慢ease-in-out：慢-快-慢，但比 ease 更剧烈cubic-bezier(n,n,n,n)：自定义贝塞尔曲线steps(n, jump-type)：阶跃函数
- 可过渡的属性：颜色、尺寸、位置、透明度等，不包括
display属性
- 基本属性：
动画（Animations）详解：
- 关键帧规则：
1
2
3
4
5
6
7
8
9
10
11@keyframes animationName {
0% {
/* styles */
}
50% {
/* styles */
}
100% {
/* styles */
}
} - 动画属性：
animation-name：指定关键帧名称animation-duration：一个周期持续时间animation-timing-function：速度曲线animation-delay：开始延迟animation-iteration-count：播放次数（可用infinite）animation-direction：方向（normal、reverse、alternate、alternate-reverse）animation-fill-mode：动画前后样式（none、forwards、backwards、both）animation-play-state：运行状态（running、paused）animation：简写属性
- 关键帧规则：
高级动画技术：
- 帧动画：使用
steps()函数创建逐帧动画 - 视差效果：多层元素以不同速度移动
- 路径动画：沿 SVG 路径移动元素
- 3D 变换：使用
perspective和transform-style: preserve-3d - Web Animations API：使用 JavaScript 控制复杂动画
- 帧动画：使用
性能优化：
- 优先使用
transform和opacity属性 - 使用
will-change属性提示浏览器（谨慎使用） - 避免同时动画过多元素
- 使用
requestAnimationFrame替代 setTimeout/setInterval - 使用硬件加速（transform: translateZ(0)或 will-change: transform）
- 优先使用
实践技巧：
- 使用 CSS 变量动态控制动画参数
- 结合媒体查询提供 reduced-motion 选项
- 使用 animation-play-state 控制动画暂停/播放
- 避免触发页面重排的属性动画
常用 CSS 属性
文本与排版：
font-family：字体系列，如Arial, sans-seriffont-size：字体大小，可用px,em,rem等单位font-weight：字体粗细，如normal,bold,700font-style：字体样式，如normal,italicline-height：行高，可用无单位数值（乘以字体大小）text-align：文本对齐，如left,right,center,justifytext-decoration：文本装饰，如none,underlinetext-transform：文本转换，如uppercase,lowercaseletter-spacing/word-spacing：字符/单词间距white-space：空白处理，如normal,nowrap,preoverflow-wrap/word-break：控制文本如何换行
背景与边框：
background-color：背景颜色background-image：背景图像，如url(image.jpg),linear-gradient()background-position：背景位置background-size：背景尺寸，如cover,containbackground-repeat：背景重复方式background-attachment：背景固定方式，如scroll,fixedbackground：简写属性border-width/-style/-color：边框宽度/样式/颜色border-radius：圆角边框box-shadow：盒阴影outline：轮廓，不占空间
显示与可见性：
display：显示类型- 块级：
block,flex,grid - 内联：
inline,inline-block,inline-flex - 表格：
table,table-cell - 其他：
none,contents
- 块级：
visibility：可见性，如visible,hidden（占位）opacity：不透明度，0-1z-index：堆叠顺序overflow：内容溢出处理，如visible,hidden,scroll,autoclip-path：裁剪元素可见区域
定位与尺寸：
position：定位方式top/right/bottom/left：定位偏移width/height：元素宽高min-width/max-width：最小/最大宽度min-height/max-height：最小/最大高度aspect-ratio：宽高比（新特性）object-fit：替换元素如何填充容器resize：允许用户调整元素大小
实践技巧：
- 使用 CSS 函数如
min(),max(),clamp()控制尺寸 - 善用
calc()函数进行动态计算 - 理解和灵活运用
display属性的不同值 - 掌握背景属性的组合使用创建复杂效果
CSS 变量（Custom Properties）
基础用法：
- 声明变量：
--variable-name: value; - 使用变量：
var(--variable-name, fallback-value) - 全局变量：定义在
:root{}选择器中 - 局部变量：定义在特定选择器中
- 声明变量：
变量继承与作用域：
- CSS 变量遵循 DOM 树继承
- 子元素可以重新定义父元素的变量
- 媒体查询中可重新定义变量值
- 伪类状态可改变变量（如
:hover）
动态性与响应式：
- 结合媒体查询实现响应式设计
- 使用 JavaScript 动态修改：
element.style.setProperty('--var', value) - 基于用户交互改变变量（主题切换）
- 使用
calc()结合变量创建动态值
高级用法：
- 变量组合：一个变量引用另一个变量
- 条件变量：利用回退值实现条件逻辑
- 变量在
@keyframes中的应用 - CSS Houdini：自定义属性类型和转换
实践技巧：
- 创建设计令牌（Design Tokens）系统
- 实现亮/暗主题切换
- 结合媒体查询实现响应式变量
- 使用 DevTools 调试和修改 CSS 变量
性能优化
选择器优化：
- 避免深层嵌套选择器（不超过 3 层）
- 降低选择器特异性，便于覆盖
- 减少通用选择器（
*）的使用 - 避免过度使用后代选择器（空格）
- 优先使用类选择器而非属性选择器
渲染性能：
- 重排（Reflow）：改变元素位置和大小触发
- 高成本操作，尽量避免
- 触发属性：width/height, padding, margin, display, position 等
- 重绘（Repaint）：改变元素外观触发
- 成本低于重排
- 触发属性：color, background, visibility, box-shadow 等
- 合成（Composite Only）：最佳性能
- 只使用 transform 和 opacity 实现动画
- 使用 will-change 或 transform: translateZ(0)提示浏览器
- 重排（Reflow）：改变元素位置和大小触发
CSS 文件优化：
- 压缩 CSS 文件（移除空白和注释）
- 合并多个 CSS 文件减少 HTTP 请求
- 使用简写属性（如 padding 代替四个方向）
- 减少@import 使用（会阻塞渲染）
- 移除未使用的 CSS（PurgeCSS, UnCSS）
关键渲染路径优化：
- 提取关键 CSS 内联到中
- 非关键 CSS 使用异步加载
- 媒体查询分离移动端和桌面端样式
- 使用 preload, prefetch 预加载资源
图像和字体优化：
- 使用适当图像格式（WebP, SVG）
- 响应式图像（srcset, picture 元素）
- 图像延迟加载（lazy loading）
- 使用 font-display 控制字体加载行为
- 使用系统字体减少加载
实践技巧：
- 使用 Performance 面板和 Lighthouse 测量性能
- 优先考虑移动设备性能
- 模拟低速网络测试加载性能
- 使用 CSS 分层加载策略（FOUC 和 FOIT）
CSS 新特性
逻辑属性与值：
- 替代物理方向的属性：
margin-inline/-block代替 left/right/top/bottompadding-inline/-block同上border-inline/-block同上inset-inline/-block用于定位
- 逻辑值：
float: inline-start/inline-endtext-align: start/end
- 书写模式支持：
writing-mode,direction
- 替代物理方向的属性：
容器查询：
- 基于容器尺寸而非视口的响应式设计
- 语法：
1
2
3@container (min-width: 400px) {
/* 样式规则 */
} - 容器设置：
container-type: size; - 命名容器：
container-name: sidebar; - 容器查询单位：
cqw,cqh,cqi,cqb
CSS 嵌套：
- 原生支持选择器嵌套（类似 Sass）：
1
2
3
4
5
6.parent {
color: blue;
& .child {
color: red;
}
}
- 原生支持选择器嵌套（类似 Sass）：
颜色函数与空间：
- 新颜色空间：
lab(),lch(),oklch() - 相对颜色：
color-mix(),color-contrast() - 颜色调整：
color-adjust() - 视觉对比支持：宽色域与 P3 色域
- 新颜色空间：
滚动捕捉与动画：
- 滚动捕捉：
scroll-snap-type,scroll-snap-align - 滚动行为：
scroll-behavior: smooth - 滚动进度动画：
scroll-timeline,view-timeline - 滚动链接：
overscroll-behavior
- 滚动捕捉：
CSS Houdini API：
- Paint API：自定义绘制
- Layout API：自定义布局
- Animation API：自定义动画
- Typed OM：类型化对象模型
可访问性增强：
- 强制颜色：
forced-colors媒体查询 - 减少动画：
prefers-reduced-motion - 高对比度：
prefers-contrast - 透明度调整：
accent-color
- 强制颜色：
实践技巧：
- 使用 Caniuse 和 MDN 检查浏览器支持情况
- 采用渐进增强策略，提供回退方案
- 使用
@supports检测特性支持 - 关注 Web 平台状态了解即将到来的特性
本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 AnA.！
微信- 支付宝
相关推荐
评论