《盒子的定位与浮动》由会员分享，可在线阅读，更多相关《盒子的定位与浮动（8页珍藏版）》请在金锄头文库上搜索。
1、CSS系列：css中盒子的浮动与定位1. 盒子的浮动在标准流中，一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直 方向与相邻元素依次排列，不能并排。CSS中float属性，默认为none。将float属性的值设置为left或right，元素就会向其 父元素的左侧或右侧靠紧。同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容 的宽度来决定。float: left;可以使用clear来清除浮动：clear: left | right | both;2. 盒子的定位在CSS中有一个position属性，用来进行定位操作。position属性可以设置为4个属性 值之一： st
2、atic:默认的属性值，该盒子按照标准流（包括浮动方式）进行布局； relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后 使盒子相对于它在原本的标准位置偏移指定的距离。相对定位的盒子仍在标准流中，它后面的 盒子仍以标准流方式对待它。 absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。绝对定位的盒子从标 准流中脱离。它对其后的相邻盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。 fixed：固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，当拖动浏览 器的滚动条时，依然保持对象位置不变。2.1 staticstatic为默认值，表
3、示块保持在原本的位置上，不会有任何移动的效果。没有设置任何 position属性相当于使用static方式。2.2 r elative使用relative相对定位，除了将position属性设置为relative之外，还需要指定一定的 偏移量，水平方向通过left或者right属性来指定，竖直方向通过top或bottom来指定。htmlheadtitle/title.relativepositi:nrelative;t:p20px;le:t20px;wid:h500px;/style/headbodydiv class = relativePosition 相对偏移/div/body/html
4、在上面的示例中，.relative若不设置width，则由于block元素会自动伸展到宽度与父元 素相同，且加上left的20px,则在浏览器中预览时，会出现横向滚动条。使用相对定位的盒子，会相对于它原本的位置，通过偏移指定的距离，到达新的位置。使用相对定位的盒子仍在标准流中，它对父块和兄弟盒子没有任何影响。2.3 absolute示例:htmlheadtitle/titlebodymarg:n20px;font-si:e12px;#containerbackground-col:r#a0c8ff;bord:r1px dashed #000000; paddi:g15px;wid:h300px
5、;#container divbackground-col:r#fff0ac; bord:r1px solid #000000; paddi:g10px;#item-2/style/headbodydiv id=containerdivBox-1/divdiv id=item-2Box-2/divdivBox-3/div/div/body/html预览效果:使用absolute定位，修改#item-2的CSS代码:#item-2 positio : absolute;to : 0;righ : 0;预览效果:EoxlE ox3从预览效果中可以看出，此时item-2的显示范围已经不在contai
6、ner中，不占用container所包含的空间。修改#item-2的CSS代码：#item-2 positio : absolute;to : 10px;righ : 10px;效果预览:B ox3Bok-!dfv#container 332px 九 104px修改了 top和right的设置，item-2显示效果仍为以浏览器窗口为基准。absolute定位并不是都只能以浏览器窗口为基准来定位的，修改con tai ner的CSS代码:#container background-colo: #a0c8ff;borde: 1px dashed #000000;paddin : 15px;widt
7、 : 300px;positio : relative;显示效果预览:这时的效果偏移距离没有变化，但是偏移的基准不再是浏览器窗口，而是con tai ner,即 父 div。对于absolute定位的描述：使用absolute定位的盒子以它的最近的一个已经定位的祖先元素为基准进行偏 移。如果没有已经定位的祖先元素，则以浏览器窗口为基准进行定位。已经定位的含义是position属性被设置，并且被设置为不是static的任意一种方式。最近是指在这个节点的所有祖先节点中，距离该节点的层次最近的祖先节点，以距离最 近的祖先节点作为定位基准。 absolute定位的框从标准文档流中脱离，对其后的相邻其他
8、盒子的定位没有影响，其他 的盒子就好像这个盒子不存在一样。2.4 fixedfixed定位与absolute定位有些类似，区别在于定位的基准不是祖先元素，而是浏览器窗 口或者其他显示设备的窗口。当访问者拖动浏览器窗口的滚动条时，固定定位的元素将保持相 对浏览器窗口不变的位置。示例: htmlheadtitle/titlebodyfont-si:e12px;marg:n0;paddi:g0;#tapbarpositi:nfixed;heig:t30px;line-heig:t30px;wid:h100%;background-col:r#f5f5f5;t:0;le:0;#containerbac
9、kground-col:r#a0c8ff;bord:r1px dashed #000000;wid:96%;marg:30px auto auto; heig:t1500px;#container divbackground-col:r#fff0ac;bord:r1px solid #000000; paddi:g10px;/style/headbodydiv id=tapbar固定定位栏div id=containerdivBox-1/divdivBox-2/divdivBox-3/div/div/body/html效果预览:从预览效果中可以看出，设置了 fixed定位的topbar栏没有随着浏览器的下拉滚动而变 动位置。3. z-index空间位置z-index属性用于调整定位时重叠的上下位置，页面为x-y轴，垂直于页面的方向为z轴, z-index值大的页面位于其值小的上方。z-index属性的值为整数，可以是正数也可以是负数。当块被设置了 position属性时，该 值便可以设置各块之间的重叠高低关系。默认的z-index值为0,当两个块的z-index值一样 时，将保持原有的高低覆盖关系。分类：CSS
