CSS基础布局

两列式布局

根据示意图可以将页面结构以如下形式编写HTML骨架代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两列式页面布局</title>
</head>
<body>
<div id="header">头部信息</div>
<div id="container">
    <div class="mainBox">主要内容区域</div>
    <div class="sideBox">侧边栏</div>
</div>
<div id="footer">底部信息</div>
</body>
</html>

根据内容可分为

两列定宽布局
两列定宽布局主要是指将mainBox及sideBox这两个div标签的宽度值固定，再将其控制在页面内容区域中的左右两侧。将mainBox的宽度设为750px，高度设为900px；sideBox的宽度设为200px，高度设为600px；将其父元素id名为container的容器样式设为高度900px，宽度960px，上下外边距为10px。代码如下

<style type="text/css">
   *{
       margin: 0;
       padding: 0;
     }
   #header,#footer{
       width: 100%;
       height: 100px;
       background: #ccc;
     }
   #container{
       width: 960px;
       height: 900px;
       margin: 10px auto;/**左右设为auto，是为了让container在页面内居中**/
     }
   .mainBox{
       float: left;
       width: 750px;
       height: 900px;
       color: #000;
       background: #faf;
     }
   .sideBox{
       float: right;
       width: 200px;
       height: 600px;
       color: #000;
       background: #3f0;
     }
   #container:after{        /**清除浮动**/
           display: block;
           visibility: hidden;
           content: "";
           clear: both;
       }
</style>

两列自适应布局
两列自适应布局方式其实就是将宽度属性以百分比的形式计算，但该宽度并不是盒模型的总宽度，而是盒模型的内容区域的宽度。代码如下

<style type="text/css">
  *{
      margin: 0;
      padding: 0;
    }
  #header,#footer{
      width: 100%;
      height: 100px;
      background: #ccc;
    }
  #container{
      margin: 10px auto;/**左右设为auto，是为了让container在页面内居中**/
    }
  .mainBox{
      float: left;
      width: 70%;
      height: 900px;
      color: #000;
      background: #faf;
    }
  .sideBox{
      float: right;
      width: 29%;
      height: 600px;
      color: #000;
      background: #3f0;
    }
  #container:after{        /**清除浮动**/
          display: block;
          visibility: hidden;
          content: "";
          clear: both;
      }
</style>

单列布局

基本代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单列页面布局</title>
</head>
<body>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</body>
</html>

CSS代码实现

.header{
   margin:0 auto; 
   max-width: 960px;
   height:100px;
   background-color: blue;
}
.content{
   margin: 0 auto;
   max-width: 960px;
   height: 400px;
   background-color: aquamarine;
}
.footer{
   margin: 0 auto;
   max-width: 960px;
   height: 100px;
   background-color: aqua;
}

三栏布局

圣杯布局
HTML骨架

<article class="container">
  <div class="center">
    <h2>圣杯布局</h2>
  </div>
  <div class="left"></div>
  <div class="right"></div>
</article>

CSS样式

.container {
  padding-left: 220px;//为左右栏腾出空间
  padding-right: 220px;
}
.left {
  float: left;
  width: 200px;
  height: 400px;
  background: red;
  margin-left: -100%;
  position: relative;
  left: -220px;
}
.center {
  float: left;
  width: 100%;
  height: 500px;
  background: yellow;
}
.right {
  float: left;
  width: 200px;
  height: 400px;
  background: blue;
  margin-left: -200px;
  position: relative;
  right: -220px;
}

缺点：

center部分的最小宽度不能小于left部分的宽度，否则会left部分掉到下一行
如果其中一列内容高度拉长，其他两列的背景并不会自动填充。(借助等高布局正padding+负margin可解决)

双飞翼布局
HTML骨架

<article class="container">
    <div class="center">
        <div class="inner">双飞翼布局</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</article>

CSS样式

    .container {
        min-width: 600px;//确保中间内容可以显示出来，两倍left宽+right宽
    }
    .left {
        float: left;
        width: 200px;
        height: 400px;
        background: red;
        margin-left: -100%;
    }
    .center {
        float: left;
        width: 100%;
        height: 500px;
        background: yellow;
    }
    .center .inner {
        margin: 0 200px; //新增部分
    }
    .right {
        float: left;
        width: 200px;
        height: 400px;
        background: blue;
        margin-left: -200px;
    }

缺点：多加一层 dom 树节点，增加渲染树生成的计算量。

两列自适应宽度

两列自适应布局是指一列由内容撑开，另一列撑满剩余宽度的布局方式

float+overflow:hidden

<div class="parent" style="background-color: lightgrey;">
   <div class="left" style="background-color: lightblue;">
       <p>left</p>
   </div>
   <div class="right"  style="background-color: lightgreen;">
       <p>right</p>
       <p>right</p>
   </div>        
</div>

.parent {
 overflow: hidden;
 zoom: 1;
}
.left {
 float: left;
 margin-right: 20px;
}
.right {
 overflow: hidden;
 zoom: 1;
}

Flex布局

//html部分同上
.parent {
  display:flex;
}  
.right {
  margin-left:20px; 
  flex:1;
}

参考文章
几种常见的CSS布局 ---思否
CSS基础之几种常见的页面布局 ---51CTO

CSS布局学习笔记

CSS基础布局

两列式布局

单列布局

三栏布局

两列自适应宽度