第11讲_盒子的浮动与定位

网页的固定宽度1-3-1布局
在默认情况下，div作为块级元素是占满整行从 上到下依次排列的，但在网页的分栏布局中， 例如1-3-1固定宽度布局，我们希望中间三栏（ 三个div盒子）从左到右并列排列，这时就需要 将这三个div盒子都设置为浮动。 但三个div盒子都浮动后，只能浮动到窗口的左 边或右边，无法在浏览器中居中，因此需要在 三个div盒子外面再套一个盒子（称为container ），让container居中，这样就实现了里面的三 个div盒子居中
position定位-2
通过上述几个案例的演示，总结如下：
1、position、top、left、z-index四个属性配合使用； 2、绝对定位时，该元素悬浮于页面之上，不再占据页面位置； 3、绝对定位的基准点是以父块为标准，从而界定top、left值； 4、相对定位时，元素依然占据自己原始页面位置，只不过看上去 位置相对于自身发生了偏移； 5、相对定位的基准点是以原始位置的原点为标准，从而界定top、 left值； 6、z-index值决定了绝对定位时，元素距离页面有多远，值越大， 距离页面越远。
案例演示
position从字面意思上看就是指定块的位置，即块相对于 其父块的位置和相对于它自身应该在位置。
常用属性： position:absolute; position:relative; left:50px; top:50px; z-index:1;
//绝对定位 //相对定位 //块原点距离父块左侧距离 //块原点距离父块顶部距离 //深度定位
1－3－1布局示意图
header container nav content body
side
pagefooter
千里之行 始于足下
18
本讲目标
盒子的浮动 盒子的定位 Z-index空间位置
盒子的display属性
新知识点导入
一切皆为框，如何打破文档流？如何随心所欲的排 版这些框框、盒子呢？ 今天我们来了解网页设计中重要的部分：
Hale Waihona Puke Baidu 盒子的浮动
盒子的浮动
在标准流中，块级元素的盒子都是上下排列，行 内元素的盒子都是左右排列，如果仅仅按照标准 流的方式进行排列，就只有这几种可能性，限制 太大。CSS的制订者也想到了这样排列限制的问题 ，因此又给出了浮动和定位方式进行盒子的排列 ，从而使排版的灵活性大大提高。 例如：有时希望相邻块级元素的盒子左右排列（ 所有盒子浮动）或者希望一个盒子被另一个盒子 中的内容所环绕（一个盒子浮动）做出图文混排 的效果，这时最简单的办法就是运用浮动（float ）属性使盒子在浮动方式下定位。
浮动的清除
clear是清除浮动属性，它的取值有left、right 、both和none（默认值），如果设置盒子的清除 浮动属性clear值为left或right，表示该盒子的 左边或右边不允许有浮动的对象。值设置为both 则表示两边都不允许有浮动对象，因此该盒子将 会在浏览器中另起一行显示
clear属性既可以用在未浮动的元素上，也可以用 在浮动的元素上，如果对Box-3同时设置清除浮动 和浮动，即： .son3{clear:both; float:left;}
总结：清除浮动是清除其它盒子浮动对该元素的 影响，而设置浮动是让元素自身浮动，两者并不 矛盾，因此可同时设置元素清除浮动和浮动
在标准流中，一个块级元素在水平方向会自动伸 展，在它的父元素中占满整个一行；而在竖直方 向和其他元素依次排列，不能并排，如图4-62所 示。使用“浮动”方式后，这种排列方式就会发 生改变。 CSS中有一个float属性，默认值为none，也就是标 准流通常的情况，如果将float属性的值设为left或 right，元素就会向其父元素的左侧或右侧靠紧， 同时盒子的宽度不再伸展，而是收缩，在没设置 宽度时，会根据盒子里面的内容来确定宽度。
浮动的应用举例
1 图文混排及首字下沉效果等
2菜单的竖横转换
对li设置浮动即可实现
3 制作栏目框标题栏
标题栏的左端是栏目标题，右端是“更多”之类的链接。 如何将文字分别放在一个盒子的左右两端呢？
最简单的办法就是设置左边的文字左浮动，右边的文字右 浮动。
盒子的定位
CSS中定位的概念
广义的“定位”：在网页排版中，如何将一个盒子放置在某 个位置上。
狭义的“定位”：CSS中有一个非常重要的属性position，之 前我们用过该属性，实现了背景图片的定位 在本讲中，我们介绍的是广义的“定位”：
绝对定位 相对定位
默认的属性值
position定位-1
position定位分为：绝对定位与相对定位。