【文档说明】HTML第5章-框模型与网页布局课件.pptx，共(64)页，689.484 KB，由小橙橙上传

转载请保留链接：https://www.ichengzhen.cn/view-2949.html

以下为本文档部分文字说明：

框模型与网页布局框模型与网页布局5.1盒模型5.2表格与列表样式5.3Display5.4浮动与定位5.5布局5.1盒模型1.盒模型2.表格与列表样式3.Display4.浮动与定位5.布局盒模型（框模型）CSS中，HTML文档中

的每个元素都会生成一个或多个矩形框，这称为元素框。各元素框中心有一个内容区，这个内容区周围有可选的内边距、边框和外边距之所以被认为是可选的，原因是它们的宽度可以设置为0，实际上这样做就从元素框去除了这些项可以应用多种属性到这

些元素框中盒模型-元素框的组成下图为元素框的组成，其中内边缘和外边缘并不会显示在浏览器中空白区外边缘边框区内边缘边框边椽内容区填充区填充边椽完整的盒模型盒模型多种长度的定义内容区使用width和height属性指定元素内容区的宽和高这两个属性能应用于块级别和无文本的内嵌元素，不能应用

于内嵌文本（也叫不可替换的）元素属性名称：width属性值：长度计量值|百分比值|auto默认值：auto适用对象：块级别元素和可替换的内嵌元素是否可继承：否属性名称：height属性值：长度计量值|百分比值|auto默

认值：auto适用对象：块级别元素和可替换的内嵌元素是否可继承：否内容区-说明通常，块元素的宽和高由浏览器自动计算它会跟浏览器窗口或其他块元素容器一样宽，高度正好容纳内容也可以使用width和height属性设置元素内容区域为一个特定值e

m、像素和百分比值是最常用的度量元素大小的方法注意宽和高只应用到内容区域元素框的总宽度=2*填充+2*边框+2*空白边+宽度元素框的总高度=2*填充+2*边框+2*空白边+高度一般不指定元素的高度，允许其基于文本和其他

内容自动计算如果指定高度，请确保考虑到内容不适用的情况举例(width-height)内容区-处理溢出当元素设置得太小，容不下内容时，可使用overflow属性来指定如何处理内容不适合的问题属性名称：overflow属性值：visible|hidden|s

croll|auto默认值：visible适用对象：块级别元素和可替换的内嵌元素(比如img)是否可继承：否举例(overflow)内边距-填充(padding)内边距是内容区和边框之间的空间，也称为填充

添加内边距很有用，它给内容一点空间，防止背景的边框或边缘与文本冲撞可以给元素的每个方向添加内边距，也可以一次添加所有边的padding属性内边距-属性属性名称：padding属性值：长度计量值|百分比值|auto

默认值：0适用对象：所有元素是否可继承：否属性名称：padding-top、padding-right、padding-bottom、padding-left属性值：长度计量值|百分比值|auto默认值：0适

用对象：所有元素是否可继承：否举例(padding)内边距-快捷属性快捷padding属性padding属性添加元素周围所有的填充可以给1个padding属性指定四个、三个、两个或一个值1个值padding:10px;应用于所有的方向2个值padding:

10px5px;第一个值应用于上和下，第二值应用于右和左3个值padding:10px6px4px;第一个值应用于上，第二个值应用于右和左，第三个值应用于下4个值padding:10px6px4px10px;依次顺时针应用于上、右、下、左。举例(padding-direction)边框(bo

rder)边框是围绕元素内容区和内边距的一条或多条线每个边框都有3个方面：边框样式或外观(border-style)边框宽度或粗细(border-width)边框颜色(border-color)其中，边框样式是最重要的没有指定

边框样式，边框将不存在（必须声明边框的样式，否则其他边框属性将被忽略）可使用定向边框属性应用一个样式到一个方向，也可用快捷属性border-style一次应用到四个方向边框-样式属性名称：border-style属性值：none|dotted|dashed|

solid|double|groove|ridge|inset|outset默认值：none适用对象：所有元素是否可继承：否属性名称：border-top-style、border-right-style、border-bott

om-style、border-left-style属性值：none|dotted|dashed|solid|double|groove|ridge|inset|outset默认值：none适用对象：所有元素是否可继承：否举

例(border-style)边框-宽度可给每个方向应用一个单向属性，也可使用快捷属性border-width依顺时针方向一次指定多个方向属性名称：border-width属性值：长度单位|thin|medium|thick默认值：medium适用对象：所有元素是否可继承：否

属性名称：border-top-width、border-right-width、border-bottom-width、border-left-width属性值：长度单位|thin|medium|thick默认值：medium

