盒子模型与定位.ppt

《盒子模型与定位.ppt》由会员分享，可在线阅读，更多相关《盒子模型与定位.ppt（34页珍藏版）》请在得力文库 - 分享文档赚钱的网站上搜索。

1、商业网页设计与制作商业网页设计与制作第四讲第四讲深入理解盒子模型深入理解盒子模型深入理解盒子模型深入理解盒子模型o什么是什么是“模型模型”本质特征的抽象本质特征的抽象o布局的布局的“模型模型”深入理解盒子模型深入理解盒子模型oo什么是什么是什么是什么是“模型模型模型模型”本质特本质特本质特本质特征的抽象征的抽象征的抽象征的抽象oo布局的布局的布局的布局的“模型模型模型模型”深入理解盒子模型深入理解盒子模型divborder-width:6px;border-color:#000000;margin:20px;padding:5px;background-color:#FFFFCC;深入理解盒子

2、模型深入理解盒子模型o属性值的简写形式属性值的简写形式oo方法是按照规定的顺序，给出方法是按照规定的顺序，给出方法是按照规定的顺序，给出方法是按照规定的顺序，给出2 2个、个、个、个、3 3个或者个或者个或者个或者4 4个属性值，个属性值，个属性值，个属性值，它们的含义将有所区别，具体含义如下：它们的含义将有所区别，具体含义如下：它们的含义将有所区别，具体含义如下：它们的含义将有所区别，具体含义如下：如果给出如果给出如果给出如果给出2 2个属性值，前者表示上下边框的属性，后者表个属性值，前者表示上下边框的属性，后者表个属性值，前者表示上下边框的属性，后者表个属性值，前者表示上下边框的属性，后者

3、表示左右边框的属性；示左右边框的属性；示左右边框的属性；示左右边框的属性；如果给出如果给出如果给出如果给出3 3个属性值，前者表示上边框的属性，中间的数个属性值，前者表示上边框的属性，中间的数个属性值，前者表示上边框的属性，中间的数个属性值，前者表示上边框的属性，中间的数值表示左右边框的属性，后者表示下边框的属性；值表示左右边框的属性，后者表示下边框的属性；值表示左右边框的属性，后者表示下边框的属性；值表示左右边框的属性，后者表示下边框的属性；如果给出如果给出如果给出如果给出4 4个属性值，依次表示上、右、下、左边框的属个属性值，依次表示上、右、下、左边框的属个属性值，依次表示上、右、下、左边

4、框的属个属性值，依次表示上、右、下、左边框的属性，即顺时针排序。性，即顺时针排序。性，即顺时针排序。性，即顺时针排序。深入理解盒子模型深入理解盒子模型o属性值的简写形式属性值的简写形式border-color:redgreenborder-color:redgreenborder-width:1px2px3px;border-width:1px2px3px;border-style:dotteddashedsolidborder-style:dotteddashedsoliddouble;double;深入理解盒子模型深入理解盒子模型o内边距（内边距（padding）#outerBoxoute

5、rBox width:128px;width:128px;height:128px;height:128px;padding:20pxpadding:20px20px20px10px;/*10px;/*上上上上左右左右左右左右下下下下*/padding-left:10px;padding-left:10px;border:10pxgraydashed;border:10pxgraydashed;深入理解盒子模型深入理解盒子模型o外边距（外边距（margin）#outerBoxouterBox width:128px;width:128px;height:128px;height:128px;p

6、adding:20px padding:20px 20px20px 10px;/*10px;/*上上 左右左右 下下*/padding-left:10px;padding-left:10px;border:10px gray dashed;border:10px gray dashed;bodybodyborder:1px black solid;border:1px black solid;background:#cc0;background:#cc0;深入理解盒子模型深入理解盒子模型oHTML与DOM深入理解盒子模型深入理解盒子模型o标准文档流深入理解盒子模型深入理解盒子模型oo 块元素块

