网页设计与制作HTML5+CSS3

任务9

首页页头板块的设计与制作

任务任务9首页页头板块的设计与制作任务9

首页页头板块的设计与制作图9-1

任务9

首页页头板块的设计与制作知识目标技能目标素质目标（1）掌握盒模型的基本概念。（2）掌握盒模型组成和基本属性。（3）掌握盒模型宽度和高度的计算。（1）能够灵活运用盒模型的各个属性。（2）能够使用盒模型的属性完成页面的相关区域排版。（3）能够根据结构图或效果图建立盒模型。（1）掌握并遵循Web开发标准，培养严谨的工作作风。（2）提升逻辑思维能力及实践能力。（3）加强实践教育，培养严谨的代码书写习惯。

盒模型简介盒模型属性任务实现任务9

首页页头板块的设计与制作

1.盒模型简介1.1什么是盒模型1.2盒模型的本质1.3盒模型的组成任务9

首页页头板块的设计与制作

1.1什么是盒模型盒模型就是所有HTML元素可以看做一个装了东西的盒子。1.盒模型简介

1.2盒模型的本质CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括外边距、边框、内边距和实际内容。1.盒模型简介

1.3盒模型的组成大多数浏览器都采用W3C规范，一个标准的W3C盒子模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）这4个属性组成，如图9-2所示。1.盒模型简介图9-2

盒模型简介盒模型属性任务实现任务9

首页页头板块的设计与制作

2.盒模型属性2.1盒模型属性简介2.2width属性和height属性2.3内边距2.4外边距2.5盒模型的宽度与高度的计算任务9

首页页头板块的设计与制作

2.1盒模型属性简介盒模型最里面的部分就是实际内容有属性“宽（width）”和“高（height）”。盒子里面的内容到盒子的边框之间的距离叫“内边距（padding）”，内边距紧紧包围在内容区域的周围。在内边距的外侧边缘是属性“边框（border）”，边框的作用就是在内外边距之间创建一个隔离带，以避免视觉上的混淆。而盒子边框外和其他盒子的距离叫“外边距（margin）”。盒模型属性具体如图9-3所示：2.盒模型属性图9-3

2.2width属性和height属性2.盒模型简介在CSS中width属性和height属性经常被用到，它们分别表示内容区域的宽度和高度。内容是盒子里的“物品”，可以是网页上的任何元素，如文本、图片等各种数据信息。语法格式如下：属性值的含义如表9-1所示：width:auto|length|%;height:auto|length|%;表9-1width和height属性值及其含义值描述auto默认值，浏览器会计算出实际的宽度和高度length使用px、cm等单位定义高度%基于包含它的块级元素的百分比高度

2.2width属性和height属性2.盒模型简介【案例9-1】example9-1.html演示了元素的宽度和高度的设置，代码如下：!DOCTYPEhtmlhtmlheadmetacharset=UTF-8/title元素的宽度和高度/titlestyletype=text/css.d1{width:500px;height:200px;background:#0ff;}

2.2width属性和height属性2.盒模型简介.d2{width:60%;height:40%;background:#fa0;}/style/headbodydivclass=d1 divclass=d2元素的宽高设置/div/div/body/html

2.2width属性和height属性2.盒模型简介【案例9-1】在浏览器中显示效果如图9-4所示：图9-4元素的width和height设置

2.2width属性和height属性2.盒模型简介图9-5元素的宽高值为百分比【解析】子元素div(类名d2)的宽度为500px×60%=300px，高度为200px×40%=80px。如图9-5所示，里面的子元素在浏览器中提示的宽度和高度。

2.3内边距2.盒模型简介内边距是指元素内容与边框之间的距离，