札记1
笔记1------------------------------------------style typetext/css*{margin:0padding:0}.wrap d
笔记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%;到达预定位置。好了，布局结束。
