html盒子全部蓝色,彻底弄懂CSS盒子模式之四

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

运行代码框

给包含块一个高度

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

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

运行代码框

放置绝对定位对像到可视区外会出现滚动条
这是右边对象原来所在的位置,即没有被赋予定位属性前的位置

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

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

运行代码框

放置相对定位对像到可视区外不会出现滚动条
虚线框是右边盒子原来的位置,即用了相对定位后,把对象重新定位到了右边,但对象的位置其实还在这里,或者说对象实际上并没有越出浏览器可视区域,所以不会出现滚动条。

我说过相对定位的的盒子原有位置是不会被占用的,但我为什么可以在这里写说明呢,这是因为我用了绝对定位,我只是为了方便说明才这样做的,请不要误解了。

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

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

运行代码框

定位的特殊值情况

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

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

先看最终演示效果,具体教程请继续关注,本人正抽空整理。

运行代码框

相对定位和绝对定位实例--作者:唐国辉

最新单曲

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

5.延伸阅读

出处:蓝色理想

责任编辑:moby

◎进入论坛网页制作、网站综合版块参加讨论

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值