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. 问题

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

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

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

## (三) 外边距

### 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. 经验

标签<h1>…<h6>、<p>、、<ul>、<ol>、<li>、<dl>、<dt>、<dd>、<body>等都有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) . 商品分类标题放在<dt> 标签中，统一设置字体样式，使用padding-left设置文本向右缩进距离，然后通过类样式使用background属性分别设置分类标题前的背景小图标。

(4) . 列表内容放在<dd>标签中，统一设置字体样式，使用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块级标签

 <h1>…<h6>、<p>、<div>、列表

### 2. 内联元素

#### 描述

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

#### HTML内联标签

<span>、<a>、<img/>、<strong>...

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

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

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

### 4. display属性

#### 描述

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

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

#### display的常用属性

| 

值

 | 

说明

 |
| 

block

 | 

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

 |
| 

inline

 | 

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

 |
| 

none

 | 

设置元素不会被显示

 |

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

 <body>

 <span>苍茫的天涯我的爱</span>

 <span>绵绵的青山脚下花天开</span>

 <div>什么样的节奏是最呀最摇摆</div>

 <div>什么样的歌声才是最开怀</div>

 </body>

 <style type="text/css">

 span{

 display: block;

 }

 div{

 display: inline;

 }

 </style>

## (二) 课堂案例

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

#### 训练要点

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

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

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

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

#### 需求说明

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

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

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

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

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

#### 实现效果

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

#### 实现思路

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

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

# 三、 本章总结

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

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

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

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

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

# 四、 课后作业

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

### 1. 需求说明

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

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

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

### 2. 实现效果

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

## (二) 商品分类列表

### 1. 需求说明

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

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

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

### 2. 实现效果

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

最后编辑于：2019.04.18 11:15:12

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,013评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,205评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,370评论 0赞 342
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,168评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,153评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,954评论 1赞 283
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,271评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,916评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,382评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,877评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,989评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,624评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,209评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,199评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,418评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,401评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,700评论 2赞 345

2019-04-11，18

推荐阅读更多精彩内容