`
qinya06
  • 浏览: 597555 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

笔记1

    博客分类：
  • html
 
阅读更多
------------------------------------------ 
<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%;到达预定位置。好了，布局结束。
分享到：
| SSI SERCURITY 框架
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics