《CSS盒子模型》

1、让IT教学更简单，让IT学习更有效让IT教学更简单，让IT学习更有效让IT教学更简单，让IT学习更有效第第四四章章 CSS盒子模型盒子模型盒子模型相关盒子模型相关属性属性块元素与行内元素的区别块元素与行内元素的区别让IT教学更简单，让IT学习更有效4 4.2 .2【案例8】：用户中心4 4.1 .1【案例7】：音乐盒4 4.3 .3【案例9】：咖啡店banner目录目录4.44.4【案例10】：图标导航栏让IT教学更简单，让IT学习更有效4.1 【案例案例7】音乐盒音乐盒音乐可以陶冶情操，为我们带来听觉上的享受，随着互联网的普及，在网络上听音乐变得越来越方便。本节将通过盒子模型及其边框属性制作

2、一个音乐盒，如下图所示。案例引入案例引入让IT教学更简单，让IT学习更有效4.1 【案例案例7】知识引入知识引入1 1认识盒子模型认识盒子模型2 2标记标记3 3边框属性边框属性知识知识引入引入让IT教学更简单，让IT学习更有效4.1 【案例案例7】知识点讲解知识点讲解所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。1、认识盒子模型认识盒子模型让IT教学更简单，让IT学习更有效4.1 【案例案例7】知识点讲解知识点讲解div是英文division的缩写，意为

3、“分割、区域”。标记简单而言就是一个区块容器标记，可以将网页分割为独立的、不同的部分，以实现网页的规划和布局。与之间相当于一个容器，可以容纳段落、标题、图像等各种网页元素，也就是说大多数HTML标记都可以嵌套在标记中，中还可以嵌套多层。标记非常强大，通过与id、class等属性配合，然后使用CSS设置样式，来替代大多数的文本标记。 2、标记标记让IT教学更简单，让IT学习更有效4.1 【案例案例7】知识点讲解知识点讲解3、边框属性、边框属性设置内容设置内容样式属性样式属性常用属性值常用属性值上边框上边框border-top-style:样式; border-top-width:宽度; bord

4、er-top-color:颜色; border-top:宽度 样式 颜色; 下边框下边框border-bottom-style:样式; border- bottom-width:宽度; border- bottom-color:颜色; border-bottom:宽度 样式 颜色; 左边框左边框border-left-style:样式; border-left-width:宽度; border-left-color:颜色; border-left:宽度 样式 颜色; 右边框右边框border-right-style:样式; border-right-width:宽度; border-right

5、-color:颜色; border-right:宽度 样式 颜色; 样式综合设置样式综合设置border-style:上边 右边 下边 左边;none无（默认）、solid单实线、dashed虚线、dotted点线、double双实线宽度综合设置宽度综合设置border-width:上边 右边 下边 左边;像素值颜色综合设置颜色综合设置border-color:上边 右边 下边 左边;颜色值、#十六进制、rgb(r,g,b)、rgb(r%,g%,b%)边框综合设置边框综合设置border:四边宽度 四边样式 四边颜色; 让IT教学更简单，让IT学习更有效4.1 【案例案例7】知识点讲解知识点讲

6、解（1）设置边框样式（）设置边框样式（border-style）边框样式用于定义页面中边框的风格，常用属性值如下：none：没有边框即忽略所有边框的宽度（默认值）solid：边框为单实线dashed：边框为虚线dotted：边框为点线double：边框为双实线3、边框属性、边框属性让IT教学更简单，让IT学习更有效4.1 【案例案例7】知识点讲解知识点讲解（1）设置边框样式（）设置边框样式（border-style）在设置边框样式时，既可以对盒子的单边进行设置，也可以综合设置四条边的样式，具体如下：border-top-style:上边框样式;border-right-style:右边框样式;

7、border-bottom-style:下边框样式;border-left-style:左边框样式;border-style:上边框样式 右边框样式 下边框样式 左边框样式;border-style:上边框样式 左右边框样式 下边框样式;border-style:上下边框样式 左右边框样式;border-style:上下左右边框样式;3、边框属性、边框属性让IT教学更简单，让IT学习更有效4.1 【案例案例7】知识点讲解知识点讲解（1）设置边框样式（）设置边框样式（border-style）使用border-style属性综合设置四边样式时，必须按上右下左的顺时针顺序，省略时采用值复制的原则，

8、即一个值为四边，两个值为上下/左右，三个值为上/左右/下。例如只有上边为虚线dashed，其他三边为单实线solid，可以使用border-style综合属性分别设置各边样式：或综合设置四条边，然后采用上边覆盖：3、边框属性、边框属性p borer-style:dashed solid solid solid;p border-style:solid; /*综合设置四边样式*/p border-top-style:dashed; /*上边样式覆盖*/让IT教学更简单，让IT学习更有效4.1 【案例案例7】知识点讲解知识点讲解（2）设置边框宽度（设置边框宽度（border-width）borde

