divcss布局基础

《divcss布局基础》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第14章DIV+CSS布局基础在对CSS技术的基础知识有了一定的掌握后就可以开始学习DIV+CSS的布局的方法。DIV+CSS的布局方法简单来说就是使用div标签作为容器，使用CSS技术来排布div标签的布局方法。常用的CSS布局方式有浮动、定位等。本章是学习CSS技术最重要的一个部分，读者应多实践本章内各个实例。本章内容包括：了解DIV+CSS布局的流程学习盒模型以及盒模型的基本元素学习页面元素的布局方式实例制作歌曲专辑列表实例制作给图片加入信息14.1初识DIV+CSS布局的流程本节通过分析一个

2、企业主页的排布方式来讲解初步了解DIV+CSS布局的方法。该网页的效果图显示如图所示。14.2了解盒模型盒模型是DIV+CSS布局的基础，要实现DIV+CSS布局必需了解盒模型的原理。在页面上的每个元素都能看做一个容器，这个容器就是一个盒子。例如，p标签是一个能装文字的容器，它的高度就是所承载文字的高度。使用DIV+CSS布局，div标签就是布局中所用到的容器。大部分人认为只有div标签能作为容器来安排布局。其实在XHTML页面中几乎所用的标签都是容器，都能被当作容器来使用。页面上的每个容器都占有一

3、定的位置，有一定的大小。页面上的每个容器都会影响其他容器的排布，它们相互作用，而形成一个页面的布局。14.2.1div标签的盒模型例子以下以div标签的盒模型为例子，讲述基本盒模型的基本概念。【示例】本例子讲述基本盒模型的概念。14.2.2基本盒模型下图所示为基本盒模型。在页面中的所有元素都遵循该模型的设置方式。14.2.3边距边距用于设置页面元素与其它元素的距离。CSS的margin属性用于设置边距距离。1．用长度单位设定margin的值例14-32．用百分比设定margin的值例14-43．边距

4、值的缩写:如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。例14-54．单边距值：margin-top、margin-right、margin-bottom、margin-left5．边距重叠例14-6注：在边距重叠时，会淘汰边距较小的一个。边距重叠只发生在边距属性中，补白和边框都不会出现重叠现象。14.2.4补白补白用于增加页面元素边框与内

5、容之间的空间。CSS的padding属性用于设置补白。1．用长度单位设定padding的值例14-72．用百分比设定padding的值，其计算标准是以该元素的父元素宽高为基准。例14-83.补白值的缩写：如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四条边。如果提供两个，第一个用于上－下，第二个用于左－右。如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。4.单补白值：padding-top、padding-right、padding-bot

6、tom、padding-left14.2.5边框边框是页面元素可视范围的最外圈。边框包围的范围包括页面元素的补白和内容。CSS中提供以下三个设置边框的属性：1．边框样式border-style参数：none:无边框。与任何指定的border-width值无关hidden:隐藏边框。IE不支持dotted:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线dashed:在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线solid:实线

7、边框double:双线边框。两条单线与其间隔的和等于指定的border-width值groove:根据border-color的值画3D凹槽ridge:根据border-color的值画菱形边框inset:根据border-color的值画3D凹边outset:根据border-color的值画3D凸边border-style也包括border-top-style、border-right-style、border-bottom-style、border-left-style例14-92．边框宽度b

8、order-width，在设定边框宽度之前，必须先指定边框的样式。参数：medium:默认宽度thin:小于默认宽度thick:大于默认宽度length:由浮点数字和单位标识符组成的长度值。不可为负值。例14-10border-top-width、border-right-width、border-bottom-width、border-left-width3．边框颜色border-color也包括border-top-color、border-right-color