第5章Div+CSS布局方法分析.ppt

5.1 Div布局理念 5.2 CSS盒模型 5.3 CSS的定位 5.4 浮动与清除浮动 5.5 CSS常用布局样式 5.6 Div+CSS布局综合案例 第5章 Div+CSS布局方法 5.1.1 Div布局页面的优点 采用Div+CSS布局方式的优点如下： ? 缩减了页面代码，提高了页面的浏览速度。 ? 缩短了网站的改版时间，设计者只要简单地修改CSS文件就可以轻松地改版网站。 ? 强大的字体控制和排版能力，使设计者能够更好的控制页面布局。 ? 表现和内容相分离，设计者将设计部分剥离出来放在一个独立样式文件中，减少了网页无效的可能。 ? 方便搜索引擎的搜索，使用只包含结构化内容的HTML代替嵌套的标签，搜索引擎将更有效地搜索到用户的内容。 ? 用户可以将许多网页的风格格式同时更新。 5.1 Div布局理念 5.1.2 Div标签 1．Div标签简介 与SPAN不同的是，div是一个块级元素，普通div（不加CSS效果的情况）相当于p…/p，只是前后不会自动换行。 2．Div的嵌套 Div标签是可以被嵌套的，这种嵌套的Div主要用于实现更为复杂的页面排版。下面以两个示例说明嵌套的Div之间的关系。 【演练5-1】未嵌套的Div容器. 【演练5-2】嵌套的Div容器 。 5.1 Div布局理念 3．Div标签与Span标签的区别 div与span的区别在于，div是一个块级元素，它包围的元素会自动换行，而span仅仅是个内联元素，不会换行。另外，span本身没有任何属性，没有结构上的意义，当其他元素都不合适的时候可以换上它，同时div可以包含span，反之则不行。 【演练5-3】演示Div标签与Span标签的区别 。 divimg src=“Dell.png”//div divimg src=“Dell.png”//div divimg src=“Dell.png”//div spanimg src=“Dell.png”//span spanimg src=“Dell.png”//span spanimg src=“Dell.png”//span 5.1 Div布局理念 5.2.1 盒模型的概念 盒模型将页面中的每个元素看做一个矩形框，这个框由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成，如图5-4所示。对象的尺寸与边框等样式表属性的关系，如图5-5所示。 5.2 CSS盒模型 通常情况，为了使边距效果在各浏览器一致，往往采用*{margin:0;padding:0}来屏蔽各浏览器的默认代理样式。 5.2.2 盒模型的属性 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的顺序（顺时针）。 5.2 CSS盒模型 5.2.2 盒模型的属性 边框圆角：border-radius:11px 11px 11px 11px 阴影：box-shadow:5px 3px 6px #00f 3．内边距 内边距也称内补丁，位于对象边框和对象之间，包括了4项属性：padding-top（上内边距）、padding-right（右内边距）、padding-bottom（下内边距）、padding-left（左内边距），内边距属性不允许负值。与外边距类似，内边距也可以用padding一次性设置所有的对象间隙，格式也和margin相似，这里不再一一列举。 5.2 CSS盒模型 5.2.3 盒模型的宽度与高度 盒模型的宽度与高度是元素内容、内边距、边框和外边距这4部分的属性值之和。 1．盒模型的宽度 盒模型的宽度=左外边距（margin-left）+左边框（border-left）+左内边距（padding-left）+内容宽度（width）+右内边距（padding-right）+右边框（border-right）+右外边距（margin-right