ui篇-浅谈栅格化布局(及实现)

html-css030

ui篇-浅谈栅格化布局(及实现),第1张

用过Bootsrtap或者element-ui等ui框架都知道,每个ui框架里面 基本上都会自带有栅格化布局,

本文也会进行一个简单的栅格化布局的实现( 采用float方案 ), 希望对你们有所帮助

效果预览

1, html 中

嵌套结构, 外层为row, 里层为column

2, css 中

2.1 row行设置, 防止float: left带来的溢出

清除浮动, 并设置盒子模型为ie盒子模型, 这样row部分就设置好了

2.2 column 列设置 我这里是使用了24格的栅格化布局,

设置 float: left并定义初始宽度, 这里采用的是24格,所以一个的宽度是  24/100 = 1/x , 计算得出 x = 0.24  width: 4.166666666666667%

如果采用了scss或者其他css预编译器 就可使用里面的算术运算符进行计算了, 

下面就算定义每一个column具体类目的宽度了

这样简单的栅格化布局其实已经好了, 那如何实现pc切换到移动端时候,响应式自动换行及变换宽高呢呢? 

2.3 使用媒体查询, 当最大宽度大于800的时候, 我的列的类目,就呈现两倍放大

这样一个响应式的栅格化布局就写好了, 

1.css3常用的布局有多栏布局、多列布局、弹性布局、流式布局、瀑布流布局和响应式布局。

2.float浮动布局,absolute绝对定位,flex弹性盒子,table表格布局,grid网格布局 / 栅格化布局

3.移动端布局:流式布局(百分比布局)JD,flex弹性布局(强烈推荐)携程,less+rem+媒体查询布局 苏宁,

css设计模式

OOCSS——Object Oriented CSS

SMACSS——Scalable and Modular Architecture for CSS

垂直水平均分:

子元素纵向等距排列:

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

IE盒子模型width=width(margin+padding) 解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

其实分多少都行,看你的实际布局需求。但是常见的比较合理的是分12栏。

栅格系统的原理

假设:Flowline的宽度为W,column的宽度为c,Gutter的宽度为g,Margin的宽度为m,栅格列数为N

W = c*N + g*(N-1) + 2m;g的宽度通常为m的两倍,所以:

W = (c+g) * N;把c+g记为C,得:

W = C * N

大部分的栅格系统都是此公式的变体。