【div+css】栅格化布局样式备用
【什么叫栅格化布局】
栅格是指用均匀矩阵网格来划分空间，在网页设计中设计师按照栅格划分好的空间规划自己的设计元素，让整个页面结构规范化（以上完全是林氏智造自我点评）
【为什么要使用栅格化】
在团队开始中，在未使用栅格化布局之前，当前端的朋友是否总有几次拿到设计稿有想撞墙的冲动，嘴里总会念到为什么大布局的间距怎么总是不一样，为什么各元素间距有大有小，此模块的宽度到底是多少；
这些问题都是团队没有按照一个特定的规范去执行流程导致，所以我们要把流程规范化尤其出来了个栅格化布局。
【使用栅格化布局有什么好处】
由于栅格化布局是把空间划分均匀的网格，设计师按照网格的数量可以把自己的页面布局划分为精准的等分，前端可以通过查看栅格化情况清楚了解相关间距和宽度，还可以通过栅格化图预先设计好通用的布局样式。
【什么时候使用栅格化布局】
既然栅格化布局有以上好处，那什么时候使用？这个要看整个团队的看法和公司的开发流程；不是说好东西各个都会用，这个要看整个 团队的接受能力。
【自己整理的栅格化布局样式】
950栅格化布局
/* * 950栅格布局 * 栅格数：24 * 栅格宽度:40px(内容宽+间距) * 间距：10px * 总宽度:24*40-10=950 */ .grid950{width:950px;margin:0 auto;} .grid950 .grid{float:left;display:inline;} .grid950 .grid_row:before,.grid950 .grid_row:after{display:table;line-height:0;content:"";} .grid950 .grid_row:after{clear:both;} .grid950 .grid_1{width:30px;} .grid950 .grid_2{width:70px;} .grid950 .grid_3{width:110px;} .grid950 .grid_4{width:150px;} .grid950 .grid_5{width:190px;} .grid950 .grid_6{width:230px;} .grid950 .grid_7{width:270px;} .grid950 .grid_8{width:310px;} .grid950 .grid_9{width:350px;} .grid950 .grid_10{width:390px;} .grid950 .grid_11{width:430px;} .grid950 .grid_12{width:470px;} .grid950 .grid_13{width:510px;} .grid950 .grid_14{width:550px;} .grid950 .grid_15{width:590px;} .grid950 .grid_16{width:630px;} .grid950 .grid_17{width:670px;} .grid950 .