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

转载于:https://www.cnblogs.com/cheche/archive/2010/09/20/1831263.html