适用对象：所有元素是否可继承：否举例(border-width)边框-颜色用相同的方法指定：使用专向属性或border-color快捷属性指定边框颜色后，将覆盖掉color属性设置的前景色属性名称：border-color属性值：颜色名或RGB值|transparent默认值：元素的

color属性值适用对象：所有元素是否可继承：否属性名称：border-top-color、border-right-color、border-bottom-color、border-left-color属性值：颜色名或

RGB值|transparent默认值：元素的color属性值适用对象：所有元素是否可继承：否举例(border-color)边框-联合使用style、width和color在一个声明中同时提供style、width和color属性属性名：border-top、bo

rder-right、border-bottom、border-left属性值：border-styleborder-widthborder-color适用对象：所有元素是否可继承：否属性名：bor

der属性值：border-styleborder-widthborder-color默认值：每个属性的默认值适用对象：所有元素是否可继承：否举例(border)外边距添加在边框外面可选数量的空间，称为外边距，也称空白边(margin)外边距保证了元素间互不冲撞或不

冲撞浏览器窗口的边线属性名：margin属性值：长度计量值|百分比值|auto默认值：auto适用对象：所有元素是否可继承：否属性名：margin-top，margin-right，margin-bottom，margin-left属性值：长度计量值|百分比值|auto

默认值：auto适用对象：所有元素是否可继承：否举例(margin)外边距-空白边行为重叠空白边上下空白边重叠时，不是简单的重叠，而是应用最大的指定值上下空白边不重叠的只可以是浮动或绝对位置的元素内嵌元素的空白边可以应用上下空白边到内嵌元素，但它不会在元素上下添加

垂直空间，行高也不会改变负空白边margin可指定负数值，当应用负空白边时，内容、填充和边框将向相反的方向移动表格和列表样式表格的样式属性给表格中的内容指定样式的属性单元格中内容的外观和对齐方式，使用格式化文本和背景等属性处理表格和单元格本身样式，使用padding、margin和bor

der等属性专门为表格创建的属性分散的和折叠的边框属性名称：border-collapse属性值：separate|collapse默认值：separate适用对象：表格和表格嵌入元素是否可继承：是分散边框模型可以指定想要

的单元格的间距值，使用border-spacing属性border-spacing属性值：长度值长度值默认值：0适用对象：表格和表格嵌入元素是否可继承：是有两个长度值，其中水平值在前，并应用于列间，垂直值在后，并应用于行间；如果只提供一个值，那么该值用于水平

和垂直两个方向折叠边框模型折叠边框模型单元格之间只会显示一个边框当相邻单元格边框样式不同时如果任意一个单元格的border-style属性被设置为hidden值，那么边框将不会显示边框的宽度：宽边优于窄边如果所有其他属性值都相等，就要归结为样式的问题了，边框样式按优先级从大

到小排列：double,solid,dashed,dotted,ridge,outset,groove和inset举例(border-separate-collapse)改变列表圆点和数字CSS提供一些属性，允许作者选择标记符号

的类型和位置，或者用自定义图像替换圆点选择标记符号属性名：list-style-type属性值：none|disc|circle|square|decimal|decimal-leading-zero|lower-alpha|upper-alpha|lo

wer-latin|upper-latin|lower-roman|upper-roman|lower-greek默认值：disc适用对象：ul、ol和li元素(或者display属性值为list-item的元素)是

否可继承：是举例(list-style-type)标记符号位置list-style-position属性允许将圆点拉回内容区域，使标记符号进入列表内容中属性名称：list-style-position属性值：inside

|outside默认值：outside适用对象：ul、ol和li元素(或者display属性值为list-item的元素)是否可继承：是举例(list-style-position)创建自己的圆点利用list-style-image属性将

自己的图像作为圆点属性名称：list-style-image属性值：<url>|none默认值：none适用对象：ul、ol和li元素（或者display属性值为list-item的元素）是否可

继承：是url总是相对于样式表解析举例(list-style-image)list-style快捷属性属性名：list-style属性值：list-style-typelist-style-positionlist-style-image默认值

：见单独属性适用对象：ul、ol和li元素（或者display属性值为list-item的元素）是否可继承：是例：ul{list-style:url(smile.gif)discoutside;}ul{list-style:discoutsideurl(smile.gif);

}ul{list-style:url(smile.gif)disc;}display属性display属性规定元素在布局中应该生成的框的类型属性名：display属性值：inline|block|li

st-item|run-in|inline-block|table|inline-table|table-row-group|table-header-group|table-footer-group|table

-row|table-column-group|table-column|table-cell|table-caption|none默认值：inline适用对象：所有元素（常用于ul、ol、li、a元素）是否可继承：否使用列表作为导航有两种方法可以将列表变为

