网页制作学习：彻底弄懂CSS盒子模式之四-梦幻屋-[学院]

网页制作学习：彻底弄懂CSS盒子模式之四

更新时间: 2007-4-5 23:01:00　来源: 本站原创　作者: 佚名

　　网页制作学习：彻底弄懂CSS盒子模式之四......

（5）相对定位的对象不可以重叠。这一点也许比较难理解，先来这样理解吧，因为相对定位的对像没有脱离文本流，就像两个还是住在同一层楼的人，任何时候，他们脚下踩的地方不可能被另一个人踩着的，如果可以就意味着两个人共享一块地方了。在下面的实例中，两个小盒子都刚好排在大盒子上方，所以在大盒子中输入的文字被挤到了下面。上面两个盒子我再用相对定位的方法对调了它们的位置，当前它们下方的空间其实不是自己的，也正因为它们没有重叠，所以盒子上方还是有两个盒子占用的空间，下面文字无法向上流动（我已对盒子设定了浮动属性的了，如果不设定，即使有空间文本也不会往上流，上面盒子是块级元素，会独立占据一行）。

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>相对定位对象不可层叠</title> <style type="text/css">  </style> </head> <body> <div class="box1"> <div class="box2">我家在左边</div> <div class="box3">我家在右边</div> 相对定位对象是在正常文本流中移动的，所以它的存在还是会影响文本流的布局，如果是绝对定位，这些文本应向上流入上方两个盒子的底部了。 </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

（6）高度自适应的妙用。在下面实例中，右边的紫色小盒子高度是没有设定的，它的高度是随着里面内容的增加而增高的，但我们又可以通过绝对定位方法把它始终定位在父盒子的右上角。同理，我们也可以只设定高度而让宽度自动随内容增加而变宽。

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>高度自适应的妙用</title> <style type="text/css">  </style> </head> <body> <div class="box1"> <div class="box3">右边的小盒子高度是没有设定的，它的高度是随着里面内容的增加而增高的，但我们又可以通过绝对定位把它始终定在父盒子的右上角。</div> <div class="box2"> <p>蓝色理想<br /> 经典论坛<br /> 业界动态<br /> 技术文档 </p> </div> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

（7）给包含块一个高度，或者说给定位对象的父级设定一个高度。不然也许显示的结果并不是你想要的。在下面的例子中，如果你本意要实现下面效果：把小盒子在父盒子中的左上角垂直往下偏移，上方留出一块区域，如果你删除了box1的高度会怎么样呢？自己测试一下吧。

运行代码框

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

（8）放置绝对定位对像到可视区外会出现滚动条。一般情况下，绝对定位是用来方便定位网页要看得见元素的，而不是拿它来隐藏对象的，一般隐藏对象常用到display与margin，如果你试图把绝对定位的对象移出可视区域，嘿嘿，浏览器会为你准备滚动条去看望它。

运行代码框

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>放置绝对定位对像到可视区外会出现滚动条</title> <style type="text/css">  </style> </head> <body> <div class="box2">这是右边对象原来所在的位置，即没有被赋予定位属性前的位置</div> <div class="box"></div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

上一页 [1] [2] [3] [4] 下一页

上一篇文章：彻底弄懂CSS盒子模式之五

发表

点击查看

与 CSS盒子相关的文章

彻底弄懂CSS盒子模式之五

今日推荐

Photoshop调色教程：怀旧色调效果简单打造	Photoshop调色教程偏色宝宝照片肤色调整	PhotoShop制作斑驳非主流效果照片
用Photoshop制作数码点阵地图特效	用Photoshop打造照片仙境晶莹之美	Photoshop制作非主流：教你睫毛和嘴唇的处理