【融职教育】Web前端学习 第2章 网页重构6 盒子模型

一、盒子模型概述

我们可以把一个网页分解成一个个区域，大的区域内部可以嵌套小的区域，就像融职教育的首页一样。

红色的区域是最大的区域，整个网页由三部分红色区域组成，蓝色区域在红色区域之中，绿色区域最小。每个区域都可以看做一个盒子，一个网页就是由一个个大大小小的盒子嵌套而成。

盒子之间或内外是有边距的，通过以下属性控制盒子的边距

• margin：外边距
• padding：内边距

盒子模型还会涉及到我们之前学过的一个属性

• border:设置元素的边框

二、盒子模型属性讲解

margin

margin属性可以控制元素的外边距，简单的说就是设置margin的这个元素与其相邻的元素或外部容器元素的距离，对应有四个属性，上下左右：

• margin-top:上外边距
• margin-bottom:下外边距
• margin-left:左外边距
• margin-right:右外边距

我们以margin-top属性为例，实例代码如下所示：

 1 .box1{
 2     width:300px;
 3     height:300px;
 4     background-color: #f00;
 5 }
 6 .box2{
 7     width:300px;
 8     height:300px;
 9     background-color: #0f0;
10     margin-top:50px;
11     margin-left:80px;
12 }

如代码所示，box2因为设置了margin-top:50px;它与相邻的box1之间有了50px的距离，我们再来看下一个例子。

 1 .box1{
 2     width:300px;
 3     height:300px;
 4     background-color: #f00;
 5 }
 6 .box2{
 7     width:100px;
 8     height:100px;
 9     background-color: #0f0;
10     margin:50px 0 0 80px;
11 }

margin设置多个值，设置如下：

• margin:value - 将上下左右都设置成value值
• margin:value1 value2 value3 value4; - 4个值分别是上右下左
• margin:value1 value2; - 第一个值表示上下，第二个值表示左右
• margin:value1 value2 value3; -第一个值表示上，第二个值表示左右，第三个值表示下。

关于margin属性还有一个常用的技巧，可以将块元素水平居中展示（关于块元素的更多内容，会在下一节讲解）。

定义一个class为box的div，设置样式如下：

1 .box{
2     width:100px;
3     height:100px;
4     background-color:red;
5     /* 为margin设置两个值，第一个值为上下的外边距，第二个值为左右的外边距。 */
6     margin:0 auto;
7 }

左右外边距的值设置为auto，元素就会根据其父级容器的实际宽度，将元素左右两边的外边距设置为相同的值，这样元素就实现了水平居中的效果。

padding

padding属性可以控制元素的内边距，简单的说就是控制容器与内部元素之间的距离，与margin一样，padding也有对应的四个属性分别表示上下左右

• padding-top:上内边距
• padding-bottom:下内边距
• padding-left:左内边距
• padding-right:右内边距

我们以padding-top为例，实例代码如下所示。

 1 .box1{
 2     width:300px;
 3     height:300px;
 4     background-color: #f00;
 5     padding-top:50px;
 6 }
 7 .box2{
 8     width:100px;
 9     height:100px;
10     background-color: #0f0;
11 }

大家可以看到，设置了padding之后，元素的宽度和高度会有变化，先保留这个问题，我们先看盒子模型的下一个属性。

border

我们在前几节内容中已经解除了border这个属性，用法如下所示

1 .box{
2     /* 设置一像素，红色，实现边框 */
3     border:1px solid red;
4 }

其实设置border样式是一个简写，它其实包含了三个属性

• border-style
• border-width
• border-color

上面的代码可以转换成完整的写法

1 .box{
2     /* 边框宽度 */
3     border-width:1px;
4     /* 边框样式 */
5     border-style:solid;
6     /* 边框颜色 */
7     border-color:red;
8 }

关于border-style比较常用的值如下所示

了解以上内容之后，我们在后续的课程中，还是会继续简写border属性。这里顺便说一下，border属性简写的三个值是没有顺序要求的，我们可以写成

1 .box{
2     border:blue 1px solid;
3 }
4 /* 或者 */
5 .box{
6     border:blue solid 1px;
7 }

都不会影响显示效果。

宽高的计算

在我们之前学习的内容中了解到通过width和height属性可以设置元素的宽高，但元素的实际宽高可能与我们设置的width和height属性不同。因为在默认情况下：

• 元素的实际宽度 = border-left + border-right + width + padding-left + padding-right;
• 元素的实际高度 = border-top + border-bottom + width + padding-top + padding-bottom;

实例代码如下所示。

1 .box{
2     width:300px;
3     height:300px;
4     background-color: #f00;
5     padding-left:50px;
6     border-right:50px solid blue;
7 }

我们可以看到，div元素的实际宽度是300+50+50=400px。

但是在实际开发中，为了方便计算，我们希望设置的width的值就是原生的实际宽度，不再希望考虑padding和border的加减运算，我们可以通过box-sizing属性实现这个功能，代码如下所示。

1 .box{
2     width:300px;
3     height:300px;
4     background-color: #f00;
5     padding-left:50px;
6     border-right:50px solid blue;
7     box-sizing: border-box;  /*原生的实际宽度就是width的宽度*/
8 }

通过设置box-sizing: border-box; 元素的实际宽度就是width设置的宽度，而padding和border的值是显示在width值内部的。

其实在实际开发中，将元素设置box-sizing: border-box;确实会给开发带来便利，所以我们可以在元素初始化的时候，将box-sizing: border-box;赋值给所有元素。

1 *{
2     margin:0px;
3     padding:0px;
4     box-sizing: border-box;
5 }

这样，我们既能清楚所有元素的默认边距，又能便利地设置元素的宽度和高度值。

三、课后练习

制作一个简易版的文章列表，要求如下：

1. 列表容器边框为蓝色，宽度为980px。
2. 列表元素宽900px，边框为红色，每一个列表元素都包含着文章标题和文章描述。
3. 列表元素之间的间距为20px。
4. 文章标题与列表上边距距为10px。
5. 文章描述与标题的上边距为10px，距离底部边距为10px。
6. 文章标题与文章列表距离列表的左边距为20px。
7. 列表整理有三个元素。