7、元素块元素块元素块元素块元素块元素块元素(blockelement)(blockelement)一般是其他元素的容器元素，一般是其他元素的容器元素，一般是其他元素的容器元素，一般是其他元素的容器元素，divdiv即是常见块元素，其他如段落标签即是常见块元素，其他如段落标签即是常见块元素，其他如段落标签即是常见块元素，其他如段落标签“p”p”、标题、标题、标题、标题“h”h”。oo 行内元素行内元素行内元素行内元素内联元素内联元素内联元素内联元素(inlineelement)(inlineelement)一般都是基于语义级一般都是基于语义级一般都是基于语义级一般都是基于语义级(semantic)

8、(semantic)的基本元素。内联元素只能容纳文本或者其的基本元素。内联元素只能容纳文本或者其的基本元素。内联元素只能容纳文本或者其的基本元素。内联元素只能容纳文本或者其他行内元素，常见内联元素他行内元素，常见内联元素他行内元素，常见内联元素他行内元素，常见内联元素 spanspan、aa、图片元素、图片元素、图片元素、图片元素 imgimg。元素元素元素元素说说说说明明明明divdiv层层层层olololol排序表排序表排序表排序表单单单单ulul非排序列表非排序列表非排序列表非排序列表p p段落段落段落段落centercenter居中居中居中居中对齐块对齐块对齐块对齐块h hh1-h1-

9、大大大大标题标题、h2-h2-副副副副标题标题、h3-3h3-3级标题级标题hrhr水平分隔水平分隔水平分隔水平分隔线线线线常见的块元素常见的块元素常见的块元素常见的块元素深入理解盒子模型深入理解盒子模型深入理解盒子模型深入理解盒子模型o盒子在标准流中的定位原则盒子在标准流中的定位原则n n实验实验实验实验11行内元素之间的水平行内元素之间的水平行内元素之间的水平行内元素之间的水平marginmarginspan.leftspan.left margin-right:30px;margin-right:30px;background-color:#a9d6ff;background-color

10、:#a9d6ff;span.rightspan.right margin-left:40px;margin-left:40px;background-color:#eeb0b0;background-color:#eeb0b0;span 2span 1margin-rightmargin-left深入理解盒子模型深入理解盒子模型o盒子在标准流中的定位原则盒子在标准流中的定位原则n n实验实验实验实验22块级元素之间的竖直块级元素之间的竖直块级元素之间的竖直块级元素之间的竖直marginmargin块元素块元素块元素块元素11块元素块元素块元素块元素22块元素2块元素1块元素1块元素2margi

11、n-bottom:50pxmargin-top:30px深入理解盒子模型深入理解盒子模型o盒子在标准流中的定位原则盒子在标准流中的定位原则n n实验实验实验实验33嵌套盒子之间的嵌套盒子之间的嵌套盒子之间的嵌套盒子之间的marginmargin深入理解盒子模型深入理解盒子模型 第第1 1个列表的第个列表的第1 1个目内容个目内容/第第1 1个列表个列表的第的第2 2个项目内容，内容更长一些，目的个项目内容，内容更长一些，目的是演示自动折行的效果。是演示自动折行的效果。/第第2 2个列表的第个列表的第1 1个项目内容个项目内容/第第2 2个列表个列表的第的第2 2个项目内容，内容更长一些，目的个

12、项目内容，内容更长一些，目的是演示自动折行的效果。是演示自动折行的效果。/CSSCSS中的几何题中的几何题ulul background:#background:#dddddd;margin:15px margin:15px 15px15px 15px15px 15px15px;padding:5px padding:5px 5px5px 5px5px 5px5px;lili color:black;color:black;background:#background:#aaaaaa margin:20px margin:20px 20px20px 20px20px 20px20px;padd

13、ing:10px 0px 10px padding:10px 0px 10px 10px10px;list-style:none list-style:none li.withborderli.withborder border-style:dashed;border-style:dashed;border-width:5px;border-width:5px;border-color:black;border-color:black;margin-top:20px margin-top:20px；深入理解盒子模型深入理解盒子模型oCSS中的几何题中的几何题深入理解盒子模型深入理解盒子模型o盒

