彻底弄懂CSS盒子模式之四

[ 来源：不详 | 作者：webflash | 时间：2007-9-11 下午 10:47:42 | 浏览：统计中... ]

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的高度会怎么样呢？自己测试一下吧。

（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 全部选择提示：你可先修改部分代码，再按运行]

（9）放置相对定位对像到可视区外不会出现滚动条。此现象很好理解，因为相对定位对象原来位置没有变，原来位置没有出去滚动条就不会出现。在下面实例中，如果你缩小浏览器窗口，相对定位的对象还会出现完全消失的情况呢。

运行代码框
<!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">虚线框是右边盒子原来的位置，即用了相对定位后，把对象重新定位到了右边，但对象的位置其实还在这里，或者说对象实际上并没有越出浏览器可视区域，所以不会出现滚动条。<br />我说过相对定位的的盒子原有位置是不会被占用的，但我为什么可以在这里写说明呢，这是因为我用了绝对定位，我只是为了方便说明才这样做的，请不要误解了。</div><div class="box"></div></body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

（10）定位的特殊值情况。如果定位设置是这样的：position:relative ，right:200px， left:10px会出现什么情况呢？一边叫对象向右偏移10px，另一边又叫对象向左偏移200px，到底是听那边的呢，还是那个先，那个后呢。针对这种矛盾情况，CSS规定只听左边的left，而右边怎么设置都被重定为-left,即-left =right。上下值top与bottom矛盾的话，就以top为准，所以在下面的实例中，你如何改变right的值，对象位置不会发生改变的。

运行代码框
<!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></body></html>
[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

4．综合实例见证定位的魅力

先

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

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

下一篇：彻底弄懂CSS盒子模式之三

>> 相关文章

	评论内容只代表网友观点，与本站立场无关！查看完整内容
	我来评两句用户名称评分验证码最多500字。当前字数：0