携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第8天，点击查看活动详情
1️⃣概述
大家好，我是翼同学，今天的笔记内容是：
- 盒子模型中的内容区。
在网页开发中，有一个概念叫做盒子模型。我们通过盒子来封装各种各样的HTML元素，再利用CSS设置好盒子样式，摆放到相应的位置。
盒子模型一共由四部分组成：分别是：
- 内容区（
Content） - 边框（
border） - 内边距（
padding） - 外边距（
margin）
我画了个图，如下所示：
今天，我们来看看盒子模型中的内容区和边框
2️⃣内容区
内容区（Content）实际上就是盒子的主体，用于存放内容，其呈现了盒子的主要信息。我们给盒子添加内容，可以是文本、图像等多种类型。内容区有三个属性可以设置，分别是height、width和overflow。
使用width和height属性可以指定盒子内容区的高度和宽度。
举个例子：
div {
width: 600px;
height: 200px;
background-color: pink;
}
如下所示：
当内容信息太多，超出内容区所占范围时，可以使用overflow溢出属性来指定处理方法。overflow的取值有很多，常见的有四个，如下所示：
visible：对溢出内容不做处理，内容区中的信息可能会超出盒子，被呈现在盒子的外部hidden：溢出盒子的内容隐藏掉，不出现滚动条。scroll：隐藏溢出盒子的内容，溢出的内容将以卷动滚动条的方式呈现。auto：当内容没有溢出容器时不出现滚动条，当内容溢出容器时出现滚动条，也就是由浏览器决定如何处理溢出部分
下面对overflow属性取不同的值，来看看之间的区别。
- 一、默认情况下，
overflow的属性为visible，也就是溢出时呈现在盒子的外部，如下所示：
- 二、取值为
hidden，此时溢出的内容将不可见，被隐藏了。如下所示：
- 三、取值为
scroll时，将出现滚动条，用户可以通过拉动滚动条来查看盒子内容。如下所示：
3️⃣边框
基础
边框（border）是环绕内容区（Content）和填充（内边距padding）的边界。
利用边框，我们可以做出很多有趣的样式，最简单的比如导航栏：
边框有三种属性，具体如下所示：
| 边框属性 | 含义 |
|---|---|
border-width | 设置边框的粗细 ，其单位可以是px，也可以是关键字：thin、medium和thick |
border-style | 设置边框的样式，共有10种取值，常用的有solid(实线)、dashed(虚线)、dotted(点线) |
border-color | 为边框指定相应的颜色 |
下面是边框的9种样式示意：
- 另外，边框属性也有简写形式。
举个例子：
div {
border-width: 1px;
border-style: solid;
border-color: skyblue;
}
上面的代码可以简写为：
div {
border: 1px solid skyblue;
}
各边
我们可以只修饰盒子的一边。由于盒子一共有四边，每一边都有三个属性值，因此，CSS规定细分了12个属性。为各边提供了细致的样式修饰。具体如下所示：
| 属性 | 含义 |
|---|---|
border-top-width | 顶部边框粗细 |
border-top-style | 顶部边框样式 |
border-top-color | 顶部边框颜色 |
border-right-width | 右边边框粗细 |
border-right-style | 右边边框样式 |
border-right-color | 右边边框颜色 |
border-bottom-width | 底部边框粗细 |
border-bottom-style | 底部边框样式 |
border-bottom-color | 底部边框颜色 |
border-left-width | 左边边框粗细 |
border-left-style | 左边边框样式 |
border-left-color | 左边边框颜色 |
同样，根据简写形式，每一边都可以合并简写三个属性值，因此CSS规定了四种属性，如下所示：
border-top：顶部边框border-right：右边边框border-bottom：底部边框border-left：左边边框
4️⃣写在最后
好了，今天的笔记就到这里。
