《网页设计与制作项目教程》_任务9首页页头板块的设计与制作.pptxVIP

任务9

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

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

知识目标;

1.盒模型简介

2.盒模型属性

3.任务实现;

1.盒模型简介

1.1什么是盒模型

1.2盒模型的本质1.3盒模型的组成;

1.盒模型简介

1.1什么是盒模型

盒模型就是所有HTML元素可以看做一个装了东西的盒子。;

1.盒模型简介

1.2盒模型的本质

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

1.盒模型简介

1.3盒模型的组成

大多数浏览器都采用W3C规范，一个标准的W3C盒子模型由内容(content)、

内边距(padding)、边框(border)、外边距(margin)这4个属性组成，如图9-2

所示。

margin(外边距)。

border(边框)。

padding(内边距)

content(内容);

任务9

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

1.盒模型简介

2.盒模型属性

3.任务实现;

2.盒模型属性

2.1盒模型属性简介

2.2width属性和height属性

2.3内边距

2.4外边距

2.5盒模型的宽度与高度的计算;

2.1盒模型属性简介

盒模型最里面的部分就是实际内容有属性

“宽(width)”和“高(height)”。

盒子里面的内容到盒子的边框之间的距离叫“内边距(padding)”,内边距紧紧包围在内容区域的周围。在内边距的外侧边缘是属性“边框(border)”,边框的作用就是在内外边距之间创建一个隔离带，以避免视觉上的混淆。

而盒子边框外和其他盒子的距离叫“外边距(margin)”。盒模型属性具体如图所示：;

2.盒模型简介

2.2width属性和height属性

在CSS中width属性和height属性经常被用到，它们分别表示内容区域的宽度和高度。内容是盒子里的“物品”,可以是网页上的任何元素，如文本、图片等各种数据信息。语法格式如下：;

2.盒模型简介

2.3内边距

内边距是指元素内容与边框之间的距离，这个距离可以调整内容在盒子中的位置，也称

142之为填充。内边距的设置属性有padding-top、padding-right、padding-bottom、padding-left,可分别设置，也可以用padding属性，一次设置所有内边距。

1.单边的内边距

CSS可以为元素的每一侧指定内边距的属性，语法格式如下：;

2.盒模型简介

2.3内边距

2.简写属性padding

padding属性是一个复合属性，遵循值复制的原则，可以有1到4个值。

(1)设置1个值：上下左右内边距的值都相同。

【例如】padding:25px;表示上下左右四个方向的内边距的值都是25px。

(2)设置2个值：第1个值为上下内边距的值，第2个值为左右内边距的值。

【例如】padding:25px50px;表示上下内边距的值为25px,左右内边距的值为50px。

(3)设置3个值：第1个值为上内边距的值，第2个值为左右内边距的值，第3个为下内边

距的值。

【例如】padding:25px50px75px;表示内边距的值为25px,左右内边距的值为50px,下内边距的值为75px。

(4)设置4个值：第1个值为上内边距的值，第2个值为右内边距的值，第3个为下内边距的值，第4个为左内边距的值。

【例如】padding:25px50px75px100px;表示上内边距的值为25px,右内边距的值为50px,下内边距的值为75px,左内边距的值为100px。;

2.盒模型简介

2.4外边距

外边距指的是元素边框与相邻元素之间的距离。在CSS中，margin属性用于设置外边距来控制盒子与盒子之间的距离。

1.单边的外边距

CSS可以为元素的每一侧指定外边距的属性，语法格式如下：;

2.盒模型简介

2.4外边距

2.简写属性margin

为了缩减代码，可以在一个属性margin中指定所有外边距属性。margin属性是一个复合属性，属性值可以有1到4个值。与内边距padding的用法类似。

使用margin注意以下两点：

(1)外边距可以为负值，使相邻元素重叠。

(2)当使用盒元素进行布局时，使用了宽度属性，同时将margin的左右外边距设置为auto时，可