14、子的浮动盒子的浮动n n准备代码准备代码准备代码准备代码深入理解盒子模型深入理解盒子模型o盒子的浮动n n实验实验11设置第设置第1 1个浮动的个浮动的divdiv深入理解盒子模型深入理解盒子模型o盒子的浮动n n实验实验22设置第设置第2 2个浮动的个浮动的divdiv深入理解盒子模型深入理解盒子模型o盒子的浮动盒子的浮动n n实验实验实验实验33设置第设置第设置第设置第3 3个浮动的个浮动的个浮动的个浮动的divdiv深入理解盒子模型深入理解盒子模型o盒子的浮动盒子的浮动n n实验实验实验实验44改变浮动的方向改变浮动的方向改变浮动的方向改变浮动的方向深入理解盒子模型深入理解盒子模型o盒子

15、的浮动盒子的浮动n n实验实验实验实验55再次改变浮动的方向再次改变浮动的方向再次改变浮动的方向再次改变浮动的方向深入理解盒子模型深入理解盒子模型o盒子的浮动盒子的浮动n n实验实验实验实验66全部向左浮动全部向左浮动全部向左浮动全部向左浮动深入理解盒子模型深入理解盒子模型o盒子的浮动盒子的浮动n n实验实验实验实验77使用使用使用使用clearclear属性清除浮动的影响属性清除浮动的影响属性清除浮动的影响属性清除浮动的影响深入理解盒子模型深入理解盒子模型o盒子的浮动盒子的浮动n n实验实验实验实验88扩展盒子的高度扩展盒子的高度扩展盒子的高度扩展盒子的高度盒子的浮动与定位盒子的浮动与定位o

16、盒子的定位盒子的定位n n广义的广义的广义的广义的“定位定位定位定位”：当提到把希望某个元素放到某个位置：当提到把希望某个元素放到某个位置：当提到把希望某个元素放到某个位置：当提到把希望某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何的时候，这个动作可以称为定位操作，可以使用任何的时候，这个动作可以称为定位操作，可以使用任何的时候，这个动作可以称为定位操作，可以使用任何CSSCSS规则来实现，这就是泛指的一个网页排版中的定位规则来实现，这就是泛指的一个网页排版中的定位规则来实现，这就是泛指的一个网页排版中的定位规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排

17、版时，同样存在定为的问题。操作，使用传统的表格排版时，同样存在定为的问题。操作，使用传统的表格排版时，同样存在定为的问题。操作，使用传统的表格排版时，同样存在定为的问题。n n狭义的狭义的狭义的狭义的“定位定位定位定位”：在：在：在：在CSSCSS中有一个非常重要的属性中有一个非常重要的属性中有一个非常重要的属性中有一个非常重要的属性positionposition，这个单词要翻译为中文，也是定位的意思，这个单词要翻译为中文，也是定位的意思，这个单词要翻译为中文，也是定位的意思，这个单词要翻译为中文，也是定位的意思，然而要使用然而要使用然而要使用然而要使用CSSCSS进行定位操作的手段，并不仅

18、仅通过择进行定位操作的手段，并不仅仅通过择进行定位操作的手段，并不仅仅通过择进行定位操作的手段，并不仅仅通过择个属性来实现，因此不要把把二者混淆。个属性来实现，因此不要把把二者混淆。个属性来实现，因此不要把把二者混淆。个属性来实现，因此不要把把二者混淆。盒子的浮动与定位盒子的浮动与定位o盒子的定位盒子的定位n nstaticstatic：这是默认的属性值，也就是该盒子按照标准流：这是默认的属性值，也就是该盒子按照标准流：这是默认的属性值，也就是该盒子按照标准流：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。（包括浮动方式）进行布局。（包括浮动方式）进行布局。（包括浮动方式）

19、进行布局。n nrelativerelative：称为相对定位，使用相对定位的盒子的位置：称为相对定位，使用相对定位的盒子的位置：称为相对定位，使用相对定位的盒子的位置：称为相对定位，使用相对定位的盒子的位置根据常以标准流的排版方式为基础，然后使盒子相对于它根据常以标准流的排版方式为基础，然后使盒子相对于它根据常以标准流的排版方式为基础，然后使盒子相对于它根据常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在在原本的标准位置偏移指定的距离。相对定位的盒子仍在在原本的标准位置偏移指定的距离。相对定位的盒子仍在在原本的标准位置偏移指定的距离。相对定位的

