css栅格布局原理
1、Reset.css–样式重置
Reset.css的定义：
The foundational CSS Reset removes the inconsistent styling of HTML elements provided by browsers. This creates a dependably flat foundation to built upon. With CSS Reset loaded, write explicit CSS your project needs.
基本的CSS重置消除了由浏览器提供的HTML元素不一致的情况。这将创建一个可靠地建立在单位的基础。使用CSS重置加载，按项目需要书写明确的CSS。
2、Grid.css–栅格
栅格设计是设计者所应具备的一项基本能力。对比例，留白以及结构的理解把握，在为任何发行平台构建栅格时都起着至关重要的作用，无论是web，印刷，还是拟真3D环境中。
【栅格布局的页面】
（栅格原型）
【栅格计算公式】
【Grid命名标准】
Grid按照(40xN)-10公式的栅格布局，#doc的宽度为950px，#doc-w的宽度为100%，N=24 使用1280的分辨率来校准栅格
命名：grid-*中'r'和'l'分别代表最窄栏（即190px宽的栏）所处的位置，c代表（custom），将宽度放出自定义设置，其中的'r'和'l'代表边栏的位置在左或右。
【双飞翼布局】
1 <div class="doc">
2 //三栏布局
3 <div class="grid-3 clearfix">
4 <div class="g-main">
5 <div class="g-wrap">主要内容</div>
6 </div>
7 <div class="g-aside"></div>
8 <div class="g-side"></div>
9 </div>
10 //两栏布局
11 <div class="grid-2 clearfix">
12 <div class="g-main">
13 <div class="g-wrap">主要内容</div>
14 </div>
15 <div class="g-aside"></div>
16 </div>
17 //两栏布局
18 <div class="grid-m0s8">
19 <div class="col-main">
20 <div class="main-wrap">主要内容</div>
21 </div>
22 <div class="col-sub"></div>
23 </div>
24 </div>
25
【双飞翼布局CSS】
1 .doc{width:950px;margin:0 auto}
2 .grid-3,.grid-2{margin-bottom:10px;}
3 .g-main{width:100%;background:#c0c0c0;margin-right:-100%;float:left}
4 .g-wrap{margin-left:200px;margin-right:280px;background:#DCDCDC;height:100px;}
5 .g-aside{float:left;width:190px;height:100px;background:#DCDCDC}
6 .g-side{float:right;width:270px;height:100px;background:#DCDCDC}
7 .grid-2 .g-wrap{margin-right:0px}
8 .grid-m0s8{margin-bottom:10px}
9 .grid-m0s8 .col-main{width:100%;float:left;height:100px;background:#ccc}
10 .grid-m0s8 .col-sub{width:310px;margin-left:-310px;float:right;height:100px;background:#dcdcdc}
11 .grid-m0s8 .main-wrap{margin-right:320px;background:#dcdcdc;height:100px}
12 .clearfix{display:inline-block}
13 .clearfix:after {content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{display:inline-block}/* Hides from IE-mac \*/* html .clearfix {height:1%}.clearfix {display:block}/* End hide from IE-mac */
【最终浏览效果】
【事例下载】css栅格布局事例.rar
