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、写在最后

好了，今天的笔记就到这里。