前端基础实战笔记：文档流 + 盒子模型

文档流与盒子模型详解

一、文档流（Normal Flow）

1. 文档流概念

HTML元素默认处于文档流中，可分为两种状态：

文档流内
脱离文档流

文档流中元素特性

块级元素
1. 独占一行显示
2. 宽度默认继承父元素100%
3. 高度由内容自动撑开
行内元素
1. 与其他行内元素共享一行
2. 宽高由内容决定，不可手动设置
行内块元素
1. 兼具块级和行内元素特性
2. 存在3像素间隙问题

示例代码：

html 复制代码

<div class="box">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
</div>

css 复制代码

.box {
  width: 300px;
  height: 300px;
  background-color: #ccc;
}
.box1, .box2 {
  width: 100px;
  height: 100px;
  background-color: red;
  display: inline-block; /* 转换为行内块元素 */
}
.box2 {
  background-color: green;
}

二、盒子模型（Box Model）

1. 基本概念

盒子模型是CSS布局的核心概念，将页面元素视为矩形盒子进行布局设计，只需关注尺寸和位置。

盒子由四个部分组成：

组成部分	类比说明	功能描述
内容区（content）	商品本体	元素的实际内容区域
内边距（padding）	防震材料	内容与边框的缓冲空间
边框（border）	包装外壳	内容区的保护边界
外边距（margin）	物品间距	控制元素间的距离

盒子实际尺寸 = 内容区 + 内边距 + 边框（外边距不计入）

示例代码：

css 复制代码

.box1 {
  width: 200px;
  height: 200px;
  background-color: red;
}

html 复制代码

<div class="box1">
  这是示例文本内容。
</div>

2、边框（Border）

边框定义元素的边界线，区分盒子内外区域。

css 复制代码

.box {
  border: 30px solid black;
  border-color: transparent transparent transparent black;
}

技巧：利用透明边框可制作三角形箭头效果。

3、内边距（Padding）

控制内容与边框之间的间距。

css 复制代码

.box1 {
  width: 200px;
  height: 200px;
  background-color: #bfa;
  border: 10px solid green;
  padding: 20px; /* 简写形式 */
}
.box2 {
  width: 100%;
  height: 100%;
  background-color: orange;
}

4、外边距（Margin）

设置元素之间的间距。

css 复制代码

.box1 {
  width: 200px;
  height: 200px;
  background-color: #bfa;
  border: 10px solid red;
  margin-top: -50px; /* 负外边距 */
}
.box2 {
  width: 200px;
  height: 200px;
  background-color: orange;
}

5、圆角与阴影

圆角（Border-radius）

css 复制代码

.box2 {
  width: 300px;
  height: 300px;
  background-color: #bfa;
  border-radius: 50px 0 50px 0; /* 简写形式 */
}

圆形实现：正方形元素设置border-radius: 50%

是否需要将这些内容整合为完整的HTML教学文档？可包含所有示例代码和说明，便于保存和使用。