9、r-width属性用于设置边框的宽度，其常用取值单位为像素px。同边框样式一样，边框宽度也可以针对四条边分别设置，或综合设置四条边的宽度，具体如下：border-top-width：上边框宽度;border-right-width：右边框宽度;border-bottom-width：下边框宽度;border-left-width：左边框宽度;border-width：上边框宽度 右边框宽度 下边框宽度 左边框宽度;3、边框属性、边框属性让IT教学更简单，让IT学习更有效4.1 【案例案例7】知识点讲解知识点讲解（3）设置边框颜色（设置边框颜色（border-color）边框的默认颜色为元素本身

10、的文本颜色，对于没有文本的元素，其默认边框颜色为父元素的文本颜色。与边框样式和宽度相同，边框颜色的单边与综合设置如下：border-top-color:上边框颜色;border-right-color:右边框颜色;border-bottom-color:下边框颜色;border-left-color:左边框颜色;border-color:上边框颜色 右边框颜色 下边框颜色 左边框颜色; 3、边框属性、边框属性让IT教学更简单，让IT学习更有效4.1 【案例案例7】知识点讲解知识点讲解（4）综合设置综合设置边框边框使用border-style、border-width、border-color虽

11、然可以实现丰富的边框效果，但是这种方式书写的代码繁琐，且不便于阅读，其实CSS提供了更简单的边框设置方式，具体如下：border-top:上边框宽度 样式 颜色;border-right:右边框宽度 样式 颜色;border-bottom:下边框宽度 样式 颜色;border-left:左边框宽度 样式 颜色;border:四边宽度 样式 颜色;3、边框属性、边框属性让IT教学更简单，让IT学习更有效4.1 【案例案例7】案例实现案例实现让IT教学更简单，让IT学习更有效4.2 【案例案例8】用户中心用户中心注册和登录一些网站时，经常需要填写用户信息。“用户中心”模块用于对用户个人信息进行管理

12、和存储。本节将通过盒子模型内边距及外边距属性制作一个“用户中心”界面，如下图所示。案例引入案例引入让IT教学更简单，让IT学习更有效4.2 【案例案例8】知识引入知识引入1 1内边距属性内边距属性2 2外边距属性外边距属性知识知识引入引入让IT教学更简单，让IT学习更有效4.2 【案例案例8】知识点讲解知识点讲解为了调整内容在盒子中的显示位置，常常需要给元素设置内边距，所谓内边距指的是元素内容与边框之间的距离，也常常称为内填充。在CSS中padding属性用于设置内边距，同边框属性border一样，padding也是复合属性，其相关设置如下：padding-top:上内边距;padding-r

13、ight:右内边距;padding-bottom:下内边距;padding-left:左内边距;padding:上内边距 右内边距 下内边距 左内边距;1、内边内边距属性距属性让IT教学更简单，让IT学习更有效4.2 【案例案例8】知识点讲解知识点讲解网页是由多个盒子排列而成的，要想拉开盒子与盒子之间的距离，合理地布局网页，就需要为盒子设置外边距，所谓外边距指的是元素边框与相邻元素之间的距离。在CSS中margin属性用于设置外边距，它是一个复合属性，与内边距padding的用法类似，设置外边距的方法如下：margin-top:上外边距;margin-right:右外边距;margin-bot

14、tom:下外边距;margin-left:左外边距;margin:上外边距 右外边距 下外边距 左外边距; 2、外边距属性、外边距属性让IT教学更简单，让IT学习更有效4.2 【案例案例8】案例实现案例实现让IT教学更简单，让IT学习更有效4.3 【案例案例9】咖啡店咖啡店banner随着生活水平的提高以及生活节奏的加快，咖啡走进了人们的日常生活，优雅的咖啡店也逐渐成为人们商务、休闲的首选场所。本节将使用如下图所示的素材，结合盒子模型的背景属性，制作一款咖啡店banner。案例引入案例引入让IT教学更简单，让IT学习更有效4.3 【案例案例9】知识引入知识引入1 1设置背景颜色设置背景颜色2

15、2设置背景图像设置背景图像知识知识引入引入3 3设置背景图像平衡设置背景图像平衡4 4设置背景图像的位置设置背景图像的位置5 5设置背景图像固定设置背景图像固定6 6综合设置元素的背景综合设置元素的背景让IT教学更简单，让IT学习更有效4.3 【案例案例9】知识点讲解知识点讲解在CSS中，网页元素的背景颜色使用background-color属性来设置，其属性值与文本颜色的取值一样，可使用预定义的颜色值、十六进制#RRGGBB或RGB代码rgb(r,g,b)。background-color的默认值为transparent，即背景透明，这时子元素会显示其父元素的背景。了解了背景颜色属性back

