《1.2页面如何布局CSSppt课件》由会员分享，可在线阅读，更多相关《1.2页面如何布局CSSppt课件（92页珍藏版）》请在金锄头文库上搜索。
1、渤海大学信息科学与工程学院第第第第第第5 5 5 5 5 5课课课课课课页页面如何布局面如何布局面如何布局面如何布局CSS 2.1(2)知识回顾实验4要点说明。预习检查CSS 盒模型CSS 定位掌握掌握CSS 盒模型盒模型掌握掌握CSS 定位定位掌握掌握CSS 定位机制定位机制掌握掌握CSS 基本布局基本布局本节目标CSS盒模型概述CSS 盒模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式。CSS盒模型概述元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任
2、何元素。内边距、边框和外边距都是可选的，默认值是零。许多浏览器已设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。可以分别进行，也可以使用通用选择器对所有元素进行设置：*margin:0 padding:CSS盒模型概述在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素。#boxwidth:70px margi
3、n:10px padding:CSS盒模型概述内边距、边框和外边距可以应用于一个元素的所有边，也可以应用于单独的边。外边距可以是负值，而且在很多情况下都要使用负值的外边距。CSS盒模型概述浏览器兼容性一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。C
4、SS盒模型CSS内边距元素的内边距在边框和内容区之间。控制该区域的属性是 padding 属性。CSS 内边距属性属性属性描述描述padding简写属性。作用是在一个声明中设置元素的所内边距属性。padding-bottom设置元素的下内边距。padding-left设置元素的左内边距。padding-right设置元素的右内边距。padding-top设置元素的上内边距。CSS盒模型CSS内边距CSS padding 属性属性padding 属性定义元素的内边距。属性定义元素的内边距。padding 属性接属性接受长度值或百分比值，但不允许使用负值。受长度值或百分比值，但不允许使用负值。例如
5、，如果希望所有例如，如果希望所有 h1 元素的各边都有元素的各边都有 10 像素的像素的内边距，只需要这样：内边距，只需要这样：h1 padding:10px还可以按照上、右、下、左的顺序分别设置各边的还可以按照上、右、下、左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比值：内边距，各边均可以使用不同的单位或百分比值：h1 padding:10px 0.25em 2ex 20%CSS盒模型CSS内边距单边内边距属性单边内边距属性通过使用下面四个单独的属性，分别设置上、右、通过使用下面四个单独的属性，分别设置上、右、下、左内边距：下、左内边距：padding-top padding
6、-right padding-bottom padding-left 下面的规则实现的效果与上面的简写规则是完全相下面的规则实现的效果与上面的简写规则是完全相同的：同的：h1 padding-top:10pxpadding-right:0.25em padding-bottom:2expadding-left:20%CSS盒模型CSS内边距内边距的百分比数值内边距的百分比数值可以为元素的内边距设置百分数值。百分数值是相可以为元素的内边距设置百分数值。百分数值是相对于其父元素的对于其父元素的 width 计算的。如果父元素的计算的。如果父元素的 width 改变，它们也会改变。改变，它们也会改变
7、。下面这条规则把段落的内边距设置为父元素下面这条规则把段落的内边距设置为父元素 width 的的 10%：p padding:10%上下内边距与左右内边距一致；即上下内边距的百上下内边距与左右内边距一致；即上下内边距的百分数会相对于父元素宽度设置，而不是相对于高分数会相对于父元素宽度设置，而不是相对于高度。度。实例实例4-4(padding).html，CSS 内边距。内边距。CSS盒模型CSS边框元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。CSS border 属性允许规定元素边框的样式、宽度和颜色。CSS 边框属性属性属性描述描述border简写属性，用于把针对四个
8、边的属性设置在一个声明。border-style简写属性，用于设置元素所有边框的样式，或者单独地为各边设置边框样式。border-width简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。border-color简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。CSS盒模型CSS边框属性属性描述描述border-bottom简写属性，用于把下边框的所有属性设置到一个声明中。border-bottom-color设置元素的下边框的颜色。border-bottom-style设置元素的下边框的样式。border-bottom-width设置元素的下边框
9、的宽度。border-left简写属性，用于把左边框的所有属性设置到一个声明中。border-left-color设置元素的左边框的颜色。border-left-style设置元素的左边框的样式。border-left-width设置元素的左边框的宽度。border-right简写属性，用于把右边框的所有属性设置到一个声明中。border-right-color设置元素的右边框的颜色。border-right-style设置元素的右边框的样式。border-right-width设置元素的右边框的宽度。border-top简写属性，用于把上边框的所有属性设置到一个声明中。border-top-
10、color设置元素的上边框的颜色。border-top-style设置元素的上边框的样式。border-top-width设置元素的上边框的宽度。CSS盒模型CSS边框边框与背景边框与背景元素的背景是内容、内边距和边框区的背景。大多元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循数浏览器都遵循 CSS2.1 定义，不过一些较老的定义，不过一些较老的浏览器可能会有不同的表现。浏览器可能会有不同的表现。CSS盒模型CSS边框边框的框的样式式样式是式是边框最重要的一个方面，如果没有框最重要的一个方面，如果没有样式，将式，将根本没有根本没有边框。框。CSS 的的 border-style 属
11、性定属性定义了了 10 个不同的非个不同的非 inherit 款式，包括款式，包括 none。例如，可以例如，可以为把一幅把一幅图片的片的边框定框定义为 outset，使，使之看上去像是之看上去像是“凸起按凸起按钮”：a:link imgborder-style:CSS盒模型CSS边框值值描述描述none定义无边框。hidden与 none 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。dotted定义点状边框。在大多数浏览器中呈现为实线。dashed定义虚线。在大多数浏览器中呈现为实线。solid定义实线。double定义双线。双线的宽度等于 border-width 的
12、值。groove定义 3D 凹槽边框。其效果取决于 border-color 的值。ridge定义 3D 垄状边框。其效果取决于 border-color 的值。inset定义 3D inset 边框。其效果取决于 border-color 的值。outset定义 3D outset 边框。其效果取决于 border-color 的值。CSS盒模型CSS边框定义多种样式可以为一个边框定义多个样式，例如：p.aside border-style:solid dotted dashed double上面这条规则为类名为 aside 的段落定义了四种边框样式：实线上边框、点线右边框、虚线下边框和一个
13、双线左边框。实例4-4(border-style).html，边框样式。CSS盒模型CSS边框定义单边样式如果希望为元素框的某一个边设置边框样式，而不是设置所有 4 个边的边框样式，可以使用下面的单边边框样式属性：border-top-style、border-right-style border-bottom-style、border-left-style CSS盒模型CSS边框边框的宽度边框的宽度可以通过可以通过 border-width 属性为边框指定宽度。属性为边框指定宽度。为边框指定宽度有两种方法：可以指定长度值，比为边框指定宽度有两种方法：可以指定长度值，比如如 2px 或或 0.
14、1em；或者使用；或者使用 3 个关键字之一，个关键字之一，它们分别是它们分别是 thin 、medium默认值）默认值） 和和 thick。值值描述描述thin定义细的边框。medium默认。定义中等的边框。thick定义粗的边框。length允许您自定义边框的宽度。CSS盒模型CSS边框定义单边宽度可以按照 top-right-bottom-left 的顺序设置元素的各边边框：p border-style:solidborder-width:5px 5px 15px 5px也可以简写为这样写法称为值复制）：p border-style:solidborder-width:15px 5px也
15、可以通过下列属性分别设置边框各边的宽度：border-top-width、border-right-widthborder-bottom-width、border-left-CSS盒模型CSS边框没有边框如果希望显示某种边框，就必须设置边框样式。那么如果把 border-style 设置为 none 会出现什么情况：p border-style:noneborder-width:50px尽管边框的宽度是50px，但是边框样式设置为none，即边框根本不存在，那么边框就不可能有宽度，因此边框宽度自动设置为 0。由于 border-style 的默认值是 none，如果没有声明样式，就相当于 bo
16、rder-style: none。因而，如果希望边框出现，就必须声明一个边框样式。CSS盒模型CSS边框边框的颜色边框的颜色设置边框颜色非常简单。设置边框颜色非常简单。CSS 使用一个简单的使用一个简单的 border-color 属性。属性。值值描述描述color_name规定颜色值为颜色名称的边框颜色（比如 red）。hex_number规定颜色值为十六进制值的边框颜色（比如 #ff0000）。rgb_number规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。transparent默认值。边框颜色为透明。CSS盒模型CSS边框可以使用任何类型的颜色值，例如可以是命
17、名颜色，也可以是十六进制和 RGB 值：p border-style:solid border-color:blue rgb(25%,35%,45%) #909090 red默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色，它将与元素的文本颜色相同。另一方面，如果元素没有任何文本，假设它是一个表格，其中只包含图像，那么该表的边框颜色就是其父元素的文本颜色color可以继承）。这个父元素很可能是 body、div 或另一个table。CSS盒模型CSS边框定义单边颜色还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：border-top-color、border-right-
18、color border-bottom-color、border-left-color 要为 h1 元素指定实线黑色边框，而右边框为实线红色，可以这样指定：h1 border-style:solid border-color:black border-right-color:CSS盒模型CSS边框透明边框如果边框没有样式，就没有宽度。不过有些情况下可能希望创建一个不可见的边框。CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子：我们为上面的链接定义了如下样式：a:link, a:visitedborder-style: solid border
19、-width:5px border-color:ransparenta:hover border-color:gray实例4-4(transparent).html，透明边框。CSS盒模型CSS外边距绕在元素边框的空白区域是外边距。设置外边距的最简单的方法就是使用margin属性，这个属性接受任何长度单位、百分数值甚至负值。CSS 外边距属性属性属性描述描述margin简写属性。在一个声明中设置所有外边距属性。margin-bottom设置元素的下外边距。margin-left设置元素的左外边距。margin-right设置元素的右外边距。margin-top设置元素的上外边距。CSS盒模型C
20、SS外边距margin 属性属性margin 属性接受任何长度单位，可以是像素、英属性接受任何长度单位，可以是像素、英寸、毫米或寸、毫米或 em。margin 的默认值是的默认值是 0，如果没有为，如果没有为 margin 声明一声明一个值，就不会出现外边距。在实际中，浏览器对个值，就不会出现外边距。在实际中，浏览器对许多元素已经提供了预定的外边距样式。许多元素已经提供了预定的外边距样式。值值描述描述auto浏览器计算外边距。length规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。%规定基于父元素的宽度的百分比的外边距。CSS盒模型CSS外边距margin 可以设置为 au
21、to。常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白：h1 margin:0.25in下面的例子为 h1 元素的四个边分别定义了不同的外边距，所使用的长度单位是像素 (px)：h1 margin:10px 0px 15px 5px可以为 margin 设置一个百分比数值：p margin:10%百分数是相对于父元素的 width 计算的。CSS盒模型CSS外边距值复制值复制有时会输入一些重复的值：有时会输入一些重复的值：p margin: 0.5em 1em 0.5em 1em通过值复制，可以不必重复地键入这对数字。通过值复制，可以不必重复地键入
22、这对数字。p margin: 0.5em 1em这两个值可以取代前面这两个值可以取代前面 4 个值。这是如何做到的呢个值。这是如何做到的呢？CSS 定义了一些规则，允许为外边距指定少于定义了一些规则，允许为外边距指定少于 4 个值。规则如下：个值。规则如下：如果缺少左外边距的值，则使用右外边距的值。如果缺少左外边距的值，则使用右外边距的值。 如果缺少下外边距的值，则使用上外边距的值。如果缺少下外边距的值，则使用上外边距的值。 如果缺少右外边距的值，则使用上外边距的值。如果缺少右外边距的值，则使用上外边距的值。CSS盒模型CSS外边距如果为外边距指定了3个值，则第4个值即左外边距会从第2个值右外
23、边距复制得到。如果给定了两个值，第4个值会从第 2 个值复制得到，第 3 个值下外边距会从第 1 个值上外边距复制得到。最后一个情况，如果只给定一个值，那么其他 3 个外边距都由这个值上外边距复制得到。h1 margin: 0.25em 1em 0.5em/* 等于 0.25em 1em 0.5em 1em */h2 margin: 0.5em 1em /* 等于 0.5em 1em 0.5em 1em */p margin: 1px /* 等价于 1px 1px 1px 1px */CSS盒模型CSS外边距这种办法有一个小缺点。假设希望把 p 元素的上外边距和左外边距设置为 20 像素，下外
24、边距和右外边距设置为 30 像素。在这种情况下，必须写作：p margin: 20px 30px 30px 20px这样才能得到想要的结果。再来看另外一个例子。如果希望除了左外边距以外所有其他外边距都是 auto左外边距是 20px）：p margin: auto auto auto CSS盒模型CSS外边距单边外边距属性单边外边距属性可以使用单边外边距属性为元素单边上的外边距设置值。可以使用单边外边距属性为元素单边上的外边距设置值。p margin-left: 20px可以使用下列任何一个属性来只设置相应上的外边距，而不可以使用下列任何一个属性来只设置相应上的外边距，而不会直接影响所有其他外
25、边距：会直接影响所有其他外边距：margin-top、margin-right、margin-bottom、margin-left 一个规则中可以使用多个这种单边属性，例如：一个规则中可以使用多个这种单边属性，例如：h2 margin-top: 20px margin-right: 30px margin-bottom: 30px margin-left: 20px 当然，对于这种情况，使用当然，对于这种情况，使用 margin 可能更容易一些：可能更容易一些：p margin: 20px 30px 30px CSS盒模型CSS外边距合并外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个
26、外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。外边距合并叠加是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。CSS盒模型CSS外边距合并当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图：CSS盒模型CSS外边距合并当一个元素包含在另一个元素中时假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。请看下图：CSS盒模型CSS外边距合并假设有一个空元素，它有外边距，但是没有边框或填充。
27、在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：如果这个外边距遇到另一个元素的外边距，它还会发生合并：这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。CSS盒模型CSS外边距合并外边距合并初看上去可能有点奇怪，但是实际上，它是有意义的。以由几个段落组成的典型文本页面为例。CSS盒模型盒模型的类型CSS 把盒模型分为两种基本形态：Block块状和 Inline行内，也有翻译为“内联”）。在默认状态下，块状元素宽度为 100，而且后面隐藏附带有换行符，使块状元素始终占据一行。符合标准的常用块状元素如下表：CSS盒模型盒模型的类型块状
28、元素块状元素说明说明address表示特定信息，如地址、签名、作者信息。一般显示为斜体效果blockquote 表示文本中的一段引用语。一般为缩进显示div表示通用包含块，没有明确的语义dl表示定义列表fieldset表示字段集，显示为一个方框，用来包含文本和其他元素form说明所包含的控件是某个表单的组成部分h1-h6表示标题，其中h1表示一级标题，字号最大，h6表示最小标题hr画一条横线noframes包含对于那些不支持FrameSet元素的浏览器使用的HTMLnoscript指定在不支持脚本的浏览器中显示的HTMLol编制有序列表p表示一个段落pre以固定宽度字体显示文本，保留代码中的空
29、格和回车table表示所含内容组织成含有行和列的表格形式ul表示不排序的项目列表li表示列表中的一个项目legend在FieldSet元素绘制的方框内插入一个标题CSS盒模型盒模型的类型行内元素没有高度和宽度，因此也就没有固定的形状，定义它的 width 和 height 属性无效。行内元素可以在行内自由流动，但它会遵循盒模型基本规则，如可以定义外边距、内边距和边框，可以定义背景。它的最小内容单元也会呈现矩形形状，但它显示的高度和宽度只能根据所包含内容的高度和宽度来确定。有人把块状元素比作硬木盒子，而把行内元素比作随意变形的皮纸袋子，这还是挺形象的。符合标准的常用行内元素如下：CSS盒模型盒模
30、型的类型行内元素行内元素说明说明a表示超链接abbr标注内部文本为缩写，用title属性标示缩写的全称acronym表示取首字母的缩写词，一般显示为粗体，部分浏览器支持b指定文本以粗体显示bdo用于控制包含文本的阅读顺序，如english，浏览器会从右到左显示文本big指定所含文本要以比当前字体稍大的字体显示br插入一个换行符button指定一个容器，可以包含文本，显示为一个按钮cite表示引文，以斜体显示code表示代码范例，以等宽字体显示dfn表示术语，以斜体显示em表示强调文本，以斜体显示i指定文本以斜体显示img插入图像或视频片断CSS盒模型盒模型的类型行内元素行内元素说明说明inpu
31、t创建各种表单输入控件kbd以定宽字体显示文本label为页面上的其他元素指定标签map包含客户端图像映射的坐标数据object插入对象q分离文本中的引语samp表示代码范例script指定由脚本引擎解释的页面中的脚本select表示一个列表框或者一个下拉框small指定内含文本要以比当前字体稍小的字体显示span指定内嵌文本容器strike带删除线显示文本strong以粗体显示文本sub说明内含文本要以下标的形式显示，比当前字体稍小sup说明内含文本要以上标的形式显示，比当前字体稍小textarea多行文本输入控件tt以固定宽度字体显示文本var定义程序变量，通常以斜体显示CSS盒模型盒模型
32、的类型盒模型的显示类型可以使用display属性来显式定义, display属性规定元素应该生成的盒的类型。任何元素都可以通过display属性改变默认显示类型，因此会改变该元素所对应的网页布局结构。display属性共有18个选项值，如果单从布局角度来分析，这些显示类型都可以划归为block和 inline两种基本显示形态，其他类型都是这两种类型的特殊显示。其中真正能够应用并获得所有浏览器支持的取值只有4个：block、none、inline、listitem。详细说明如下：CSS盒模型盒模型的类型值值描述描述none此元素不会被显示。block此元素将显示为块级元素，此元素前后会带有换行符
33、。inline默认。此元素会被显示为行内元素，元素前后没有换行符。inline-block行内块元素。（CSS2.1 新增的值）list-item此元素会作为列表显示。run-in此元素会根据上下文作为块级元素或行内元素显示。table此元素会作为块级表格来显示表格前后带有换行符。inline-table此元素会作为内联表格来显示，表格前后没有换行符。table-row-group此元素会作为一个或多个行的分组来显示（类似 ）。table-header-group此元素会作为一个或多个行的分组来显示（类似 ）。table-footer-group此元素会作为一个或多个行的分组来显示（类似 ）。
34、table-row此元素会作为一个表格行显示（类似 ）。table-column-group此元素会作为一个或多个列的分组来显示（类似 ）。table-column 此元素会作为一个单元格列显示（类似 ）table-cell此元素会作为一个表格单元格显示（类似 和 ）table-caption此元素会作为一个表格标题显示（类似 ）inherit规定应该从父元素继承 display 属性的值。CSS盒模型盒模型的类型none 属性值表示隐藏并取消盒模型，这样元素所包含的内容就不会被浏览器解析和显示，同样这个盒子所包含的任何元素都会被浏览器忽略，不管它们是否被声明为其他属性。listitem属性值
35、表示列表项目，其实质上也是块状显示，不过是一种特殊的块状类型，它增加了缩进和项目符号。div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容。与之相反，span和strong等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。CSS盒模型盒模型的类型可以使用display属性改变块的类型。这意味着，通过将display属性设置为block，可以让行内元素比如 元素表现得像块级元素一样。还可以通过把display设置为 none，让生成的元素根本没有框。但是在一种情况下，即使没有进行显式定义，也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素比如
36、div开头。即使没有把这些文本定义为段落，也会被当作段落对待：some text在这种情况下，这个框称为无名块框，因为它不与专门定义的元素相关联。CSS定位CSS 定位 (Positioning) 属性允许对元素进行定位。属性属性描述描述position把元素放置到一个静态的、相对的、绝对的、或固定的位置中。top定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。right定义了定位元素右外边距边界与其包含块右边界之间的偏移。bottom定义了定位元素下外边距边界与其包含块下边界之间的偏移。left定义了定位元素左外边距边界与其包含块左边界之间的偏移。overflow设置当元素的内容
37、溢出其区域时发生的事情。clip设置元素的形状。元素被剪入这个形状之中，然后显示出来。vertical-align设置元素的垂直对齐方式。z-index设置元素的堆叠顺序。CSS定位position属性position 属性规定元素的定位类型。值值描述描述absolute生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。fixed生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 left, top, right 以及 bottom 属性进行规定。relative生成相对定位的元素
38、，相对于其正常位置进行定位。因此，left:20 会向元素的 LEFT 位置添加 20 像素。static默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。CSS定位position属性这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。定位 h2 元素：h2 position:absolute left:100px top:150px CSS定位相对定位设置为相对定位的元素框会偏移某个距离。元素仍然
39、保持其未定位前的形状，它原本所占的空间仍保留。相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于它的起点进行移动。如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。假设 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。#box_relativeposition:relativeleft:30pxtop:CSS定位相对定位在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因而，移动元素会导致它覆盖其它框。CSS定位绝对定位设置
40、为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。绝对定位使元素的位置与文档流无关，因此不占据空间。普通流中其它元素的布局就像绝对定位的元素不存在一样：#box_relative position: absolute left: 30px top: CSS定位绝对定位绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。CSS定位绝对定位对于定位的主要
41、问题是要记住每种定位的意义：相对定位是“相对于元素在文档中的初始位置，而绝对定位是“相对于最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于最初的包含块。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。CSS定位浮动浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。请看下图，当把框1向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：CSS定位浮动当框1向左浮动时，它脱离文档流并且
42、向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框2，使框 2从视图中消失。如果把三个框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。CSS定位浮动如下图所示，如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”：在 CSS 中，通过 float 属性实现元素的浮动。CSS定位包含块CSS 包含块是标准布局中的一个重要概念，它是绝对定位的基础。可以用 position 属性来定义任意包含块，posi
43、tion 属性有效取值包括 absolute、fixed、relative。包含块就是为绝对定位元素提供坐标偏移和显示范围的参照物。在默认状态下，body元素就是一个大的包含块，所有绝对定位的元素都是根据窗口来确定自己所处的位置和百分比大小显示的。但是如果我们定义了包含元素为包含块以后，对于被包含的绝对定位元素来说，就会根据最接近的具有定位功能的上级包含元素来决定自己的显示位置。实例4-5(include block).html，包含块。CSS定位包含块有了包含块，就可以灵活设置绝对定位的坐标原点和它的参考值。绝对定位打破了元素的固有排列顺序，满足诸如内容优先的排版需要，也给复杂的浮动布局带来
44、方便。在 IE 浏览器中，只有当绝对定位的包含元素拥有层特征时才能够准确解析。#Layer1 /* 定义层的基本样式 */position:absolute/*绝对定位，必要特征，或relative或fixed */width:200px/* 宽度，必要特征 */height:115px/* 高度，必要特征 */zindex:1/* 叠放顺序，次要特征 */left: 143px/* x轴坐标，次要特征 */top: 139px/* y轴坐标，次要特征 */CSS定位包含块定义包含块就是绝对定位元素的相邻的父级元素，也就是说包含块元素和绝对定位元素之间没有嵌入其他元素，如下面的代码结构。安全嵌
45、套：不安全嵌套：CSS定位定位机制CSS 有三种基本的定位机制普通流浮动绝对定位。CSS定位定位机制普通流除非指定，否则所有框都在普通流中定位。普通流中元素的位置由元素在 HTML中的位置决定。块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。设置行高可以增加这个框的高度。流动是默认的网页布局模式。任何没有具体定义position:absolute或position:fixed属性，以及没有被定义浮动float:left或float:right的元
46、素都将默认呈现流动布局模式。CSS定位定位机制普通流流动布局模型流动布局模型流动布局模型具有两个比较典型的特征：流动布局模型具有两个比较典型的特征：1、块状元素都会在所处的包含元素内自上而下按、块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为素的宽度都为100%。实际上，块状元素都会以。实际上，块状元素都会以行的形式占据位置，不管这个元素所包含的内容行的形式占据位置，不管这个元素所包含的内容有多少，也不管我们把元素的宽度设置多窄。有多少，也不管我们把元素的宽度设置多窄。实例实例4-5(flow-1).htm
47、l，对于流动布局，浏览器都会，对于流动布局，浏览器都会自上向下逐步解析并显示所有网页元素。自上向下逐步解析并显示所有网页元素。CSS定位定位机制普通流2、行内元素都会在所处的包含元素内从左到右水平分布显示。有人把这种分布方式称为文本流，文本流源于文本的从左向右自然流动，本质上它与 传输方式和浏览器的解析机制密切相关。超出一行后，会自动从上而下换行显示，然后继续从左到右按顺序流动，以此类推。实例4-5(flow-2).html中的各个元素内的文本流都自左向右逐步解析和显示的。如果定义所有块状元素浮动显示，则文本会以流的形式从左到右、再自上而下自动填充满所有浮动元素右侧的空余空间。CSS定位定位机
48、制普通流相相对定位流定位流动当元素定当元素定义为相相对定位，即定位，即设置置position:relative属性属性时，它也会遵循流，它也会遵循流动模型布局模型布局规则，跟随，跟随HTML文档流自上而下流文档流自上而下流动。实例例4-5(flow-3).html。当我当我们单独定独定义 p 段落元素以相段落元素以相对定位定位显示示时，它，它会会严格遵循流格遵循流动模型，自上而下按模型，自上而下按顺序流序流动显示。示。CSS定位定位机制普通流相对定位元素偏离原位置，不再按元素先后顺序显示，但它依然遵循流动模型规则，始终保持与原点相同的位置关系一起随文档流整体移动。#contain p /*/b
49、orderbottom:solid 1px #999position:relative /*设置段落元素为相对定位*/left:20px /*以原位置左上角为参考点向右偏移20像素*/top:120px /*以原位置左上角为参考点向下偏移120像素*/所谓的相对，仅指元素本身位置，对其他元素的位置不会产生任何影响。因而，采用相对定位的元素被定义偏移位置后，不会挤占其他流动元素的位置，但能够覆盖其他元素。CSS定位定位机制浮动浮动是完全不同于流动的另一种布局模型，它遵循浮动规则。任何元素在默认情况下是不能够浮动的，但可以用CSS定义为浮动，如div、list、p、table，以及img等元素都可
50、以被定义为浮动，事实上即使是如span、strong等这样的行内元素也可以被定义为浮动。float 属性定义元素在哪个方向浮动。值值描述描述left元素向左浮动。right元素向右浮动。none默认值。元素不浮动，并会显示在其在文本中出现的位置。CSS定位定位机制浮动浮浮动布局模型的特征布局模型的特征1、任何定、任何定义为float的元素都会自的元素都会自动被被设置置为一个一个块状元素状元素显示，相当于被定示，相当于被定义了了display:block声明。声明。这样就可以就可以为浮浮动元素定元素定义width和和height属性，即使是行内属性，即使是行内显示元素。示元素。实例例4-5(fl
51、oat-1).html，我，我们为两个两个span元素都定元素都定义高和高和宽属性，然后属性，然后让其中一个其中一个span元素浮元素浮动显示，来比示，来比较它它们的的显示效果。示效果。浮浮动元素元素应该显式定式定义宽度。如果当我度。如果当我们没有指定没有指定浮浮动元素的元素的宽度度时，浮，浮动元素会自元素会自动收收缩到能到能够包含内容的包含内容的宽度。度。CSS定位定位机制浮动2、浮动模型不会与流动模型发生冲突。当元素定义为浮动布局时，它在垂直方向上应该还处于文档流中，也就是说浮动元素不会脱离正常文档流而任意的浮动，它的上边线将与未被声明为浮动时的位置一样。但是在水平方向上，它的浮向边会尽可
52、能地靠近它的包含元素边缘。例如，在上面的示例中，我们能够看到第2个span元素虽然浮动位置有了变化，但依然处于第1个span元素后面，且靠近包含元素body的右边缘，并随文档流一起上下流动。CSS定位定位机制浮动3、与普通元素一样，浮动元素始终位于包含元素内，不会游离于外，或破坏元素包含关系。实例4-5(float-2).html，我们在上面示例基础上加一个包含元素，并输入下面的 CSS 布局代码：#contain /*/width:600px /*定义包含元素的宽*/height:350px /*定义包含元素的高*/padding:50px /*定义包含元素的补白为50像素*/border:
53、double 4px #CSS定位定位机制浮动4、关于流动元素环绕问题。虽然浮动元素能够随文档流动，但浮动模型与流动模型依然存在本质区别。实例4-5(float-3).html。浮动元素不会强迫前面的文本流或行内元素环绕其周围流动，而且它永远都在前面元素的下面开始浮动。浮动元素不会覆盖其他元素，也不会挤占其他元素的位置。并且浮动元素不会与前面元素的边界发生重叠现象。但后面的文本流或行内元素会自动环绕浮动元素四周，或与上面流动内容连接在一起，如果空间允许甚至会跑到上面与前面的流动元素并列显示在一起。CSS定位定位机制浮动5、关于浮动元素间并列显示问题。当两个或者两个以上的相邻元素都被定义为浮动显
54、示时，如果存在足够的空间容纳它们，浮动元素之间可以并列显示。它们的上边线是在同一水平线上的。如果没有足够的空间，那么后面的浮动元素将会下移到能够容纳它的地方，这个向下移动的元素有可能产生一个单独的浮动。CSS定位定位机制浮动clear 属性属性clear 属性规定元素的哪一侧不允许其他浮动元素。属性规定元素的哪一侧不允许其他浮动元素。clear属性定义了元素的哪边上不允许出现浮动元属性定义了元素的哪边上不允许出现浮动元素。素。可能的值可能的值值值描述描述left在左侧不允许浮动元素。如果左边存在浮动对象，则当前元素会在浮动对象底下显示。right在右侧不允许浮动元素。如果右边存在浮动对象，则当
55、前元素会在浮动对象底下显示。both在左右两侧均不允许浮动元素。不管哪边存在浮动对象，当前元素都会在浮动对象底下显示。none默认值。允许浮动元素出现在两侧。当前元素浮动元素不会换行显示。CSS定位定位机制浮动浮动清除浮动清除浮动的自由性也给布局带来很多麻烦，浮动的自由性也给布局带来很多麻烦，clear属性能属性能够一定程度上控制浮动布局中出现的混乱现象。够一定程度上控制浮动布局中出现的混乱现象。为了更好说明，我们通过实例为了更好说明，我们通过实例4-5(clear-1).html来来展开研究。展开研究。浮动清除只能适用浮动对象之间的清除，我们不能浮动清除只能适用浮动对象之间的清除，我们不能为
56、非浮动对象定义清除属性，或者说为非浮动对为非浮动对象定义清除属性，或者说为非浮动对象定义清除属性是无效的。象定义清除属性是无效的。CSS定位定位机制浮动当一个浮动元素定义了 clear 属性，它不会对前面的任何对象产生影响，也不会对后面的对象形成影响，只会影响自己的布局位置。这里的影响是指不会主动改变别的对象的位置。实例4-5(clear-2).html，在上面的示例中我们修改其中的 CSS 布局代码：我们看到上图所示效果，说明当为#span2对象定义了clear: right，由于上面的元素中没有向右浮动的对象，所以它依然与#span1对象并列显示。同时#span3对象作为后来的浮动对象不会
57、受此清除操作影响，继续浮动在#span2对象后面显示。CSS定位定位机制浮动浮动清除不仅针对相邻浮动元素对象，只要在布局页面里水平接触都会实现清除操作。实例4-5(clear-3).html，在上面示例基础上，我们清除#span2对象的浮动显示，以默认流动的形式环绕#span1浮动对象的右侧，然后定义#span3对象清除属性。显示结果：虽然#span1对象与#span3对象并不相邻，中间相隔#span2对象，但在显示时它们依然水平相邻。所以当定义#span3对象清除属性时，自动在#span1对象底部显示。CSS定位定位机制浮动浮动嵌套浮动嵌套浮动元素可以相互嵌套，嵌套规律与流动元素嵌套浮动元素
58、可以相互嵌套，嵌套规律与流动元素嵌套相同。浮动的包含元素总会自动调整自身高度和相同。浮动的包含元素总会自动调整自身高度和宽度以实现对浮动子元素的包含。宽度以实现对浮动子元素的包含。定义子元素的高度和宽度，使其显示为一定大小的定义子元素的高度和宽度，使其显示为一定大小的区域，这时我们会发现父元素会自动调整自身大区域，这时我们会发现父元素会自动调整自身大小来包含子元素。实例小来包含子元素。实例4-5(clear-4).html。但是如果包含元素被定义了高度和宽度，则它就不但是如果包含元素被定义了高度和宽度，则它就不会随子元素的大小而自动调整自身显示区域来适会随子元素的大小而自动调整自身显示区域来适
59、应子元素的显示。实例应子元素的显示。实例4-5(clear-5).html。CSS定位定位机制浮动浮动与流动嵌套浮动与流动嵌套单纯的流动元素之间或单纯的浮动元素之间相互嵌单纯的流动元素之间或单纯的浮动元素之间相互嵌套一般都比较好处理，但是如果把浮动元素嵌入套一般都比较好处理，但是如果把浮动元素嵌入流动元素之内，则显示的效果就会很复杂，此时流动元素之内，则显示的效果就会很复杂，此时包含元素将根据自身属性进行显示，不再受子浮包含元素将根据自身属性进行显示，不再受子浮动元素的影响，也就是说父元素不能够自适应子动元素的影响，也就是说父元素不能够自适应子浮动元素的高度。浮动元素的高度。浮动元素的起点将由
60、它在包含元素内的位置来决定，浮动元素的起点将由它在包含元素内的位置来决定，但浮动元素将在包含元素的上面展开，这种情况但浮动元素将在包含元素的上面展开，这种情况将与绝对定位的元素有点类似。将与绝对定位的元素有点类似。实例实例4-5(clear-6).html。CSS定位定位机制浮动我们可以看到包含元素div 并没有显示。原因就是包含元素没有适应子元素的高度，而是根据自身定义的属性以独立的形式显示。所以，在应用混合嵌套时，要预测到浮动与流动混合布局时会出现的各种怪现象，并积极做好兼容处理。解决上述包含问题有多种方法，我们可以在包含元素内的最后一行添加一个清除元素，强制撑开包含元素，使其包含浮动元素
61、。.clear /*/clear:both /*使非IE浏览器自适应封装嵌套浮动对象*/这样可以实现我们希望的效果，但是需要添加多余的代码。实例4-5(clear-7).html。CSS定位定位机制浮动不过还有另一种办法，那就是对容器 div 进行浮动：#contain /*/background:#FF99FFfloat:CSS定位定位机制绝对定位绝对定位是指定位元素完全脱离文档流，不再受文档流动的影响。绝对定位模式应用于 position 属性被定义为absolute狭义的绝对定位或fixed 的任何元素。绝对定位包含块与浮动元素一样，绝对定位元素以块状显示。同时，它会为所有子元素建立了一
62、个包含块，所有被包含元素都以包含块作为参照物进行定位，或在其内部浮动和流动。实例4-5(absolute-1).html，定义了三个不同模型的包含元素，然后观察不同模型的包含元素与它们的子元素的位置关系。CSS定位定位机制绝对定位一个绝对定位元素将为它包含的任何元素建立一个包含块，被包含元素遵循普通文档流规则，在包含块中自然流动，但它们的偏移位置由包含块来确定。绝对定位元素甚至可以包含其他的绝对定位元素，这些绝对定位的子元素同样可以从父包含块内脱离出来。这些子包含块通过定位取负值或设置较大的偏移值跑到父包含块的外面。绝对定位元素包含块的定义与其他元素有一点不同。绝对定位元素的包含块是由距离它最
63、近的、且被定位的上级元素，也就是在它外面最接近它的position属性值为absolute、relative 或fixed的父级元素。如果不存在这样的父级元素，那么默认包含块就是浏览器窗口本身。CSS定位定位机制绝对定位混合定位混合定位把相对定位和绝对定位结合起来，形成混合定位，把相对定位和绝对定位结合起来，形成混合定位，这在网页布局中比较常用，也很实用。这在网页布局中比较常用，也很实用。混合定位是利用相对定位的流动模型优势和绝对定混合定位是利用相对定位的流动模型优势和绝对定位的层布局优势，实现网页定位的灵活性和精确位的层布局优势，实现网页定位的灵活性和精确性优势互补。例如，如果给父元素定义为
64、性优势互补。例如，如果给父元素定义为position:relative，给子元素定义为，给子元素定义为 position:absolute，那么子元素的位置将随着父，那么子元素的位置将随着父元素，而不是整个页面进行变化。元素，而不是整个页面进行变化。实例实例4-5.html。CSS基本布局CSS 网页布局千变万化，但应该掌握CSS 基本布局类型。Dreamweaver CS 提供了一整套 CSS 布局模板共计 32 个）。预设计的 CSS 布局提供了下列类型的列：固定列宽是以像素指定的。列的大小不会根据浏览器的大小或站点访问者的文本设置来调整。弹性列宽是以相对于文本大小的度量单位全方指定的。如
65、果站点访问者更改了文本设置，该设计将会进行调整，但不会基于浏览器窗口的大小来更改列宽度。CSS基本布局液态列宽是以站点访问者的浏览器宽度的百分比形式指定的。如果站点访问者将浏览器变宽或变窄，该设计将会进行调整，但不会基于站点访问者的文本设置来更改列宽度。混合用上述三个选项的任意组合来指定列类型。例如，可能存在两列混合的形式：右侧栏布局有一个根据浏览器大小缩放的主列，右侧有一个根据站点访问者的文本设置大小缩放的弹性列。CSS基本布局1列1列固定，居中、标题和脚注列固定，居中、标题和脚注宽度以像素表示。宽度以像素表示。实例实例4-6(1-1).html。1列弹性，居中、标题和脚注列弹性，居中、标题
66、和脚注宽度以全方宽度以全方(em)表示，因此将随字体大小缩放。表示，因此将随字体大小缩放。实例实例4-6(1-2).html。1列液态，居中、标题和脚注列液态，居中、标题和脚注宽度以百分比表示。宽度以百分比表示。实例实例4-6(1-3).html。CSS基本布局2列2列固定，左侧栏、标题和脚注列固定，左侧栏、标题和脚注所有宽度均以像素表示。实例所有宽度均以像素表示。实例4-6(2-1).html。2列弹性，左侧栏、标题和脚注列弹性，左侧栏、标题和脚注所有宽度以全方所有宽度以全方(em)表示，因此将随字体大小缩放。表示，因此将随字体大小缩放。2列液态，左侧栏、标题和脚注列液态，左侧栏、标题和脚注
67、所有宽度以百分比表示。所有宽度以百分比表示。2列混合，左侧栏、标题和脚注列混合，左侧栏、标题和脚注主列宽度以百分比表示，左侧栏宽以全方主列宽度以百分比表示，左侧栏宽以全方(em)表示。表示。实例实例4-6(2-2).html。CSS基本布局3列3列固定，标题和脚注列固定，标题和脚注所有宽度均以像素表示。所有宽度均以像素表示。实例实例4-6(3-1).html。3列弹性，标题和脚注列弹性，标题和脚注所有宽度以全方所有宽度以全方(em)表示，因此将随字体大小缩放。表示，因此将随字体大小缩放。3列液态，标题和脚注列液态，标题和脚注所有宽度以百分比表示。所有宽度以百分比表示。3列混合，标题和脚注列混合，标题和脚注主列宽度以百分比表示，侧栏宽以全方主列宽度以百分比表示，侧栏宽以全方(em)表示。表示。3列绝对定位，标题和脚注列绝对定位，标题和脚注所有宽度均以像素表示，绝对定位侧栏。所有宽度均以像素表示，绝对定位侧栏。实例实例4-6(3-2).html。总结CSS 盒模型CSS 定位预习CSS 常用属性：CSS 背景、CSS 文本、CSS 字体、CSS 列表、CSS 尺寸CSS 伪类和伪元素CSS 分类属性p167-p195
