网格布局技巧

类的组合VS子选择器

类的组合

<style type="text/CSS">
.fl{float:left}
.fr{float:right}
.content{clear:both}
.header{}
.footer{clear:both}
.sidebar{}
.main{}
.w25{width:25%}
.w70{width:70%}
.w35{width:35%}
.w60{width:60%}
</style>
<div class=”header”></div>
<div class=”content”>
<div class=”main fl w70”></div>
<div class=”sidebar fr w25”></div>
</div>
<div class=”content”>
<div class=”main fr w60”></div>
<div class=”sidebar fl w35”></div>
</div>
<div class=”footer”></div>

子选择器

<style type="text/CSS">
.content{clear:both}
.header{}
.footer{clear:both}
.main{}
.sidebar{}
.content-lr-7025 .main{float:left; width:70%}
.content-lr-7025 .sidebar{float:right; width:25%}
.content-rl-7025 .main{float:right; width:70%}
.content-rl-7025 .sidebar{float:left; width:25%}
.content-lr-6035 .main{float:left; width:60%}
.content-lr-6035 .sidebar{float:right; width:35%}
.content-rl-6035 .main{float:right; width:60%}
.content-rl-6035 .sidebar{float:left; width:35%}
</style>
<div class=”header”></div>
<div class=”content content-lr-7025”>
<div class=”main”></div>
<div class=”sidebar”></div>
</div>
<div class=”content content-rl-6035”>
<div class=”main”></div>
<div class=”sidebar”></div>
</div>
<div class=”footer”></div>

 扩展比较

  类的组合

<style type="text/CSS">
.fl{float:left}
.fr{float:right}
.content{clear:both}
.header{}
.footer{clear:both}
.sidebar{}
.main{}
.w25{width:25%}
.w70{width:70%}
.w35{width:35%}
.w60{width:60%}
.w80{width:80%}
.w15{width:15%}
</style>
<div class=”header”></div>
<div class=”content”>
<div class=”main fl w70”></div>
<div class=”sidebar fr w25”></div>
</div>
<div class=”content”>
<div class=”main fr w60”></div>
<div class=”sidebar fl w35”></div>
</div>
<div class=”content”>
<div class=”main fl w80”></div>
<div class=”sidebar fr w15”></div>
</div>
<div class=”footer”></div>

 子选择器

<style type="text/CSS">
.content{clear:both}
.header{}
.footer{clear:both}
.main{}
.sidebar{}
.content-lr-7025 .main{float:left; width:70%}
.content-lr-7025 .sidebar{float:right; width:25%}
.content-rl-7025 .main{float:right; width:70%}
.content-rl-7025 .sidebar{float:left; width:25%}
.content-lr-6035 .main{float:left; width:60%}
.content-lr-6035 .sidebar{float:right; width:35%}
.content-rl-6035 .main{float:right; width:60%}
.content-rl-6035 .sidebar{float:left; width:35%}
.content-lr-8015 .main{float:left; width:80%}
.content-lr-8015 .sidebar{float:right; width:15%}
.content-rl-8015 .main{float:right; width:80%}
.content-rl-8015 .sidebar{float:left; width:15%}
</style>
<div class=”header”></div>
<div class=”content content-lr-7025”>
<div class=”main”></div>
<div class=”sidebar”></div>
</div>
<div class=”content content-rl-6035”>
<div class=”main”></div>
<div class=”sidebar”></div>
</div>
<div class=”content content-lr-8015”>
<div class=”main”></div>
<div class=”sidebar”></div>
</div>
<div class=”footer”></div>

  小结

 

1.组合类比子选择器更易于扩展，更轻便。

2.子选择器content-xx-xxxx是全站统一管理的，非常稳定。