学习路径与核心知识点
在看视频之前,先理解 Div+CSS 布局的整个知识体系，这样学习会更有方向。
（图片来源网络，侵删）
基础入门 (HTML & CSS 核心语法)
这个阶段是地基,必须打牢。
-
HTML (网页的骨架):
- 语义化标签:
<header>,<nav>,<main>,<article>,<section>,<footer>，现代布局不再滥用<div>，而是优先使用语义化标签。 - 常用标签:
<div>,<span>,<p>,<a>,<img>,<ul>,<ol>,<li>等。 - 盒模型: 这是 CSS 布局的灵魂，必须理解
content,padding,border,margin四个部分的关系，以及box-sizing: border-box;的重要性。
- 语义化标签:
-
CSS (网页的样式):
- 选择器: 标签选择器、类选择器、ID 选择器、后代选择器、伪类选择器 (
hover,active) 等。 - 常用属性:
color,background,font,text-align,line-height等。 - 单位:
px(像素),em,rem, ,vh,vw，理解它们的不同用法和响应式设计中的重要性。
- 选择器: 标签选择器、类选择器、ID 选择器、后代选择器、伪类选择器 (
核心布局技术 (CSS 的“魔法”)
这是 Div+CSS 布局的核心，也是视频教程的重点。
（图片来源网络，侵删）
-
浮动布局: 虽然现在不推荐作为主要布局方式，但它是历史性的技术，在很多旧项目中仍在使用，并且是理解清除浮动的基础。
float: left / right;- 清除浮动的方法：
clear: both;、.clearfix伪类clearfix。
-
定位: 用于精确控制元素位置。
position: static;(默认)position: relative;(相对定位)position: absolute;(绝对定位，相对于最近的已定位祖先元素)position: fixed;(固定定位，相对于视口)position: sticky;(粘性定位)
-
Flexbox (弹性盒子布局): 现代布局的基石！ 强烈建议优先学习，非常适合一维布局（一行或一列）。
- 容器属性:
display: flex;,flex-direction,justify-content,align-items,flex-wrap,flex-grow。 - 项目属性:
align-self,order,flex-basis。
- 容器属性:
-
Grid (网格布局): 现代布局的终极武器！ 强烈建议深入学习，非常适合二维布局（行和列）。
- 容器属性:
display: grid;,grid-template-columns,grid-template-rows,grid-gap,grid-template-areas。 - 项目属性:
grid-column,grid-row,grid-area。
- 容器属性:
响应式与进阶
- 媒体查询: 实现响应式设计的关键，让网页在不同设备上都有良好表现。
@media screen and (max-width: 768px) { ... }
- CSS 预处理器: 如 Sass/SCSS，可以让你使用变量、嵌套、混合等高级功能，提高 CSS 的可维护性。
- CSS 框架: 如 Bootstrap (基于 Flexbox) 和 Tailwind CSS (实用类优先)，它们提供了现成的组件和布局系统，能极大提高开发效率。
视频教程推荐 (Bilibili 为主，免费且优质)
B站是国内学习编程最好的平台之一,有很多免费且质量极高的教程。
零基础入门系列 (适合完全不懂的小白)
-
推荐UP主： 黑马程序员
- 课程名称：
2025新版HTML+CSS基础入门到高级 - 课程链接： https://www.bilibili.com/video/BV1XW4y1u7ex
- 优点： 系统性强，从零开始，讲解非常细致，配套有完整的PPT和代码，前半部分扎实讲解 HTML 和 CSS 基础，后半部分会重点讲解 Flexbox 和 Grid，非常适合入门，这是最推荐的系统性课程。
- 课程名称：
-
推荐UP主： 尚硅谷
- 课程名称：
HTML5+CSS3基础入门 - 课程链接： https://www.bilibili.com/video/BV1eJ411c7mu
- 优点： 讲解清晰，逻辑严谨，同样适合零基础，课程内容非常全面，涵盖了所有核心知识点。
- 课程名称：
重点技术精讲系列 (适合想快速掌握某个技术的同学)
-
Flexbox 布局精讲
- 推荐UP主： code_bunny
- 视频名称：
Flexbox 布局完全指南 - 视频链接： https://www.bilibili.com/video/BV1eJ411c7mu?p=36 (这是尚硅谷课程中的一集，单独拿出来看也完全没问题)
- 优点： 图文并茂，动画演示，让你对 Flexbox 的各种属性有非常直观的理解。
-
Grid 布局精讲
- 推荐UP主： 土家酱香饼
- 视频名称：
CSS Grid 布局完全指南 - 视频链接： https://www.bilibili.com/video/BV1pt41137Qj
- 优点： 这位 UP 主的教程非常硬核，讲解深入透彻，通过大量实例让你彻底掌握 Grid 布局。
实战项目系列 (学完基础后，通过项目巩固)
-
仿小米商城首页
- 推荐UP主： 狂神说Java
- 视频名称：
CSS 布局实战：小米商城首页 - 视频链接： https://www.bilibili.com/video/BV1xW411u7vj (在黑马程序员的课程里，但也可以单独找他的实战视频)
- 优点： 一个非常经典的实战项目，能综合运用到浮动、定位、Flexbox 等多种布局技术，做完后会非常有成就感。
-
仿淘宝网首页
- 推荐UP主： 程序员鱼皮
- 视频名称：
前端项目实战：仿淘宝首页 - 视频链接： https://www.bilibili.com/video/BV1gW411W7i5
- 优点： 项目更复杂，更贴近真实企业级开发，鱼皮的讲解注重思路和代码规范，能学到很多工程化的思想。
学习建议
- 不要只看不练: 视频教程是“输入”，而“输出”才是关键。一定要跟着视频敲代码！ 看懂了不等于会做了。
- 从 Flexbox 和 Grid 开始: 虽然浮动和定位很重要，但现代前端开发 90% 的布局需求都可以用 Flexbox 和 Grid 解决，请将它们作为你的主力布局工具。
- 先模仿，再创造: 先跟着教程完整地做 1-2 个项目，确保每个步骤都理解，然后尝试自己独立做一个简单的网站（如个人博客、作品集页面），将学到的知识融会贯通。
- 善用开发者工具: 浏览器自带的开发者工具是你的好朋友，学会使用它来检查元素、修改样式、实时预览效果，这是调试 CSS 的最高效方式。
- 保持耐心: CSS 布局有很多细节和“坑”，遇到问题是正常的，多查资料（如 MDN 文档、Stack Overflow），多总结，慢慢就会变得熟练。
额外资源
- 文档查询 (必备):
- MDN Web Docs: https://developer.mozilla.org/zh-CN/ (最权威、最全面的 Web 技术文档，遇到不懂的 CSS 属性，第一时间查这里)
- Can I use...: https://caniuse.com/ (查询某个 CSS 特性在不同浏览器中的支持情况)
- 在线练习:
- CodePen: https://codepen.io/ (一个在线的 HTML/CSS/JS 代码编辑和分享平台，非常适合做小实验和分享代码)
- CSSDesk: http://cssdesk.com/ (一个简单的 CSS 在线测试工具)
希望这份详细的指南能帮助你顺利入门并精通 Div+CSS 布局！祝你学习愉快！
