2019-04-11，18

第10次课 盒子模型

[图片上传失败...(image-511b70-1555560531232)] 学习目标

(1) . 理解盒子模型及其构成

(2) . 会使用盒子属性美化网页元素

(3) . 会计算盒子模型尺寸

(4) . 理解标准文档流及其组成和特点

(5) . 会使用display属性设置元素显示方式

# 一、 盒子模型

## (一) 什么是盒子模型

CSS将网页元素都看成一个个盒子。

[图片上传失败...(image-b9c0ae-1555560531233)] 

下面，我们重点介绍一下盒子模型的几个属性

## (二) 边框

### 1. 描述

边框有3个属性，分别color、width(粗细)和style(样式)

### 2. border-color(边框颜色)属性设置

| 

属性

 | 

说明

 | 

示例

 |
| 

border-top-color

 | 

上边框颜色

 | 

border-top-color:#369;

 |
| 

border-right-color

 | 

右边框颜色

 | 

border-right-color:#369;

 |
| 

border-bottom-color

 | 

下边框颜色

 | 

border-bottom-color:#fae45b;

 |
| 

border-left-color

 | 

左边框颜色

 | 

border-left-color:#efcd56;

 |
| 

border-color

 | 

四个边框为同一颜色

 | 

border-color:#eeff34;

 |
| 

上、下边框颜色：#369

左、右边框颜色：#000

 | 

border-color:#369 #000;

 |
| 

上边框颜色：#369

左、右边框颜色：#000

下边框颜色：#f00

 | 

border-color:#369 #000 #f00;

 |
| 

上、右、下、左边框颜色：

#369、#000、#f00、#00f

 | 

border-color:#369 #000 #f00 #00f;

 |

### 3. border-width（边框的粗细）常用属性值

(1) . thin:细

(2) . medium：默认值

(3) . thick：精

(4) . 像素值

它也分为上下左右边框的粗细设置，如下所示：

border-top-width:5px;

border-right-width:10px;

border-bottom-width:8px;

border-left-width:22px;

border-width:5px ;  //上下左右一个大小

border-width:20px 2px; //上下一样，左右一样

border-width:5px 1px 6px; //上，左右，下

border-width:1px 3px 5px 2px;// 上，右，下，左

### 4. border-style（边框类型）的常用属性值

(1) . none

(2) . hidden

(3) . dotted

(4) . dashed

(5) . solid

(6) . double

### 5. border简写

同时设置边框的颜色、粗细和样式

注意：这三个属性没有先后顺序，建议的顺序：粗细、颜色和样式

**borde**r: 9px #F00 dashed ;

### 6. 案例演示

#### 需求说明

外层div的边框样式为：1px 蓝色（#3a6587） 实线

标题背景颜色为蓝色（#3a6587）

注册内容背景颜色为浅蓝色（#d4e8f7）

文本输出框的边框样式为1px 深灰色（#7b7b7b） 实线

注册按钮以背景图片显示，并且鼠标移到按钮上时显示手状。

#### 实现效果

[图片上传失败...(image-b49a5c-1555560531233)] 

#### 参考代码

#regist {

 width:230px;

 border:1px #3a6587 solid;

}

h1 {

 text-align:center;

 font-size:16px;

 background-color:#3a6587;

 line-height:35px;

 color:#FFF;

}

#regist table {

 background-color:#d4e8f7;

}

#regist table td {

 height:28px;

 font:12px "宋体";

}

.leftTitle {

 width:80px;

 text-align:right;

}

.textInput {

 border:1px #7b7b7b solid;

 width:130px;

 height:17px;

}

.btnRegist {

 background:url(../image/btnRegist.jpg) 0px 0px no-repeat;

 width:100px;

 height:32px;

 border:0px;

 cursor:pointer;

}

### 7. 问题

从上面的例子可以看到，
标签与它外层的
标签，以及下面
标签之间均无内容，可是页面显示却出现了空隙，为什么呢？

[图片上传失败...(image-10e3f6-1555560531232)] 

这是因为
标签的外边距使它与上下内容之间有空隙。

## (三) 外边距

### 1. 描述

外边距（margin）位于盒子模型边框外，指与其他盒子之间的距离，也就是网页中元素与元素之间的距离。

### 2. 外边距属性设置方法

#### 属性

margin-top

margin-right

margin-bottom

margin-left

margin

#### 示例

margin-top: 1 px