水平条让列表项显示为内联元素浮动，将列表项和链接排成一行内联列表项(例：list-nav1)使用display属性，使列表项元素表现为内联元素浮动的列表项(例：list-nav2)使用float属性将列表项一个接一个地排成一行当多个连续项浮动到一边时，它们将沿着边

堆积起来方法举例去掉圆点（list-style：none）浮动每个列表项（float：left）使锚元素（a）显示为块元素，从而可以设置尺寸（display：block）使用各种样式来格式化链接CSS滑动效果:hover伪类，当鼠标位于链接上方时产生滑过

效果交替背景图像背景图像移位：把所有的滑过状态放在一幅图像上，然后为每种链接状态改变背景位置示例：other1～other4浮动和定位浮动与定位浮动一个元素是指左右移动元素，并允许接着的文本环绕它；定位是指以像素精确指定元素在网页上的位置。普通流C

SS布局模型中，文本元素依源码中的顺序从上到下排列，然后从左到右；块元素一个累一个，填满浏览器窗口或其他窗口元素的所有可用宽度；内嵌元素和文本字符一行接一行的填满块元素。当窗口或窗口元素重置大小的时候，块元素随着新宽度增大或缩小，而内嵌内容重新

流动来适应宽度。abcdefghijklmnopqrstuvwxyz<p><h1><p><p>abcdefghijklmnopqrstuvwxyz<p><h1><p><p>浮动属性名：float属性值：left|right|none|inherit默认值：none适用对象：所

有元素是否可继承：否float属性尽可能远的向左或向右移动元素，允许后面的内容环绕它。浮动是现代基于CSS网页设计的主要工具之一，用于创建多列布局、列表中的导航工具条和无表格的类表格的排列等。举例float1-float3浮动总结浮动元素像水流中的岛上例中，图像从

普通流的位置中移除，同时继续影响周围内容；接下来的段落文本重新流动来给浮动的img元素提供空间。浮动元素在包含元素的内容区中浮动图像位于包含它的段落的内容区中；它不能扩展到段落的填充区。空白边也被

包括整个元素盒子，都在浮动。浮动示例利用CSS，所有的(X)HTML元素都可能浮动。浮动内嵌文本元素总是需要提供浮动文本元素的宽度，例：float4浮动内嵌元素表现为块元素，即一旦浮动内嵌元素

，它就遵循块级别元素的显示规则。例：float5浮动块元素例：float6，例：float7必须提供浮动块元素的宽度，浮动元素不高过它们在源码中的参照物浮动多个元素浮动元素将位于空间允许的，尽可能左（或右）且相对较高的地方。例：float8清除浮动元素

取消文本环绕，恢复平常布局；可通过清除浮动元素下面开始排列的元素来完成；应用clear属性到一个元素来防止元素紧接着浮动元素出现，并强制它从下一个可用的浮动元素下面的空间开始。clear属性属性值：left|right|both|none|inherit默认值：none应用对象：

仅块级元素是否可继承：否例：float9,float10定位定位的类型属性名：position属性值：static|relative|absolute|fixed默认值：static适用对象：所有元素是否可继承：否position属性指

示元素将被定位，并指定定位方法定位属性值的说明static普通的定位方案，元素将如同在普通文档流中一样定位relative相对定位是相对于元素在流中的原始位置进行移动定位它将保留元素在普通流中占据的空间absolute绝对定位的元素从文档流中完整

的移除，并且相对于容器元素定位它所占据的空间将被关闭它对周围元素的布局没有任何影响fixed固定定位的特性是元素将呆在窗口的一个位置指定偏移属性确定了定位方法后，真正要做的是指定四个偏移属性属性：top、right、bottom、left属性值：长度计量值|百分比

值|auto默认值：auto适用对象：可定位元素（即元素的position属性为relative，absolute或fixed）是否可继承：否这些值提供了元素与相应边距离的偏移属性相对定位(relative)相对定位是相对于元素在流中的原始位置

移动；它将保留元素在普通流中占据的空间，并继续影响周围内容的布局，例：position1说明：文档流中的原始空间被保留可能与其他元素发生重叠通常用于为绝对定位元素创建定位上下文绝对定位(absolute)绝对定

位的元素从文档流中完整的移除，并且相对于最近的容器块定位它所占据的空间将被关闭它对周围元素的布局没有任何影响举例（position2）容器块(父容器)元素盒子的位置和尺寸有时相对于某个称为元素的容器块的矩形计算判断元素容器块的规则如

果定位元素没有包含在另一个定位元素中，那么它将相对于初始容器块（由html元素创建的）确定位置如果元素有一个祖先，祖先的position属性设置为relative，absolute或fixed，元素将相对于祖先

