CSS的单列布局与二&三列布局

这里介绍CSS常用的单列布局与二&三列布局，作为记录，希望自己的基本功能够更扎实。

单列布局

常见的单列布局有两种：

• header,content和footer等宽的单列布局
• header与footer等宽,content略窄的单列布局

对于前者：
通过对header,content,footer统一设置width（max-width）即可得到。

<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>

.header{
    margin:0 auto; //margin的作用是居中
    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;
}

效果图：

对于后者：
需要将header和footer的宽度一起设置，然后将content和header/footer的内容（如导航栏）一起设置。

<div class="header">
    <div class="nav"></div>
</div>
<div class="content"></div>
<div class="footer"></div>

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

效果图：

二&三列布局

二列布局与三列布局的原理相同，将三列布局减少一个侧边栏即可得到二列布局。

利用float和margin得到三列布局

原理：将两个侧边栏分别向左向右浮动，通过设置中间的主栏的margin为它们留出空间，形成三列布局。

<!--注意最后写不浮动的main，不然浮动元素会到其下面 -->
  <div class="left"></div>
  <div class="right"></div>
  <div class="main"></div>

.left{
    float: left;
    width: 200px;
    height:400px;
    background-color: blue;
}
.right{
    float: right;
    width: 200px;
    height: 400px;
    background-color: darkgray;
}
.main{
    margin-left: 220px;
    margin-right: 220px;
    height: 400px;
    background-color: aquamarine;
}

效果图：

注意：只设置一个浮动即可得到两列布局。

利用position和margin进行三列布局

原理：通过将两个侧边栏的position设置为absolute，然后将左边栏的left设置为0，右边栏的right设置为0，主栏设置margin为边栏留出空间，即可得到三列布局。

 <div class="left"></div>
 <div class="right"></div>
 <div class="main"></div>

.left{
    position: absolute;
    left: 0;
    width: 200px;
    height:400px;
    background-color: blue;
}
.right{
    position: absolute;
    right: 0;
    width: 200px;
    height: 400px;
    background-color: darkgray;
}
.main{
    margin-left: 220px;
    margin-right: 220px;
    height: 400px;
    background-color: aquamarine;
}

效果图：

同样，将定位元素改为一个可以得到两列布局。

还有几种常用的布局，如圣杯布局，双飞翼布局以及有效的flexbox，将在其它文章中记录。