20、盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。标准流中，它后面的盒子仍以标准流方式对待它。标准流中，它后面的盒子仍以标准流方式对待它。标准流中，它后面的盒子仍以标准流方式对待它。盒子的浮动与定位盒子的浮动与定位o盒子的定位盒子的定位n nabsoluteabsolute：绝对定位，盒子的位置以他的包含框为基：绝对定位，盒子的位置以他的包含框为基：绝对定位，盒子的位置以他的包含框为基：绝对定位，盒子的位置以他的包含框为基准进行偏移。绝对定位的框从标准流中脱离。这意味着准进行偏移。绝对定位的框从标准流中脱离。这意味着准进行偏移。绝对定位的框从标准流中脱离。这意味着准进行偏移。绝对定位的框从标

21、准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就它们对其后的兄弟盒子的定位没有影响，其他的盒子就它们对其后的兄弟盒子的定位没有影响，其他的盒子就它们对其后的兄弟盒子的定位没有影响，其他的盒子就好形这个盒子不存在一样。好形这个盒子不存在一样。好形这个盒子不存在一样。好形这个盒子不存在一样。n nfixedfixed：称为固定定位，它和绝对定位类似，只是以浏：称为固定定位，它和绝对定位类似，只是以浏：称为固定定位，它和绝对定位类似，只是以浏：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准，进行定位。览器窗口为基准，进行定位。览器窗口为基准，进行定位。览器窗口为基准，进行

22、定位。n nstaticstatic：这是默认的属性值，也就是该盒子按照标准流：这是默认的属性值，也就是该盒子按照标准流：这是默认的属性值，也就是该盒子按照标准流：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。（包括浮动方式）进行布局。（包括浮动方式）进行布局。（包括浮动方式）进行布局。4.4.盒子的浮动与定位盒子的浮动与定位o盒子的定位n nRelativeRelative：称为相对定位，使用相对定位的盒子的位置：称为相对定位，使用相对定位的盒子的位置根据常以标准流的排版方式为基础，然后使盒子相对于根据常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定

23、的距离。相对定位的盒子它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。仍在标准流中，它后面的盒子仍以标准流方式对待它。盒子的浮动与定位盒子的浮动与定位o盒子的定位盒子的定位n nAbsoluteAbsolute：绝对定位，盒子的位置以他的包含框为基：绝对定位，盒子的位置以他的包含框为基：绝对定位，盒子的位置以他的包含框为基：绝对定位，盒子的位置以他的包含框为基准进行偏移。绝对定位的框从标准流中脱离。这意味着准进行偏移。绝对定位的框从标准流中脱离。这意味着准进行偏移。绝对定位的框从标准流中脱离。这意味着准进行偏移。绝对定位的框从标准流中脱离。这意味

24、着它们对其后的兄弟盒子的定位没有影响，其他的盒子就它们对其后的兄弟盒子的定位没有影响，其他的盒子就它们对其后的兄弟盒子的定位没有影响，其他的盒子就它们对其后的兄弟盒子的定位没有影响，其他的盒子就好形这个盒子不存在一样。好形这个盒子不存在一样。好形这个盒子不存在一样。好形这个盒子不存在一样。4.4.盒子的浮动与定位盒子的浮动与定位o盒子的定位n nFixedFixed：称为固定定位，它和绝对定位类似，只是以浏：称为固定定位，它和绝对定位类似，只是以浏：称为固定定位，它和绝对定位类似，只是以浏：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准，进行定位。览器窗口为基准，进行定位。览器窗口为基

25、准，进行定位。览器窗口为基准，进行定位。4.4.盒子的浮动与定位盒子的浮动与定位o盒子的display属性Box-1Box-1Box-2Box-2Box-3Box-3Box-4Box-4Box-5Box-5Box-6Box-6Box-7Box-7Box-7Box-7盒子的浮动与定位盒子的浮动与定位o盒子的display属性div style=Box-1Box-1div style=Box-2Box-2div style=Box-3Box-3span style=Box-4Box-4span style=Box-5Box-5span style=Box-6Box-6div style=Box-7Box-7span style=Box-8Box-8