css 栅格化 分多少栏合适

html-css020

css 栅格化 分多少栏合适,第1张

其实分多少都行，看你的实际布局需求。但是常见的比较合理的是分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

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

两种方法：

一种是左浮动：{float:left}

Float常跟属性值left、right、none

Float:none

不使用浮动

Float:left

靠左浮动

Float:right

靠右浮动

float语法：

float

:

none

|

left

|right

参数值：

none

:

　对象不浮动

left

:

　对象浮在左边

right

:

　对象浮在右边

<div

class="divcss5">

<div

class="divcss5_left">布局靠左浮动</div>

<div

class="divcss5_right">布局靠右浮动</div>

<div

class="clear"></div><!--

html注释：清除float产生浮动

-->

</div>

二种内联样式：{display:inline}。

例子：

<html>

<head>

<style

type="text/css">

p

{display:

inline}

div

{display:

none}

</style>

</head>

<body>

<p>本例中的样式表把段落元素设置为内联元素。</p>

<p>而

div

元素不会显示出来！</p>

<div>div

元素的内容不会显示出来！</div>

</body>

</html>

CSS Grid：

这是 CSS 布局实现方式之一。

它可以定义行列宽高什么的，将页面分布成不等大小块。

简单理解请参照 table 标签。

Grid 栅格系统：

它是一种约定式的排版方式。

以规则的网格阵列来指导和规范版面排布以及信息分布。