【layui相关研究第一篇】sample

一，资源及位置

喜欢栅格系统布局的童鞋可以看这篇文章了。

1，你可以从下面位置下载到layerUI最新版本

https://github.com/sentsin/layui

2，你可以从下面位置获得layerUI的官网

https://www.layui.com/demo/grid.html

2.1，就个人而言，最让人接受的就是他们的栅格系统了，比如

二，删格系统

1，好了现在开始进入主题。所谓的删格系统就是把页面均分为12等份，然后按份数占有宽度

如截图所示 

<div class="layui-col-xs6">
      <div class="grid-demo grid-demo-bg1">6/12</div>
    </div>

表示占有6个格子，也就是一半的页面宽度

更多属性

2，那么问题来了，如果我们需要非整数的格子布局，怎么办

2.1解决方案是嵌套

<div class="layui-col-lg3">
    	<!-- 左边面板第一个文字标题:黄色时间 -->
		<div class="layui-row grid-demo layui-col-space10" style="height: 55px">
			<div class="layui-col-lg9 ">
				<span style="font-size:27px;color:#ff6666">12:00:00</span>
			</div>
      	 </div>
    </div>

在三个格子里去十个格子然后再取九个

三，padding和margin

padding和margin都能调整面板的表现形式

1，定义

margin：层的边框以外留的空白
background-color：背景颜色
background-image：背景图片
padding：层的边框到层的内容之间的空白 
border：边框 
content：内容

2，图解 

解释：以border为界，border以内为padding，border以外为margin 

3，

margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。

四，总结

利用好栅格系统与border设置是个好方法