第5章 Div+CSS布局技术 经济管理学院.

Presentation on theme: "第5章 Div+CSS布局技术 经济管理学院."— Presentation transcript:

1 第5章 Div+CSS布局技术 经济管理学院

2 内 容 概 览 Div布局理念 CSS盒模型 盒子的定位 盒子的浮动 CSS常用布局样式

3 5.1 Div布局理念 Div布局页面的优点 传统的HTML标签中，既有控制结构的标签（如<title>标签和<p>标签），又有控制表现的标签（如<font>标签和<b>标签），还有本意用于结构后来被滥用于控制表现的标签（如<h1>标签和<table>标签）。页面的整个结构标签与表现标签混合在一起。 相对于其他HTML继承而来的元素，Div标签的特性就是它是一种块级元素，更容易被CSS代码控制样式。

4 5.1 Div布局理念 5.1.2 使用嵌套的Div实现页面排版
Div标签是可以被嵌套的，这种嵌套的Div主要用于实现更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的关系。 【演练 5-1】未嵌套的Div容器。 【演练 5-2】嵌套的Div容器 。

5 5.1 Div布局理念 【演练 5-1】未嵌套的Div容器。 【演练 5-2】嵌套的Div容器 。

6 5.2 CSS盒模型 盒模型的概念 盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成，如图5-3所示。对象的尺寸与边框等样式表属性的关系，如图5-4所示。

7 5.2 CSS盒模型 盒模型的属性 1．外边距 外边距也称为外补丁。外边距设置属性有：margin-top、margin-right、margin-bottom、margin-left，可分别设置，也可以用margin属性，一次设置所有边距。 2．边框 常用的边框属性有7项：border-top、border-right、border-bottom、border-left、border-width、border-color、border-style。其中border-width可以一次性设置所有的边框宽度，border-color同时设置四面边框的颜色时，可以连续写上4种颜色，并用空格分隔。上述连续设置的边框都是按border-top、border-right、border-bottom、border-left的顺序（顺时针）。

8 5.2 CSS盒模型 盒模型的属性 3．内边距 内边距也称内补丁，位于对象边框和对象之间，包括了4项属性：padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）、padding-left（左内边距），内边距属性不允许负值。与外边距类似，内边距也可以用padding一次性设置所有的对象间隙，格式也和margin相似，这里不再一一列举。

9 5.2 CSS盒模型 【演练5-3】使用外边距（margin）属性实现某个分区的缩进 及位置的居中。

10 5.2 CSS盒模型 【演练5-4】文字垂直居中效果。

11 5.2 CSS盒模型 【演练5-5】使用内边距属性设置分区的内容与边框之间的距离。

12 5.2 CSS盒模型 5.2.3 盒模型的宽度与高度 盒模型的宽度与高度是元素内容、内边距、边框和外边距这4部分的属性值之和。
盒模型的宽度与高度 盒模型的宽度与高度是元素内容、内边距、边框和外边距这4部分的属性值之和。 1．盒模型的宽度 盒模型的宽度=左外边距（margin-left）+左边框（border-left）+左内边距（padding-left）+内容宽度（width）+右内边距（padding-right）+右边框（border-right）+右外边距（margin-right） 2．盒模型的高度 盒模型的高度=上外边距（margin-top）+上边框（border-top）+上内边距（padding-top）+内容高度（height）+下内边距（padding-bottom）+下边框（border-bottom）+下外边距（margin-bottom）

13 5.2 CSS盒模型 外边距的叠加 外边距合并是指当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距高度等于两个发生合并的外边距的高度中的较大者。 1．两个元素垂直相遇时叠加 当两个元素垂直相遇时，第一个元素的下外边距与第二个元素的上外边距会发生叠加合并，合并后的外边距的高度等于这两个元素的外边距值的较大者。 2．两个元素包含时叠加 假设两个元素没有内边距和边框，且一个元素包含另一个元素，它们的上外边距或下外边距也会发生叠加合并。

14 5.2 CSS盒模型 5.2.5 案例——制作网络鞋城关于页的局部信息
案例——制作网络鞋城关于页的局部信息 【演练5-6】使用盒模型技术修饰网络鞋城关于页的局部信息，通过设置边框和边距美化页面。