margin-right : 2 px

margin-bottom : 2 px

margin-left : 1 px

margin :3px 5px 7px 4px;

margin :3px 5px; //上下，左右

margin :3px 5px 7px; //上，左右，下

margin :8px;

#### 特别说明

  在CSS中，margin除了使用像素值设置外边距之外，还有一个特殊值—auto.这个值通常用在设置盒子在它父容器中居中显示时才使用。

### 3. 案例演示

#### 需求说明

  修改上例，去掉页面中的空隙。

  居中显示

#### 实现效果

[图片上传失败...(image-87888f-1555560531232)] 

#### 参考代码

body,h1{

 margin: 0px;

}

#regist {

 width:230px;

 border:1px #3a6587 solid;

 **margin: 0px auto;**

}

### 4. 经验

标签
…
、
、、
、
、
、
、
、
、等都有margin，实际网页制作时通常通一使用并集选择器设置这些可能产生外边框的标签的margin为0px

## (四) 内边距

### 1. 描述

内边距（Padding）用于控制内容与边框之间的距离，以便精确控制内容在盒子中的位置

### 2. 内边距的属性及设置方法

(1) . padding-left

(2) . padding-right

(3) . padding-top

(4) . padding-bottom

(5) . padding

### 3. 示例

(1) . padding-left:10px;

(2) . padding-right: 5px;

(3) . padding-top: 20px;

(4) . padding-bottom:8px;

(5) . padding:20px 5px 8px 10px ;

(6) . padding:10px 5px;

(7) . padding:30px 8px 10px ;

(8) . padding:10px;

### 4. 案例演示

#### 需求说明

  改造上章中的“全部商品分类”的例子，原先的列表内容与左侧边框有一段距离。

  同时居中显示

[图片上传失败...(image-ea3ffb-1555560531232)] 

#### 参考代码

**body,ul,li{padding:0px; margin:0px;}**

#nav {

 width:230px;

 background-color:#D7D7D7;

 **margin:0px auto;**

}

## (五) 盒子模型的尺寸

#### 盒子模型总尺寸=border-width+padding+margin+内容宽度

[图片上传失败...(image-50c697-1555560531232)] 

## (六) 课堂练习

### 1. 课程导航

#### 需求说明

(1) . 使用标题标签实现课程导航标题，使用无序列表实现课程导航列表

(2) . 课程导航前的图标和每个课程导航右侧的三角图标使用背景图像的方式实现

#### 实现效果

[图片上传失败...(image-4b9011-1555560531232)] 

#### 实现思路

(1) . 使用并集选择器设置body、ul、li、h1标签的内、外边距均为0px。

(2) . 使用border属性设置课程导航边框样式，使用border-top属性设置导航列表上边框的样式。

(3) . 用margin属性设置课程列表居中显示。

(4) . 使用background设置课程导航图标和导航列表图标。

### 2. 聚美优品商品分类

#### 需求说明

(1) . 使用定义列表dl-dt-dd制作商品分类列表

(2) . 分类列表标题与列表内容对齐显示

#### 实现效果

[图片上传失败...(image-a94d30-1555560531232)] 

#### 实现思路

(1) . 页面背景颜色直接使用标签选择器body设置。

(2) . 使用margin和padding设置标题标签、定义列表标签的外边距、内边距为0px。

(3) . 商品分类标题放在
 标签中，统一设置字体样式，使用padding-left设置文本向右缩进距离，然后通过类样式使用background属性分别设置分类标题前的背景小图标。

(4) . 列表内容放在
标签中，统一设置字体样式，使用padding-left设置文本向右缩进距离，使用border-bottom设置下边框的虚线边框。

### 3. 聚美优品美容热点

#### 需求说明

(1) . 使用无序列表制作美容品列表

(2) . 列表图标使用背景图像实现

#### 实现效果

[图片上传失败...(image-261e0c-1555560531232)] 

#### 实现思路

(1) . 页面背景颜色直接使用标签选择器body设置。

(2) . 使用margin和padding设置段落标签、无序列表标签的外边距、内边距为0px。

(3) . 使用list-style-type设置列表的项目符号为无。

(4) . 使用border-bottom设置列表下边框的虚线边框。

(5) . 使用a和a :hover分别设置超链接样式和鼠标悬停在超链接上时文本样式。

### 制作商品图片列表

#### 需求说明

(1) . 使用无序列表实现商品图片列表的排列。

