盒子的浮动与定位

《盒子的浮动与定位》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

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

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

3、据盒子里面的内容来确定宽度。浮动的清除clear是清除浮动属性，它的取值有left、right、both和none（默认值），如果设置盒子的清除浮动属性clear值为left或right，表示该盒子的左边或右边不允许有浮动的对象。值设置为both则表示两边都不允许有浮动对象，因此该盒子将会在浏览器中另起一行显示clear属性既可以用在未浮动的元素上，也可以用在浮动的元素上，如果对Box-3同时设置清除浮动和浮动，即：.son3{clear:both;float:left;}总结：清除浮动是清除其它盒子浮动对该元素的影响，而设置浮动是让

4、元素自身浮动，两者并不矛盾，因此可同时设置元素清除浮动和浮动浮动的应用举例1图文混排及首字下沉效果等2菜单的竖横转换对li设置浮动即可实现3制作栏目框标题栏标题栏的左端是栏目标题，右端是“更多”之类的链接。如何将文字分别放在一个盒子的左右两端呢？最简单的办法就是设置左边的文字左浮动，右边的文字右浮动。盒子的定位CSS中定位的概念广义的“定位”：在网页排版中，如何将一个盒子放置在某个位置上。狭义的“定位”：CSS中有一个非常重要的属性position，之前我们用过该属性，实现了背景图片的定位在本讲中，我们介绍的是广义的“定位”：默认的属

5、性值绝对定位相对定位position定位-1position定位分为：绝对定位与相对定位。position从字面意思上看就是指定块的位置，即块相对于其父块的位置和相对于它自身应该在位置。常用属性：position:absolute;//绝对定位position:relative;//相对定位left:50px;//块原点距离父块左侧距离top:50px;//块原点距离父块顶部距离z-index:1;//深度定位案例演示position定位-2通过上述几个案例的演示，总结如下：1、position、top、left、z-index四个属

6、性配合使用；2、绝对定位时，该元素悬浮于页面之上，不再占据页面位置；3、绝对定位的基准点是以父块为标准，从而界定top、left值；4、相对定位时，元素依然占据自己原始页面位置，只不过看上去位置相对于自身发生了偏移；5、相对定位的基准点是以原始位置的原点为标准，从而界定top、left值；6、z-index值决定了绝对定位时，元素距离页面有多远，值越大，距离页面越远。网页的固定宽度1-3-1布局在默认情况下，div作为块级元素是占满整行从上到下依次排列的，但在网页的分栏布局中，例如1-3-1固定宽度布局，我们希望中间三栏（三个div盒

7、子）从左到右并列排列，这时就需要将这三个div盒子都设置为浮动。但三个div盒子都浮动后，只能浮动到窗口的左边或右边，无法在浏览器中居中，因此需要在三个div盒子外面再套一个盒子（称为container），让container居中，这样就实现了里面的三个div盒子居中1－3－1布局示意图bodyheadercontainernavcontentsidepagefooter千里之行始于足下18