笔记1

------------------------------------------
<style type="text/css">
*{margin:0;padding:0;}
.wrap div{float:left;height:400px;}
.wrap {overflow:hidden;_zoom:1;}
.content{width:60%;background:gray;}
.nav{width:20%;background:orange;margin-left:-20%;}
.infor{width:19%;background:green;}
</style>
<body>
<div class="wrap">
<div class="content">aaaaa</div>
<div class="nav">bbbbb</div>
<div class="infor">ccccc</div>
</div>
</body>

----------------------------------------
从结构可以看出一个大的父包含框里有三个液态子块,css样式将这些子块向左浮动。在给出计算方法之前,我们需要做一个实验,给导航nav增添一个属性margin-left:20%;这时,我们通过浏览器的显示结果可以知道c模块也就是infor被挤到了下一行显示。再做个对比实验。在原始代码中,把c模块向左移动19%,也就是在infor中添加margin-left:-19%;的属性,浏览器这时会显示c模块覆盖在了b上,但是b和a的位置都没有发生移动。
以上的解释,我们来实现一个bac的布局。我们需要花费很小的移动代价,以尽量少地影响其它模块的位置为前提来布局。我们需要让a模块为b预留相应的宽度位置,b的宽度为20%,所以我们给a增添margin-left:20%;的属性(在本文头部给出的原始未改动的代码中添加)。根据我们实验的结论可知,正边距会使得b和c模块相应的移动,也就是被挤离原来的位置20%,这时b模块要移动到最左边,需要超越a的60%宽度,并加上自己被挤走的20%,使用负边距属性margin-left:-80%;到达预定位置。好了,布局结束。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值