16、ground-color，下面来演示其用法。1、设置背景颜色设置背景颜色让IT教学更简单，让IT学习更有效4.3 【案例案例9】知识点讲解知识点讲解背景不仅可以设置为某种颜色，在CSS中，还可以将图像作为网页元素的背景，通过background-image属性实现。以【demo4-6】为基础，准备一张背景图像，如下图所示。将图像放在【demo4-6】文件所在的文件夹中，然后更改body元素的CSS样式代码：2、设置设置背景背景图像图像bodybackground-color:#CCC; /*设置网页的背景颜色*/background-image:url(images/jianbian.jpg)

17、; /*设置网页的背景图像*/ 让IT教学更简单，让IT学习更有效4.3 【案例案例9】知识点讲解知识点讲解保存HTML页面，刷新网页，效果如下图所示。2、设置设置背景背景图像图像让IT教学更简单，让IT学习更有效4.3 【案例案例9】知识点讲解知识点讲解默认情况下，背景图像会自动向水平和竖直两个方向平铺，如果不希望背景图像平铺，或者只沿着一个方向平铺，可以通过background-repeat属性来控制，该属性的取值如下：repeat：沿水平和竖直两个方向平铺（默认值）no-repeat：不平铺（图像位于元素的左上角，只显示一次）repeat-x：只沿水平方向平铺repeat-y：只沿竖直方

18、向平铺3、设置设置背景背景图像平铺图像平铺让IT教学更简单，让IT学习更有效4.3 【案例案例9】知识点讲解知识点讲解background-position属性的取值有多种，具体如下：（1）使用不同单位（最常用的是像素px）的数值：直接设置图像左上角在元素中的坐标。例如：（2）使用预定义的关键字：指定背景图像在元素中的对齐方式。水平方向值：left、center、right。垂直方向值：top、center、bottom。4、设置设置背景背景图像的位置图像的位置“background-position:20px 20px;”让IT教学更简单，让IT学习更有效4.3 【案例案例9】知识点讲解知识

19、点讲解（3）使用百分比：按背景图像和元素的指定点对齐。0% 0% 表示图像左上角与元素的左上角对齐。50% 50% 表示图像50% 50%中心点与元素50% 50%的中心点对齐。20% 30% 表示图像20% 30%的点与元素20% 30%的点对齐。100% 100% 表示图像右下角与元素的右下角对齐，而不是图像充满元素。如果只有一个百分数，将作为水平值，垂直值则默认为50%。4、设置设置背景背景图像的位置图像的位置让IT教学更简单，让IT学习更有效4.3 【案例案例9】知识点讲解知识点讲解如果希望背景图像固定在屏幕上，不随着页面元素滚动，可以使用background-attachment属性

20、来设置，其属性值如下：scroll：图像随页面元素一起滚动（默认值）。fixed：图像固定在屏幕上，不随页面元素滚动。5、设置设置背景背景图像固定图像固定让IT教学更简单，让IT学习更有效4.3 【案例案例9】知识点讲解知识点讲解同边框属性一样，在CSS中背景属性也是一个复合属性，可以将背景相关的样式都综合定义在一个复合属性background中。使用background属性综合设置背景样式的语法格式如下：在上面的语法格式中，各个样式顺序任意，中间用空格隔开，不需要的样式可以省略。但实际工作中通常按照背景色、url(图像)、平铺、定位、固定的顺序来书写。6、综合设置元素的背景综合设置元素的背景

21、background:背景色 url(图像) 平铺 定位 固定;让IT教学更简单，让IT学习更有效4.3 【案例案例9】案例实现案例实现让IT教学更简单，让IT学习更有效4.4 【案例案例10】图标导航栏图标导航栏导航菜单是网站的重要组成部分，关系着网站的可用性和用户体验。一个有吸引力的图标导航栏不仅可以给用户带来良好的体验，而且使网站看上去更加生动、有趣。本节将使用“块元素”与“行内元素”间的转换来制作一款图标导航栏，如下图所示。案例引入案例引入让IT教学更简单，让IT学习更有效4.4 【案例案例10】知识引入知识引入1 1元素的类型元素的类型2 2标记标记3 3元素的转换元素的转换知识知识

22、引入引入让IT教学更简单，让IT学习更有效4.4 【案例案例10】知识点讲解知识点讲解HTML标记语言提供了丰富的标记，用于组织页面结构。为了使页面结构的组织更加轻松、合理，HTML标记被定义成了不同的类型，一般分为块标记和行内标记，也称块元素和行内元素。了解它们的特性可以为使用CSS设置样式和布局打下基础，具体如下：1、元素元素的类型的类型让IT教学更简单，让IT学习更有效4.4 【案例案例10】知识点讲解知识点讲解块元素块元素在页面中以区域块的形式出现，其特点是，每个块元素通常都会独自占据一整行或多整行，可以对其设置宽度、高度、对齐等属性，常用于网页布局和网页结构的搭建。常见的块元素有、等，其中标记是最典型的块元素。1、元素元素的类型的类型让IT教学更简单，让IT学习更有效4.4 【案例案例10】知识点讲解知识点讲解行内元素行