盒子的浮动与定位.ppt

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