15 5.2 CSS盒模型

16 5.2 CSS盒模型 【演练5-7】网络鞋城页面顶部的布局，本例文件5-7.html的显示效果如图5-11所示。

17 5.3 盒子的定位 静态定位 静态定位是position属性的默认值，即该元素出现在文档的常规位置，不会重新定位。通常此属性可以不设置，除非是要覆盖以前的定义。 【演练5-8】静态定位。编写相应的CSS样式，生成的文件5-6.html在浏览器中显示的效果如图5-12所示。

18 5.3 盒子的定位 5.3.2 相对定位 相对定位（position:relative;）指的是通过设置水平或垂直位置的值，让这个元素“相对于”它原始的起点进行移动。 【演练5-9】相对定位 。使用上面的示例深入讨论，将id="box"的块级元素向下移动50px，向右移动50px。编写相应的CSS样式，生成的文件5-9.html的显示效果如图5-15所示。

19 5.3 盒子的定位 绝对定位 用“position:absolute;”表示绝对定位，使用绝对定位的对象可以被放置在文档中任何位置，位置将依据浏览器左上角的0点开始计算。 【演练5-10】绝对定位。继续使用上面的示例深入讨论，将id="box-1"的块级元素进行绝对定位，向下移动50px，向右移动200px。编写相应的CSS样式，生成的文件5-10.html在浏览器中显示的效果如图所示。

20 5.3 盒子的定位 相对定位与绝对定位的混合使用 【演练 5-11】相对定位与绝对定位的混合使用。编写相应的CSS样式，生成的文件5-9.html在浏览器中显示的效果如图所示。

21 5.3 盒子的定位 5.3.5 固定定位 固定定位（position:fixed;）其实是绝对定位的子类别。
5.3 盒子的定位 固定定位 固定定位（position:fixed;）其实是绝对定位的子类别。 【演练5-12】固定定位。为了对固定定位演示得更加清楚，将id="box1"的块级元素进行固定定位，将id="box2"的块级元素的高度设置得尽量大，以便能看到固定定位的效果。

22 5.4 盒子的浮动 浮动 浮动（float）是使用率较高的一种定位方式。浮动元素可以向左或向右移动，直到它的外边距边缘碰到包含块内边距边缘或另一个浮动元素的外边距边缘为止。 语法：float : none | left |right 【演练 5-13】向右浮动的元素。本例页面5-13.html的布局的初始状态如图5-17（a）所示，元素box-1向右浮动后的结果如图5-17（b）所示。

23 5.4 盒子的浮动 浮动 【演练5-14】向左浮动的元素。使用上面的示例继续讨论，本例页面5-14.html的页面布局如图5-20（a）所示，所有元素向左浮动后的结果如图5-20（b）所示。

24 5.4 盒子的浮动 浮动 【演练 5-15】空间不够时的元素浮动。使用上面的示例继续讨论，如果id="box"的块级元素宽度不够，无法容纳3个浮动元素box-1、box-2和box-3并排放置，那么部分浮动元素将会向下移动，直到有足够的空间放置它们，本例页面5-15.html的显示效果如图5-19（a）所示。如果浮动元素的高度彼此不同，那么当它们向下移动时可能会被其他浮动元素“挡住”，如图5-19（b）所示。 （a）块级元素宽度不够时的状态 （b）块级元素宽度不够且不同高度的浮动元素

25 5.4 盒子的浮动 清除浮动 在页面布局时，当容器的高度设置为auto且容器的内容中有浮动元素时，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面导致页面出现错位，这个现象称为浮动溢出。为了防止这个现象的出现而进行的CSS处理，就叫清除浮动。 语法：clear : none | left |right | both 【演练5-16】清除浮动。

26 5.5 CSS常用布局样式 两列布局样式 许多网站都有一些共同的特点，即顶部放置一个大的导航或广告条，右侧是链接或图片，左侧放置主要内容，页面底部放置版权信息等，如图所示的布局就是经典的两列布局。

27 5.5 CSS常用布局样式 三列布局样式 三列布局在网页设计时更为常用，如图所示。对于这种类型的布局，浏览者的注意力最容易集中在中栏的信息区域，其次才是左右两侧的信息。