盒子的浮动与定位

1、l 盒子的浮动l 盒子的定位l Z-index空间位置l 盒子的display属性本讲目标本讲目标新知识点导入新知识点导入一切皆为框，如何打破文档流？如何随心所欲的排版这些框框、盒子呢？今天我们来了解网页设计中重要的部分：盒子的浮动盒子的浮动盒子的浮动盒子的浮动 l 在标准流中，块级元素的盒子都是上下排列，行内元素的盒子都是左右排列，如果仅仅按照标准流的方式进行排列，就只有这几种可能性，限制太大。CSS的制订者也想到了这样排列限制的问题，因此又给出了浮动和定位方式进行盒子的排列，从而使排版的灵活性大大提高。l 例如：有时希望相邻块级元素的盒子左右排列（所有盒子浮动）或者希望一个盒子被另一个盒子

2、中的内容所环绕（一个盒子浮动）做出图文混排的效果，这时最简单的办法就是运用浮动（float）属性使盒子在浮动方式下定位。 l 在标准流中，一个块级元素在水平方向会自动伸展，在它的父元素中占满整个一行；而在竖直方向和其他元素依次排列，不能并排，如图4-62所示。使用“浮动”方式后，这种排列方式就会发生改变。l CSS中有一个float属性，默认值为none，也就是标准流通常的情况，如果将float属性的值设为left或right，元素就会向其父元素的左侧或右侧靠紧，同时盒子的宽度不再伸展，而是收缩，在没设置宽度时，会根据盒子里面的内容来确定宽度。浮动的清除浮动的清除l clearclear是清除

3、浮动属性，它的取值有是清除浮动属性，它的取值有leftleft、rightright、bothboth和和nonenone（默认（默认值），如果设置盒子的清除浮动属性值），如果设置盒子的清除浮动属性clearclear值为值为leftleft或或rightright，表示该，表示该盒子的左边或右边不允许有浮动的对象。值设置为盒子的左边或右边不允许有浮动的对象。值设置为bothboth则表示两边都则表示两边都不允许有浮动对象，因此该盒子将会在浏览器中另起一行显示不允许有浮动对象，因此该盒子将会在浏览器中另起一行显示 l clear属性既可以用在未浮动的元素上，也可以用在浮动的元素上，如果对Box

4、-3同时设置清除浮动和浮动，即：l .son3clear:both; float:left;l 总结：清除浮动是清除其它盒子浮动对该元素的影响，而设置浮动是让元素自身浮动，两者并不矛盾，因此可同时设置元素清除浮动和浮动 浮动的应用举例浮动的应用举例l1 图文混排及首字下沉效果等l2菜单的竖横转换对li设置浮动即可实现l 3 制作栏目框标题栏 标题栏的左端是栏目标题，右端是“更多”之类的链接。如何将文字分别放在一个盒子的左右两端呢？ 最简单的办法就是设置左边的文字左浮动，右边的文字右浮动。盒子的定位盒子的定位CSS中定位的概念中定位的概念广义的“定位”：在网页排版中，如何将一个盒子放置在某个位置

5、上。狭义的“定位”：CSS中有一个非常重要的属性position，之前我们用过该属性，实现了背景图片的定位在本讲中，我们介绍的是广义的“定位”：默认的属性值默认的属性值绝对定位绝对定位相对定位相对定位position定位定位-1l position定位分为：绝对定位与相对定位。定位分为：绝对定位与相对定位。l position从字面意思上看就是指定块的位置，即从字面意思上看就是指定块的位置，即块相对于块相对于其父块的位置和相对于它自身应该在位置其父块的位置和相对于它自身应该在位置。常用属性：常用属性： position:absolute; /绝对定位绝对定位 position:relative

6、; /相对定位相对定位 left:50px; /块原点距离父块左侧距离块原点距离父块左侧距离 top:50px; /块原点距离父块顶部距离块原点距离父块顶部距离 z-index:1; /深度定位深度定位案例演示position定位定位-2l 通过上述几个案例的演示，总结如下：通过上述几个案例的演示，总结如下： 1、position、top、left、z-index四个属性配合使用；四个属性配合使用；2、绝对定位时，、绝对定位时，该元素悬浮于页面之上，不再占据页面位置；该元素悬浮于页面之上，不再占据页面位置；3、绝对定位的基准点是以父块为标准，从而界定、绝对定位的基准点是以父块为标准，从而界定t

7、op、left值；值；4、相对定位时，、相对定位时，元素依然占据自己原始页面位置，只不过看上去元素依然占据自己原始页面位置，只不过看上去位置相对于自身发生了偏移；位置相对于自身发生了偏移；5、相对定位的基准点是以原始位置的原点为标准，从而界定、相对定位的基准点是以原始位置的原点为标准，从而界定top、left值；值；6、z-index值决定了绝对定位时，元素距离页面有多远，值越大，值决定了绝对定位时，元素距离页面有多远，值越大，距离页面越远。距离页面越远。网页的固定宽度网页的固定宽度1-3-1布局布局 l在默认情况下，div作为块级元素是占满整行从上到下依次排列的，但在网页的分栏布局中，例如1-3-1固定宽度布局，我们希望中间三栏（三个div盒子）从左到右并列排列，这时就需要将这三个div盒子都设置为浮动。l但三个div盒子都浮动后，只能浮动到窗口的左边或右边，无法在浏览器中居中，因此需要在三个div盒子外面再套一