谈谈自己平时使用的页面布局方法

position相对布局

这种布局一般使用在一个元素相对于父元素的定位，如右下角，中间等。首先把父元素，即布局元素要参考的元素设置position为relative，然后自身设置absolute，这样就可以达到相对布局的效果了。这里会有一种特殊情况，即需要定位在中间，即元素是垂直且水平居中，首先设置定位元素top: 50%; right: 50%; 这时元素并不是被定位在参考元素的中间，这时要把需要定位的元素设置宽高，然后margin-left: 宽度一半;margin-top:高度一半;这样就能达到定位在中间的效果了。具体看下面代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .wrap {
      border: 1px solid #aaaaaa;
      background-color: #eeeeee;
      width: 300px;
      height: 300px;
      position: relative;
    }
    .k1 {
      position: absolute;
      bottom: 0;
      right: 0;
    }
    .k2 {
      position: absolute;
      width: 20px;
      height: 20px;
      left: 50%;
      top: 50%;
      margin-left: -10px;
      margin-top: -10px;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="k1">1</div>
    <div class="k2">2</div>
  </div>
</body>
</html>

inline-block大法

inline-block可以使行内元素，如a，span，i等，可以设置宽高，也可以使div在同一行排列起来。缺点是元素间会有间隔，可以在父元素上设置

font-size: 0;
-webkit-text-size-adjust:none;

来消除这个间隔。

vertical-align: middle

这个样式我主要是使用在把图片与文字居中显示。如果我们要把img与span里的文字居中显示。只需要把img与span设置

display: inline-block;
vertical-align: middle;

checkbox与文字居中也可以用这种方式来实现。

兼容到ie8及以上的页面布局

最近需要做兼容到ie8及以上的页面，而且没有使用UI框架，全是需要自己用css来构建。通过参考一些大的门户网站（因为这些网站面向所有群体，所以兼容肯定做得不赖，虽然有些比较丑），发现了以下的布局方法。
接下来通过代码来演示

具体实现代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .wrap {
      width: 610px;
    }
    .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }
    .f-l {
      float: left;
    }
    .item {
      border: 1px solid #aaaaaa;
      background-color: #eeeeee;
      width: 200px;
      height: 200px;
      line-height: 200px;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="clearfix wrap">
    <div class="item f-l">块1</div>
    <div class="item f-l">块2</div>
    <div class="item f-l" style="height: 300px">块3</div>
    <div class="item f-l"  style="height: 300px">块4</div>
    <div class="item f-l">块5</div>
  </div>
</body>
</html>

效果图如下：
布局效果图

表格布局

模拟表格的方式来对元素进行布局排列。因为表格的样式更符合布局的习惯，或者说更符合一些设计的需求。但因为表格元素有特定的语义，所以不建议直接使用表格元素布局，但display可以让我们满足表格形式的布局。具体看代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>
    .wrap {
      width: 610px;
      display: table;
    }
    .row {
      display: table-row;
    }
    .item {
      border: 1px solid #aaaaaa;
      background-color: #eeeeee;
      width: 200px;
      height: 200px;
      line-height: 200px;
      text-align: center;
      display: table-cell;
    }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="row">
      <div class="item f-l">块1</div>
      <div class="item f-l">块2</div>
      <div class="item f-l">块3</div>
    </div>
  </div>
</body>
</html>

注：这种布局的特点时，在设置元素宽高的时候，可以不包括border。这也使得有时候更方便计算。

页面布局资源

CSS居中完整指南
 六种实现元素水平居中
 去除inline-block元素间间距的N种方法
 CSS3圆角圆边支持IE6-IE8浏览器