css布局

一、单列布局

常见单列布局分为：

• header、content和footer等宽的单列布局；
• header、footer等宽，content略窄的单列布局。

实现方式

1. 先将header、content、footer统一设置width: 960px;或者max-width: 960px。然后设置margin: auto;实现居中

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

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

2. header、footer的内容宽度不设置，块级元素充满整个屏幕，header、content和footer的内容区域设置同一个width，通过margin: auto;居中。

<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;
}

二、两列自适应布局

实现方式

1. float+margin

普通的两列布局可采用左侧左浮动，右侧设置margin-left

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

.left{
  width:200px;
  height:100px;
  background:#abcdef;
  float:left;
}
.main{
  height:100px;
  background:#777;
  margin-left:200px;
}

利用浮动和负外边距进行固定右边自适应布局

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

.left{
  width:200px;   
  height:100px;
  background:#abcdef;
  float:left;
  margin-right:- 200px;  /*如果不设置负右外边距，.warp会被挤到下一行；设置多大呢？绝对值大于等于左边栏目宽度即可*/
}
.wrap{
  width:100%;
  height:100px;
  background:#777;
}
.main{
  margin-left:200px;   /*等于左边栏的宽度*/
  background:orange;
  height:100px;
}

2. float+overflow:hiddle

自适应的两列布局可采用此种方式，这种办法主要通过overflow触发BFC,而BFC不会重叠浮动元素。由于设置overflow:hidden并不会触发IE6-浏览器的haslayout属性，所以需要设置zoom:1来兼容IE6-浏览器。

<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;
}

左中右布局

1. 浮动+margin

左栏左浮动，右栏右浮动，主体放在最后。
注意：主体main标签放在最后，左右随意

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

html,body{
  margin:0; 
  height:100%;
}
#main{
  height:100%; 
  margin:0 210px; 
  background: blue;
}
#left,#right{
  width:200px; 
  height:100%;
  background: green;
}
#left{
  float:left;
}
#right{
  float:right;
}

2. 绝对定位+margin

左右两栏采用绝对定位，分别固定于页面的左右两侧，中间的主体栏用左右margin值撑开距离。于是实现了三栏自适应布局。div顺序没有要求。

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

html,body{
margin:0; 
height:100%;
}
#left,#right{
position:absolute; 
top:0;
width:200px;
height:100%;
}
#left{
left:0; 
background:#a0b3d6;
}
#right{
right:0; 
background:#a0b3d6;
}
#main{
margin:0 210px; 
background:#ffe6b8; 
height:100%;
}

在用绝对定位时，通常会在其父元素使用相对定位，即position:absolute和position:relative是成对出现的，两者相辅相成。

3. flex布局

父元素设置display: flex; 子元素会默认排成一行，通过设置其他属性改变布局方式

.father{
  display: flex;
  justify-content:space-between;
}

来源网络

【未完待续......】