JSP程序设计基础.pptVIP

Clear:right清除右浮动的影响 图5.7 清除浮动对右侧影响后的效果 .father p{ border:1px dashed #111111; background-color:#ff90ba; clear:right; } 重新思考 .mainContent { float:left; width:540px; } .sideBar { float:right; width:186px; margin-right:10px; margin-top:20px; } mainContent sideBar mainContent sideBar 再细节思考这个页面DIV布局 5.2 盒子的定位 广义的“定位”：要将某个元素放到某个位置的时候，这个动作可以称为定位操作，可以使用任何CSS规则来实现，这就是泛指的一个网页排版中的定位操作，使用传统的表格排版时，同样存在定位的问题。 狭义的“定位”：在CSS中有一个非常重要的属性position，这个单词翻译为中文也是定位的意思。 然而要使用CSS进行定位操作并不仅仅通过这个属性来实现，因此不要把二者混淆。 首先，对position属性的使用方法做一个概述，后面再具体举例子说明。position属性可以设置为以下4个属性值之一。 盒子的定位 static：这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。 relative：称为相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。 盒子的定位 absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标准流中脱离。这意味着它们对其后的兄弟盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。 fixed：称为固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，也就是当拖动浏览器窗口的滚动条时，依然保持对象位置不变。 5.2.1 静态定位 图5.8 没有设置position属性时的状态 5.2.2 相对定位 1．一个子块的情况 图5.9 一个div设置为相对定定位后的效果 图5.10 以右侧和下侧为基准设置相对定定位 2．两个子块的情况 图5.11 设置为相对定位前的效果 图5.12 两个兄弟div的情况下， 其中一个设置为相对定位后的效果 两条关于“相对定位”的定位原则 使用相对定位的盒子，会相对于它在原本的位置，通过偏移指定的距离，到达新的位置。 使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。 图5.13 两个兄弟div都设置为相对定位后的效果 图5.14 在浮动方式下，使用相对定位 5.2.3 绝对定位 介绍了相对定位以后，下面介绍绝对定位（absolute）。 通过上述讲解，可以了解到各种position属性都需要通过配合偏移一定的距离来实现定位，而其中核心的问题就是以什么作为偏移的基准。 1．创建基础页面 2．使用绝对定位 3．浏览器的Bug与Hack 图5.15 设置绝对定位前的效果 图5.16 将中间的div设置为绝对定位后的效果 图5.17 设置偏移量后的效果 图5.18 将父块设置为“包含块”后的效果 body h2产品分类/h2 ul lia href=#0-1岁玩具/a/li lia href=#2-3岁玩具/a/li lia href=#4-6岁玩具/a/li lia href=#0-1岁服装/a/li /ul /body 标准文档流 body li ul li li li a a a a body ul li li li li a a a a 图4.8 DOM树与页面布局的对应关系 4.4.3 标准文档流 “标准文档流”（Normal Document Stream），简称“标准流”，是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。 1．块级元素（block level） li占据着一个矩形的区域，并且和相邻的li依次竖直排列，不会排在同一行中。 ul也具有同样的性质，占据着一个矩形的区域，并且和相邻的ul依次竖直排列，不会排在同一行中。 因此，这类元素称为“块级元素”（block level），即它们总是以一个块的形式表现出来，并且跟同级的兄弟块依次竖直排列，左右撑满。 标准文档流 2．行内元素（inline） 对于文字这类元素，各个字母之间横向排列，到最右端自动折行，这就是另一种元素，称为“行内元素”（inline）。 比如str