CSS之盒子的浮动与定位
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
2.2 relative相对定位
2.2 relative相对定位
• 结论：
– 使用相对定位的盒子，会相对于它原本的位置， 通过偏移指定的距离，到达新的位置。
– 使用相对定位的盒子仍在标准流中，它对父亲 和兄弟盒子都没有任何影响。
– 即使对浮动的盒子使用相对定位，作用也和上 面描述的一致。
2.3 绝对定位absolute
• • • • • • • • • • • • • • • • • •
<html> <head> <style type="text/css"> img.x { position:absolute; left:0px; top:0px; z-index:-1 } </style> </head> <body> <h1>这是一个标题</h1> <img class="x" src="/i/eg_mouse.jpg" /> <p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p> </body> </html>
• 说明：绝对定位的框从标准流中脱离，它 对其后的兄弟盒子的定位没有影响。
2.3 绝对定位absolute
• 特殊性质：如果绝对定位的盒子没有设置 某个偏移量，则该方向坐标保持不变。即 维持原来的位置。利用这个性质，可使某 个盒子脱离标准流，但仍保持在原来的位 置。 • 实例：absolute_position_3.html
CSS之盒子的浮动与定位
一、盒子的浮动
• 在标准流中，一个块级元素会自动伸展， 直到包含它的元素的边界。 • CSS中有一个float属性，默认为none，即标 准流通常的情况。 • 如果将float属性设置为left或right，元素就 会向其父元素的左侧或右侧靠紧，同时， 盒子的宽度不再伸展，而是根据盒子里内 容的宽度来决定。
• 绝对定位使元素的位置与文档流无关，因 此不占据空间。这一点与相对定位不同， 相对定位实际上被看作普通流定位模型的 一部分，因为元素的位置相对于它在普通 流中的位置。
2.3 绝对定位absolute
2.3 绝对定位absolute
• 实例：absolute_position_1.html • 说明：
– 使用绝对定位的盒子是以它的最近的一个已经 定位的祖先元素为基准进行偏移。 – 如果没有已经定位（只要该盒子的position属性 不是static，并且已经被设置）的祖先元素，则 以浏览器窗口为基准进行定位。
2.3 绝对定位absolute
• 实例：absolute_position_2.html • 观察结果：将父块的定位设置为relative;
– Static、relative、absolute、fixed
2.1 static静态定位
• 元素框正常生成。块级元素生成一个矩形框， 作为文档流的一部分，行内元素则会创建一个 或多个行框，置于其父元素中。 • 实例：（两个没有设置Position属性的盒子） no_position.html
2.2 relative相对定位
2.4 z-index空间位置
• z-index属性用于调整定位时重叠块的上下位 置。 z-index值大的页面位于值小的上方。 • z-index的值为整数，可正可负。默认的zindex为0。 • 当两个块的z-index值一样时，保持原有的高 低覆盖关系。
• 设置图像的 z-index： img { position:absolute; left:0px; top:0px; z-index:-1; }
三、盒子的display属性
• 可以使用 display 属性改变生成的框的类型。 这意味着，通过将 display 属性设置为 block， 可以让行内元素（比如 <a> 元素）表现得像 块级元素一样。还可以通过把 display 设置 为 none，让生成的元素根本没有框。这样 的话，该框及其所有内容就不再显示，不 占用文档中的空间。
一、浮动
• 浮动的框可以向左或向右移动，直到它的 外边缘碰到包含框或另一个浮动框的边框 为止。 • 由于浮动框不在文档的普通流中，所以文 档的普通流中的块框表现得就像浮动框不 存在一样。
二、盒子的定位
• 定位的基本思想很简单，它允许你定义元 素框相对于其正常位置应该出现的位置， 或者相对于父元素、另一个元素甚至浏览 器窗口本身的位置。 • 通过使用 position 属性，我们可以选择 4 种 不同类型的定位 ：
• • • • 实例：float_clear_left.html 实例： float_clear_right.html 观察结果 注意：对clear属性的设置要放在文字所在 的盒子里，而不要放到对浮动盒子的设置 里面。
实验八 扩展盒子的高度
• 实例：float_box_height.html • 观察结果 • 说明：包含浮动DIV的容器不会适应高度。 一个DIV盒子的高度是由它里面的标准流内 容决定的，与里面的浮动内容无关。 • 改进：float_box_height_new.html
• 设置为绝对定位的元素框从文档流完全删 除，并相对于其包含块定位，包含块可能 是文档中的另一个元素或者是初始包含块。 元素原先在正常文档流中所占的空间会关 闭，就好像该元素原来不存在一样。元素 定位后生成一个块级框，而不论原来它在 正常流中生成何种类型的框。
2.3 绝对定位absolute
• 准备实例：absolute_position.html
• 实例：float_right_left.html • 观察结果 • 提示：通过CSS布局，可以在HTML不做任何 改变的情况下，调换盒子的显示位置。
实验六 全部向左浮动
• 实例：float_all_left.html（在BOX-1中增加一 行） • 观察结果
实验七 使用clear属性清除浮动的影响
• 实例：float_son2.html • 观察结果 • 注意：box-3的左边框与box-1的左边框是重 合的。
实验三 设置第3个浮动的div
• 实例：float_son3.html • 观察结果
实验四 改变浮动的方法
• 实例：float_right.html • 观察结果
百度文库验五 再次改变浮动的方向
准备代码
• 先制作一个基础的页面，来演示浮动的效 果。 • 实例：float01.html
实验一 设置第1个浮动的div
• 实例：float_son1.html • 观察结果 • 注意：box-2的左边框与box-1的左边框是重 合的，而box-2中的文字会围绕着box-1排列。
实验二 设置第2个浮动的div
• relative：元素框偏移某个距离。元素仍保 持其未定位前的形状，它原本所占的空间 仍保留。 • 说明：通过left或right属性指定其水平偏移 量，通过top或bottom属性指定其垂直偏移 量。通过设置垂直或水平位置，让这个元 素“相对于”它的起点进行移动。 • 实例：relative_position.html • 说明：当子块使用相对定位以后，即使移 动到了父盒子的外面，父盒子也不会变大。