首页 > 其他 > 详细

栅格系统原理

时间:2017-05-30 18:53:07      阅读:265      评论:0      收藏:0      [点我收藏+]

先看代码

html:

<div>
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

 

css:

ul,li{padding:0;margin:0;list-style: none;}
*{box-sizing:border-box;-moz-box-sizing:border-box;}/*css3宽度包含padding*/
div{margin:0 auto;width:1000px;}
ul{background-color: pink;overflow:hidden;}
li{padding:0 15px;width:25%;height:100px;float:left;background:rgba(100,100,100,.5);position: relative;}

 

css3中的的box-sizing:border-box将边宽border和padding都计入里25%的宽度内,

Internet Explorer、Opera 以及 Chrome 支持 box-sizing 属性。

Firefox 支持替代的 -moz-box-sizing 属性。w3c解释

 

显示的效果图如下所示:

灰色代表div,红色框区域代表ul,黄色代表li ,蓝色代表li中的内容,

技术分享

技术分享

 

 

为了让li中内容能在左右置顶,css如下设置:橙色表示添加的样式

ul,li{padding:0;margin:0;list-style: none;}
*{box-sizing:border-box;}/*css3宽度包含padding*/
div{margin:0 auto; padding-right: 15px;padding-left: 15px;width:1000px;}
ul{margin-right: -15px;margin-left: -15px;background-color: pink;overflow:hidden;}
li{padding:0 15px;width:25%;height:100px;float:left;background:rgba(100,100,100,.5);position: relative;}

效果如下所示:红色表示内容可视区域

技术分享

栅格系统原理

原文:http://www.cnblogs.com/sgzg/p/6921023.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!