HTML + CSS + JavaScript 快速入门（二）：CSS 详解

HTML CSS JavaScript 快速入门二CSS 详解2026 年视角这是系列第二讲我们把CSSCascading Style Sheets讲透。CSS 的核心使命控制 HTML 元素的视觉呈现颜色、间距、大小、布局、动画等。2025–2026 年的现代 CSS 已经非常强大Flexbox Grid Container Queries Subgrid Cascade Layers 等特性让“纯 CSS 实现复杂响应式布局”变得现实。1. CSS 引入方式对比日常选择方式写法示例适用场景推荐度2026内联样式h1 stylecolor:red;快速测试、邮件模板、动态 JS 注入★☆☆☆☆内部样式stylestyle body { margin:0; } /style单文件演示、组件库 demo★★☆☆☆外部样式表推荐link relstylesheet hrefstyles.css几乎所有真实项目★★★★★CSS 模块 / Scoped框架内CSS Modules、Styled Components、Vanilla Extract大型组件化项目★★★★☆现代推荐始终使用外部.css文件 link并考虑 PostCSS / Tailwind / UnoCSS 等工具链。2. CSS 选择器速查高频 Top 15选择器类型示例优先级说明元素p1所有段落类.card10最常用ID#header100慎用特异性太高属性[typecheckbox]10表单常用后代.card p—所有后代 p子元素.card p—直接子元素相邻兄弟h2 p—紧跟 h2 的第一个 p通用兄弟h2 ~ p—h2 后面的所有 p:hover / :focusa:hover—交互状态:nth-child(n)li:nth-child(odd)—隔行变色经典:not():not(.active)—排除:has().card:has(img)—2023 超级强大父选择子[data-*][data-themedark]10自定义属性常用3. 盒模型Box Model——必须彻底搞懂现代项目几乎都用box-sizing: border-box;全局设置*, *::before, *::after{box-sizing:border-box;margin:0;padding:0;}border-box vs content-box对比content-box默认老思维width 内容宽度实际占用 width padding borderborder-box现代标配width 内容 padding border 的总宽度4. 现代布局核心Flexbox vs Grid2026 共识特性FlexboxCSS Grid什么时候选谁2026 建议维度1维行或列2维行列—典型场景导航栏、卡片内容对齐、居中整体页面布局、画廊、表单网格—对子元素控制非常灵活grow/shrink/order精确轨道fr / minmax / auto—嵌套友好好一般但 Subgrid 2025–2026 解决—响应式切换容易度★★★★★★★★★☆Flex 更宽容浏览器支持100%100%Subgrid ~92–98%—一句话决策口诀“内容对齐 / 一维排列 → Flexbox”“二维网格 / 显式行列 → Grid”“两者结合”是最常见模式Grid 做页面骨架Flex 做组件内部Flexbox 经典写法背下来.container{display:flex;/* 或 inline-flex */flex-direction:row;/* row | column | row-reverse */justify-content:center;/* 主轴对齐 */align-items:center;/* 交叉轴对齐 */gap:1.5rem;/* 子元素间距最常用 */}.item{flex:1 1 200px;/* grow shrink basis *//* 简写flex-grow flex-shrink flex-basis */}Grid 经典写法2026 推荐.grid-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;/* 或者显式 1fr 1fr 1fr; */}.card{/* 子元素可自行定位 */grid-column:span 2;/* 跨列 */}5. 响应式设计Responsive Design核心技巧2026 年主流策略mobile-first container queries 趋势Mobile-first media queries.card{padding:1rem;}media(min-width:768px){.card{padding:2rem;font-size:1.125rem;}}Container Queries组件级响应式2023–2026 大杀器.card-container{container-type:inline-size;/* 声明容器 */}container(min-width:400px){.card{flex-direction:row;align-items:center;}}优点组件真正可复用不依赖页面宽度支持度2026 年已 95%可放心用6. 常见实用属性速查日常 Top 20属性家族高频属性示例备注文字color, font-size, font-weight, line-height, text-align—间距margin, padding, gapgap 是 flex/grid 神器边框border, border-radiusborder-radius: 9999px → 圆形背景background-color, background-image, background-size: cover—阴影box-shadow: 0 4px 6px rgba(0,0,0,0.1)neumorphism / glassmorphism 常用定位position: relative / absolute / sticky / fixed—显示display: none / block / flex / grid / contentscontents 很有用溢出overflow: hidden / auto—过渡/动画transition: all 0.3s; transformwill-change: transform 优化7. 现代 CSS 最佳实践2026 年写代码心态默认 mobile-first优先用rem/em/ch/vw等相对单位全局重置box-sizing: border-box; margin:0; padding:0;颜色用oklch()/color-mix()更感知均匀层叠控制用layercascade layers管理特异性组件化思维一个组件尽量自包含样式container queries 助力性能避免float、::before大量伪元素、!important滥用8. 练习建议 下一讲预告本周小目标用纯 HTML CSS 复刻 3 个常见组件居中卡片Flex/Grid 两种写法响应式导航栏mobile hamburger → desktop horizontal产品卡片列表auto-fit minmax container query 变体工具推荐VS Code Live Server CSS Peek 插件 Firefox/Chrome DevToolsGrid/Flex inspector 超好用下一讲预告HTML CSS JS 快速入门三JavaScript 基础详解变量 / 函数 / 数组 / 对象DOM 操作入门事件监听现代写法箭头函数、解构、模块你现在是想重点练习布局Flex/Grid/Container Queries还是想看某个具体组件的完整代码示例比如响应式卡片、暗黑模式切换、表单美化告诉我你的需求我可以直接给出代码 解释。