CSS经典布局实例演示之单行单列

最近一直在钻研CSS，并受Owen Briggs启发，决定将自己这段时间CSS学习心得记录下来，请单击图标查看demo。（本系列文章排版暂只兼容标准浏览器，请使用Chrome,Firefox等浏览）

1、固定宽度，使用float浮在左上角

#content {
    float: left;
    display:inline;/*消除IE6双倍边距*/
    margin:20px;
}

2、固定宽度，使用绝对(absolute)定位，固定在左上角

#content {
    position: absolute;
    top: 20px;
    left: 20px;
}

3、不固定宽度，采用百分比(%)定义宽度来自适应页面，固定在左上角

#content {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 20px;
    width: 74%;
}

4、固定宽度，采用在body样式中定义居中属性(text-align: center;)实现适应页面自动居中

#content {
    width: 600px;
    margin:20px auto;
}

点评：单行单列在实际项目中并不常见，第4种居中经常与其它布局方式共存在实际项目中。关于居中，通常有三种方法来实现，一是本例中用到的text-align: center;第二种方法定义当前容器的width属性，然后配合margin:20px auto;来实现，第三种方法可以先定义容器宽度如width:720px;接着用position:relative;left:50%;使容器左边缘居中，然后给容器加负边距margin-left:-360px;使整个容器居中。几种方法可以根据实际情况需要和浏览器的兼容情况选择使用。