一、文档流（normal flow）
我们创建的元素（标签）默认情况下都处于文档流中，元素分为「在文档流中」和「脱离文档流」两种状态，脱离文档流后，元素的块 / 行内 / 行内块特性将失效。
1. 元素在文档流中的核心特点
（1）块元素
- 独占一行；
- 宽度默认是父元素的 100%；
- 高度默认被内容撑开。
（2）内联元素（行内元素）
- 不会独占一行；
- 宽度、高度默认被内容撑开，无法自定义。
（3）行内块元素
- 兼具块元素、行内元素特点（可自定义宽高，且不独占一行）；
- 存在「三像素空白」问题（多个行内块元素横向排列时，元素间会有默认空白）。
2. 元素类型转换（display）
display: ;通过属性可转换元素类型，实现布局灵活调整（行内块横向排列方式需慎用，避免三像素空白问题）：
可选值：
none 隐藏元素
block 将元素转成块元素
inline 将元素转成行内元素
inline-block 将元素转成行内块元素
使用将块元素转成行内块元素，从而使元素横向排列 的这种方式，我们要慎用
css
.box1, .box2 {
width: 100px;
height: 100px;
background-color: red;
/* 元素类型转换核心语法 */
display: none; /* 隐藏元素 */
display: block; /* 转为块元素 */
display: inline; /* 转为行内元素 */
display: inline-block; /* 转为行内块元素（横向排列） */
}
.box2 {
background-color: green;
}
css
<div class="box">
<div class="box1">box1</div>
<div class="box2">box2</div>
</div>二、盒模型（box model）：元素的大小与间距控制
是一种概念，将页面中所有的元素，看成一个个矩形的盒子，
这样我们在布局整个页面时，就只需要考虑布局的大小以及位置就可以了，不需要考虑形状
每一个盒子，都是由4个部分构成
盒子 空调快递
内容区 空调
内边距 防撞泡沫
边框 快递盒子
外边距 位置
1. 内容区（content）：元素的核心显示区域
内容区是元素中子元素和文本的排列区域，默认情况下，width，height设置的是内容区的大小：
css
.box1 {
width: 200px; /* 内容区宽度200px */
height: 200px; /* 内容区高度200px */
background-color: red;
}
css
<div class="box1">
快赠拢沉我斗是谓毒。
</div>2. 边框（border）：元素的边缘样式
边框属于盒子边缘，边框以内属于盒子内部，出了边框都是盒子的外部
设置边框必须指定三个样式 (大小,颜色,样式)
（1）边框基础语法
css
.box {
/* 1. 简写方式（推荐）：大小 颜色 样式 */
border: 10px black solid;
/* 2. 完整写法（拆分属性） */
border-width: 10px; /* 边框大小，默认1-3px */
border-color: red; /* 边框颜色，默认黑色 */
border-style: solid; /* 边框样式（必写） */
/* 3. 多值写法（上 右 下 左 / 上 左右 下 / 上下 左右 / 全方向） */
border-width: 10px 20px 30px 40px; /* 四个值：上 右 下 左 */
border-color: green red black blue; /* 四个值：上 右 下 左 */
border-style: solid dashed dotted double; /* 四个值：上 右 下 左 */
}（2）边框样式可选值
| 取值 | 说明 |
|---|---|
| none | 无边框 |
| solid | 实线（最常用） |
| dashed | 条状虚线 |
| dotted | 点状虚线 |
| double | 双线 |
注意：以上三个样式，后面的属性值都可以写多个
4个 上 右 下 左
3个 上 左右 下
2个 上下 左右
1个 上下左右
（3）单方向边框设置与去除
border-xxxx: none ;
css
.box {
/* 单独设置某一边边框 */
border-top: 10px solid red; /* 上边框 */
border-left: 10px solid blue; /* 左边框 */
border-right: 10px solid green; /* 右边框 */
border-bottom: 10px solid yellow; /* 下边框 */
/* 去除某一边边框 */
border-bottom: none; /* 去除下边框 */
}（4）实战：自定义三角形箭头
利用边框透明特性实现三角形，是布局中箭头、气泡的常用技巧：
宽和高一定要设置为零
css
.box {
width: 0px; /* 内容区宽高设为0 */
height: 0px;
border: 30px solid black; /* 边框大小30px */
/* 仅保留左边框，其余设为透明 */
border-color: transparent transparent transparent black;
}3. 内边距（padding）：内容区与边框的间距
内边距是内容区到边框的距离，会增加元素的整体大小，支持多值写法和单方向设置。
设置内边距
padding: ;
4个 上 右 下 左
3个 上 左右 下
2个 上下 左右
1个 上下左右
（1）内边距基础语法
css
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px solid green;
/* 1. 多值写法（上 右 下 左 / 上 左右 下 / 上下 左右 / 全方向） */
padding: 10px 20px; /* 上下10px，左右20px */
/* 2. 单方向设置 */
padding-top: 20px; /* 上内边距 */
padding-right: 20px; /* 右内边距 */
padding-bottom: 20px; /* 下内边距 */
padding-left: 20px; /* 左内边距 */
}
.box2 {
width: 100%;
height: 100%;
background-color: orange;
}4. 外边距（margin）：元素之间的间距
控制的是元素与元素之间的距离，并不影响整个盒子的大小
设置外边距
（1）外边距基础语法
css
.box1 {
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px solid red;
/* 1. 多值写法（上 右 下 左） */
margin: 10px 20px 40px 50px;
/* 2. 单方向设置及效果 */
margin-top: -50px; /* 上外边距：正值向下移，负值向上移 */
margin-right: 50px; /* 右外边距：块元素默认无效果 */
margin-bottom: 50px; /* 下外边距：正值下方元素下移，负值上方移 */
margin-left: 50px; /* 左外边距：正值向右移，负值向左移 */
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
}（2）单方向外边距核心特性
| 外边距属性 | 效果说明 |
|---|---|
| margin-top | 正值：元素向下移动；负值：元素向上移动 |
| margin-right | 块元素默认无效果 |
| margin-bottom | 正值：下方元素向下移动；负值：下方元素向上移动 |
| margin-left | 正值：元素向右移动；负值：元素向左移动 |
5. 圆角（border-radius）：元素的圆角样式
border-radius用于设置元素圆角，本质是以指定像素为半径画圆，支持单角设置和全角统一设置。
css
.box2 {
width: 100px;
height: 100px;
background-color: #bfa;
/* 1. 全角统一设置（常用：50%实现圆形） */
border-radius: 50%; /* 宽高相等时，实现正圆形 */
/* 2. 单角设置 */
border-top-left-radius: 50px; /* 左上角圆角 */
border-bottom-right-radius: 50px; /* 右下角圆角 */
}html
css
<div class="box2"></div>总结
文档流和盒模型是 CSS 布局的两大基石，需重点掌握：
- 文档流中块 / 行内 / 行内块元素的核心特性，以及
display实现的元素类型转换； - 盒模型四大组成部分的作用：内容区控制核心大小，边框定义边缘样式，内边距调整内容与边框间距，外边距控制元素间位置；
- 边框的多值写法、三角形自定义技巧，以及外边距的位置偏移特性；
border-radius实现圆角 / 圆形的核心用法。