元素的边定位一个绝对定位元素的容器块是最近的定位祖先元素(也就是任何position属性值不为static的元素)转变元素为容器块最普通的方法是设置position属性值为relative，但不用偏移值来移动它。即通常用相对定位给绝对定位元素创建上下文例：position3，偏移是相对于

填充边缘，不是内容区边缘绝对定位对象的更多方面偏移值应用于元素盒子的外边缘，例：position4绝对定位元素总是表现为块级元素，同时允许给元素设置宽度一旦定位了一个元素，它将变为它包含的所有元素的新容器块，例：position5偏移属性

的进一步说明正偏移值推动定位元素盒子远离指定的边缘，并向容器块的中心移动，例：position6当我们给定位元素的四个方向设置偏移值，同时也给定位元素本身指定width和其他盒子属性时，如果定位盒子的属性值与偏移量与

容器块中的可用空间不匹配，就可能引发冲突通常，指定width和一两个偏移属性，其他的由浏览器自动计算也可以使用百分比值设置偏移属性，例：position7堆积顺序当多个定位元素重叠时，默认是按照元素在文档中出现的

顺序堆积的但也可以使用z-index属性来改变堆积顺序属性名称：z-index属性值：(数字)|auto默认值：auto适用对象：可定位元素是否可继承：否数字越大，元素就会显示在这个堆的越高层例：z-index1,z-index2上节回顾父容器灰色盒子bigbo

x框模型box1，box2测试z-index固定定位(fixed)在大部分情况下，固定定位与绝对定位工作方式相同重要的区别在于：固定元素的偏移值总是相对于浏览器窗口的，即使网页的其他部分滚动，定位元素还保持固定例：position81.边框的设计2.背景色的设置3.固定

定位fixed网页布局使用CSS进行网页布局网页布局策略液态网页：随着浏览器窗口缩放固定网页：将内容放在一个保持指定元素宽的网页区域内，而不管浏览器的尺寸弹性网页：当文本缩放时，弹性网页的区域会放大或缩小液态布局也称流动布局

网页中的网页区域和栏允许变宽或变窄，从而填充浏览器窗口中的可用空间不要企图控制内容宽度或换行文本允许按需要重新流动如何创建液态布局通过指定百分比值宽度或不指定，来创建液态布局例：layout1,layout2优势劣势不需

要为具体的浏览器分辨率而设计。文本填满窗口，从而避免了潜在、笨拙的空白空间。在大的浏览器中，行长太长且不适于阅读。它们很难预计。在极端尺寸的浏览器中元素可能太开阔或太拥挤。液态布局优劣比较固定布局固定布局：宽

度固定在具体像素上选择固定布局需要决定的两件事：选择网页宽度：通常基于普通浏览器分辨率，多数都设计为800*600像素决定固定宽度布局将处于浏览器窗口的什么位置如何创建固定布局通过用像素单位指定width属性值来创建固定宽度布局通常，将整个网页内容

放到1个div元素中，并设置具体像素值；各栏元素的宽度也用像素值表示例：layout3,layout4固定布局优劣比较优势劣势布局可预计。对行长提供更好的控制。如果浏览器窗口比网页窄，右边的内容将被隐藏。

如果用户调整字体尺寸，文本元素仍会重新流动，所以不会保证布局完全保持不变。文本字体尺寸非常大时，行长将会短得难用。弹性布局及优劣比较弹性布局随着文本尺寸扩张或收缩如何创建弹性布局通过用em单位指定宽度，来创建弹性布局优

势劣势允许文本尺寸适当变动，提供一致的布局体验。比液态和固定布局更严密地控制行长。图像不适合随着文本和布局的其他部分缩放。使用最大文本尺寸时布局的宽度可能超过浏览器窗口的宽度。总结：DIV+CSS页面布局CSS排版

的步骤大致为：首先整体上对页面进行分块，接着按照分块设计使用<div>标记，并理清<div>标记的嵌套和层叠关系，然后对各<div>标记进行CSS定位，最后在各个分块中添加相应的内容。以常见的“1-2-1”布局为例，“1-2-1”的含义是把整个页面垂直地分成页面头部、页面主体及页面脚注三

部分，页面主体水平地分成工具条和内容主体两部分。DIV+CSS(1-2-1布局结构)DIV+CSS(1-2-1布局结构)根据页面分区情况，设计出页面原div结构。图中图层命名说明如下：#Container/*页面层容器*/#Header/*页

面头部*/#PageBody/*页面主体*/#SideBar/*左工具条*/#MainBody/*内容主体*/#Footer/*页面底部*/1-2-1布局结构：DIV部分DIV+CSS布局结构1-2-1布局结构：CSS部分