YUI3的css栅格系统解析

最新推荐文章于 2020-11-12 10:57:39 发布

smkuangren

最新推荐文章于 2020-11-12 10:57:39 发布

阅读量843

点赞数

文章标签： yui css class div float ie

一、YUI3的css栅格系统与浮动布局的比较

css的布局方案不胜枚举，主流的有以下几种：浮动布局、负外边距布局、绝对/相对定位布局法、表格布局法，而浮动布局是目前应用最广的，但总所周知，浮动布局固然简单，也多了个清理浮动的过程，而且在各浏览器下的表现是存在差异的（IE6存在怪异bug），经常会出现容器溢出的情况,宽度自适应太差等问题，始终困扰着前端人员。

你看完这篇文章，可以彻底的抛弃浮动布局！感受一种更为稳定的布局系统，来自YUI的css grid！

以经典的三列布局（总宽度是经典的960px）为例

浮动布局方式：

sub

main

extra

html代码：

  <div class="w960 center clearfix">
  	   <div class="sub">
       		<div class="content">sub</div>
       </div>
  	   <div class="main">
       	    <div class="content">main</div>
       </div>
  	   <div class="extra">
       		<div class="content">extra</div>
       </div>                
  </div>

css代码：

.sub{
	float:left;
	width:25%;
}
.main{
	float:left;
	width:50%;
}
.extra{
	float:left;
	width:25%;
}
.content{
	background-color:#09F;
	border:1px solid #06F;
	padding:20px;
	margin-right:10px;
}
*-----清理浮动---*/
.clearfix:after{
content:"."; display:block; height:0; clear:both;
visibility:hidden;
}
*html .clearfix{
 height:1%;
}
*+html .clearfix{
 height:1%;
}

浮动的布局的关键是清理浮动部分

YUI的css grid布局方式：

sub

main

extra

html代码：

 <div class="yui3-g w960 center">
        <div class="yui3-u-1-4">
            <div class="content">sub</div>
        </div>
        <div class="yui3-u-1-2">
            <div class="content">main</div>
        </div>        
        <div class="yui3-u-1-4">
            <div class="content">extra</div>
    </div>
  </div>

css代码：

.yui3-g {
    letter-spacing: -0.31em; /* webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    word-spacing: -0.43em; /* IE < 8 && gecko: collapse white-space between units */
}
.yui3-u-1-2,.yui3-u-1-4{
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8: fake inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}
.yui3-u-1-4{
	width:25%;
}
.yui3-u-1-2{
	width:50%;
}

二、YUI3的css栅格系统的原理

YUI3的css栅格系统的核心是 display: inline-block;的使用，inline-block这个属性用的不多，主要是由于IE6、IE7不支持（通过hack修正：zoom: 1; *display: inline;），实际上inline-block在布局上非常好用，inline-block结合了内联模型和块状模型的优点，即可设置宽度、高度、边距、外边距的内联元素。关于inline-block，圆心有一篇颇为详细的介绍文章，请猛击《display:inline-block的深入理解》。