CSS核心基础精讲

值不值得学：先把页面骨架和排版理顺

很多上班族和转行者刚碰前端，容易卡在页面布局上：照着设计稿写完标签，内容却挤成一团，或者区块位置完全不听使唤。这门课解决的就是这个阶段最具体的痛点——怎么用 CSS 把 HTML 结构变成能看的页面。它不追新框架，也不碰响应式和预处理器，只讲最底层的选择器、盒模型和定位机制。如果你之前靠复制粘贴改样式，遇到边距塌陷或浮动错位就只能盲调，这批视频能帮你把零散认知归拢成体系。但如果你已经能独立用 Flexbox 写完一整页布局，这门课的边际收益就很有限，不必再回头补基础。

适合什么基础、建议先看哪几块

资料默认你懂基本 HTML 标签，能分清结构和样式的区别，但不要求有写 CSS 的经验。内容从怎么把样式挂到页面上开始，逐步推进到选择器优先级和定位机制，节奏偏慢，讲解克制。建议先跳过前两节概述，直接从样式结合方式和优先级看起，因为实际工作里你大概率要改既有样式，搞不清优先级就不知道为什么改不动。看完优先级，重点放在盒模型那几节：边框、内填充、外边距怎么叠加、怎么影响元素实际占位。定位部分相对定位和绝对定位是难点，固定定位可以最后扫一眼。属性选择器和伪类选择器虽然细，但日常改组件状态时用得上，别直接跳过。

资料怎么配合练习、学完能独立做什么

这套视频是讲解型资料，没有配套练习文件，所以关键是自己边看边写。建议准备一个空 HTML 文件，每看完一节就立刻加对应代码验证：比如看完后代选择器，就写一段嵌套列表试试选中范围；看完浮动，就拿一张图片配几行文字做环绕效果。盒模型那几节务必用浏览器开发者工具对照看，观察改一个外边距值时元素实际尺寸怎么变，这比光看视频有效得多。学完后你能独立完成这些事：照着一张简单的静态设计稿，用 div 搭出页面的区块结构，用选择器精准控制每个区块的样式，用浮动或定位把元素摆到指定位置，并且遇到样式不生效时能按优先级排查原因。不涉及复杂交互和动态效果，但作为 CSS 基础打底，足够支撑你后续去学 Flexbox、Grid 和主流框架的样式层。