一、核心基础：CSS 盒模型
所有网页元素本质上都是一个矩形盒子，由内到外包含四个部分：
- 内容区（Content）：文字、图片等实际内容
- 内边距（Padding）：内容与边框的距离
- 边框（Border）：盒子的边界线
- 外边距（Margin）：盒子与其他元素的距离
盒模型有两种标准模式（通过box-sizing控制）：
content-box（默认）：宽高仅包含内容区border-box（推荐）：宽高包含内容区 + 内边距 + 边框
二、传统布局方式
-
标准流（Normal Flow）
- 块级元素（div、p 等）垂直排列，宽度默认占满父容器
- 行内元素（span、a 等）水平排列，宽度由内容决定
-
浮动（Float）
- 元素脱离标准流，向左 / 右对齐，常用于实现文字环绕或多列布局
- 需注意清除浮动（
clearfix）以避免父容器高度塌陷
-
定位（Position）
static：默认值，遵循标准流relative：相对自身原位置偏移absolute：相对于最近的非 static 祖先元素定位fixed：相对于浏览器视口固定定位
三、现代布局技术
-
Flexbox（弹性布局）
- 一维布局模型，适合处理行或列的对齐与分布
- 核心概念：容器（flex container） 和 项目（flex item）
- 通过
justify-content（主轴对齐）、align-items（交叉轴对齐）等属性轻松实现居中、等分布局
-
Grid（网格布局）
- 二维布局模型，同时控制行和列，适合复杂页面结构
- 通过
grid-template-columns/grid-template-rows定义网格线 - 支持
grid-area进行区域命名，实现语义化布局
四、响应式布局原理
通过媒体查询（@media）根据屏幕尺寸动态调整样式，结合以下技术实现多设备适配：
- 百分比 /
em/rem等相对单位 - 弹性图片（
max-width: 100%） - 移动优先（Mobile First）策略
一、href 属性
核心作用
全称 Hypertext Reference（超文本引用） ，是 <a> 标签的必填核心属性 ，用于定义超链接跳转的目标地址（资源路径） 。浏览器会根据这个属性的值，决定点击链接后加载什么内容；如果没有 href 属性，<a> 标签就失去了超链接的跳转功能，仅为普通行内文本元素。
详细用法 & 常见取值
1. 相对路径（站内跳转，最常用）
指向当前网站内部的其他页面 / 资源，路径基于当前 HTML 文件的位置计算，是站内页面跳转的首选方式
| 写法 | 含义 | 对应你的代码示例 |
|---|---|---|
./文件名 |
./ 代表当前 HTML 文件所在的文件夹 |
href="./01.html"：指向和当前文件同目录下的 01.html 页面，和你注释的 "当前 01.html 页面所在的文件夹底下的其他文件" 完全对应 |
../文件名 |
../ 代表当前目录的上一级文件夹 |
href="../index.html"：指向上级目录里的 index.html |
文件夹名/文件名 |
指向当前目录下子文件夹内的文件 | href="page/detail.html"：指向当前目录 page 文件夹里的 detail.html |
2. 绝对 URL（站外跳转）
指向互联网上其他网站的完整地址，必须带完整的协议头（http:// / https://），用于跳转到外部网站。
- 正确示例（你的代码）：
href="http://www.baidu.com"，点击后直接跳转到百度官网 - ❌ 错误写法：
href="www.baidu.com"，浏览器会把它当成站内相对路径，无法正确跳转到外部网站
3. 锚点链接（页内 / 跨页定位跳转）
以 # 开头，用于跳转到当前页面 / 其他页面内的指定位置（对应元素的 id 属性），常用于长页面的目录、回到顶部等功能。
- 页内跳转：
<a href="#top">回到顶部</a>，点击后跳转到当前页面id="top"的元素位置 - 跨页锚点：
<a href="./list.html#comment">查看评论</a>，跳转到 list.html 页面里 id="comment" 的位置
4. 特殊功能链接（系统协议调用）
调用系统自带功能，常用场景：
- 邮件链接：
<a href="mailto:xxx@example.com">发送邮件</a>，点击唤起系统默认邮件客户端 - 电话链接：
<a href="tel:13800138000">拨打电话</a>，移动端点击唤起拨号界面
5. 空链接（占位 / JS 事件绑定）
用于暂时不需要跳转、仅绑定 JS 点击事件的场景：
- 推荐写法：
href="javascript:;"，点击后无任何跳转行为，不会改变页面位置 - 不推荐写法：
href="#"，点击后会跳转到页面顶部，会触发页面位置变化
二、target 属性
核心作用
用于指定超链接目标页面的打开方式 ，也就是跳转后的页面在哪个浏览器窗口 / 标签页中加载，是可选属性，默认值为 _self。
详细用法 & 标准取值
所有标准内置取值都以下划线 _ 开头，常用取值如下：
| 取值 | 核心作用 | 对应你的代码示例 |
|---|---|---|
_blank |
在全新的浏览器标签页 / 窗口中打开目标链接，原页面完整保留，不会被覆盖 | <a href="./01.html" target="_blank">网页</a>，和你注释的 "从新的窗口打开网页" 完全对应 |
_self |
默认值 ，在当前的浏览器标签页 / 窗口中打开目标链接，原页面会被新页面覆盖 | <a href="http://www.baidu.com" target="_self">百度一下</a>，和你注释的 "在当前页面打开" 完全对应；不写 target 属性时，浏览器默认就是这个行为 |
_parent |
在当前框架的父级框架集中打开链接，仅在嵌套 iframe 框架的页面中生效，现在使用较少 | - |
_top |
在浏览器的顶层窗口中打开链接，会打破所有嵌套的 iframe 框架，让链接页面占满整个浏览器窗口，现在使用较少 | - |
补充：自定义窗口名称
可以填写非下划线开头的自定义名称（比如 target="myWindow"），规则：
- 第一次点击：新开一个名称为
myWindow的标签页打开链接 - 后续再次点击同 target 名称的链接：不会再开新标签，而是在已打开的
myWindow标签页中刷新加载新链接 - 常用场景：在指定的 iframe 框架中加载页面，比如
<a href="./list.html" target="contentFrame">，会在name="contentFrame"的 iframe 中打开链接