(2) . 超链接图片边框为1px灰色实线，当鼠标移至超链接图片上时，图片边框为1px橙色实线。

#### 实现效果

[图片上传失败...(image-15a0ca-1555560531232)] 

# 二、 标准文档流

标准文档流，简称“标准流”，是指在不使用其他的排版和定位相关的特殊CSS规则时，各种元素的排列规则，即CSS规定的网页元素默认的排列方式。

## (一) 标准文档流的组成

根据标准文档流的排列规则，标准文档流由块级元素和内联元素两类元素组成。

### 1. 块级元素

#### 描述

  块级元素是指以一个块级形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。

#### HTML块级标签

 
…
、
、
、列表

### 2. 内联元素

#### 描述

  对于文字这类元素，各个字母之间横向排列，到最右端自动折行。

#### HTML内联标签

、、、...

### 3. 块级与内联元素的区别

(1) . 块级元素独占一行，内联元素没有自己的区域；

(2) . 内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立。

### 4. display属性

#### 描述

(1) . 块级元素和内联元素的相互转化，即通过设置元素的display属性，可以将块级元素转化为内联元素，也可以将内联元素转化为块级元素。

(2) . 控制元素的显示和隐藏

#### display的常用属性

| 

值

 | 

说明

 |
| 

block

 | 

块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符

 |
| 

inline

 | 

内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符

 |
| 

none

 | 

设置元素不会被显示

 |

#### 示例：块级元素与内联元素的相互转化

 

 苍茫的天涯我的爱

 绵绵的青山脚下花天开

 
什么样的节奏是最呀最摇摆

 
什么样的歌声才是最开怀

 

 

## (二) 课堂案例

### 1. 彩妆热卖产品列表

#### 训练要点

(1) . 使用无序列表制作产品列表

(2) . 使用margin和padding设置外边距和内边距

(3) . 使用background设置页面背景

(4) . 使用display控制元素的显示和隐藏

#### 需求说明

(1) . 页面背景颜色为浅黄色，彩妆热卖产品列表背景颜色为白色；

(2) . 标题放在段落标签中，标题背景颜色为桃红色，字体颜色为白色；

(3) . 使用无序列表制作热卖彩妆产品列表，两个产品列表之间使用虚线隔开；

(4) . 超链接字体颜色为灰色、无下卉线，数字颜色为魄，数字背景为灰色圆圈；

(5) . 当鼠标移到超链接上时，超链接字体为桃红色，无下划，数字颜色为白色，数字背景为桃红色贺圈，并且显示产品对应的图片、价格和当前已购买人数。

#### 实现效果

[图片上传失败...(image-bd99c3-1555560531232)]  [图片上传失败...(image-f40f60-1555560531230)] 

#### 实现思路

(1) . 鼠标移至超链接上时显示产品详细信息内容全放在
标签的
中

(2) . 使用display属性设置div的显示和隐藏

# 三、 本章总结

(1) . 掌握盒子模型的边框、外边距和内边距在网页中的使用方法。

(2) . 会使用盒子模型属性美化图片、
、列表、表单元素等网页元素。

(3) . 能够精确计算盒子模型的尺寸。

(4) . 了解什么是标准文档流，以及标准文档流由块级元素和内联元素组成。

(5) . 使用display属性对块级元素和内联元素进行转换，并且使用display属性设置网页元素的显示和隐藏。

# 四、 课后作业

## (一) 中心开班信息列表

### 1. 需求说明

(1) . 标题左侧的小图标以背景图像的方式实现，背景标题颜色为白色；

(2) . 使用无序列表实现开班信息列表，列表前的小三角箭头和下方的虚线增多使用背景图像的方式实现

(3) . 列表超链接文本颜色为灰色、无下划线，当鼠标悬浮在超链接文本上时，字体颜色发生变化、无下划线。

### 2. 实现效果

[图片上传失败...(image-e99f4f-1555560531232)] 

## (二) 商品分类列表

### 1. 需求说明

(1) . 商品列表放在一个
中，
的4个边框均为2px的橙色实线；

(2) . 每个列表前的图片使用背景图像方式实现，每个列表下方为1px的灰色虚线；

(3) . 文本超链接为黑色粗体，当鼠标悬停在超链接上时文本变化，并且无下划线。

### 2. 实现效果

[图片上传失败...(image-c4cbdc-1555560531232)]