CSS 一行一列

水平布局

这是一行一列的常见效果，主要用于页面的header,中间，底部三个区域，这三个区域，常见的效果又分为两种。

• 第一种：header, content, footer 宽度相同，有一个 max-width;
• 第一种：header 和 footer 宽度占满浏览器，content 有一个 max-width;

常用的操作

下面的操作是常见的操作方法；

第一种：上中下宽度相同，有最大宽度

<style>
    .content {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
</style>
<header>
    <div class="content" style="background-color: red;">
        Header
    </div>
</header>
<main>
    <div class="content" style="background-color: green;">
        Main
    </div>
</main>
<footer>
    <div class="content" style="background-color: yellow;">
        Footer
    </div>
</footer>

第二种：上下宽度 100%，中间有最大宽度

<style>
    .content {
        max-width: 1200px;
        margin-left: auto;
        margin-right: auto;
    }
</style>
<header>
    <div style="background-color: red;">
        Header
    </div>
</header>
<main>
    <div class="content" style="background-color: green;">
        Main
    </div>
</main>
<footer>
    <div style="background-color: yellow;">
        Footer
    </div>
</footer>

上面两种方法的 BUG

小伙伴如果跟着敲代码，亲自查看效果，会发现，上面的代码并不能让header 和 footer 宽度占满浏览器，这是因为浏览器会给页面默认的效果，比如margin padding，我们需要对代码进行改造一下，添加下面的代码。

<style>
    body {
        margin: 0px;
        padding: 0px;
    }
</style>

实际工作中我们为了让页面在不同浏览器上都保持相同的效果，会引入专门的reset相关代码，让不同的元素在浏览器上都默认显示的一样，这种效果类似做实验的归零操作，是一种非常实用的多浏览器兼容处理。

flex 布局

可以自己练习下

网格布局

可以自己练习下

  <div class="body">
    <div class="header"></div>
    <div class="section">
      <div class="left"></div>
      <div class="right"></div>
    </div>
    <div class="footer"></div>
  </div>

垂直布局

垂直常见的布局，是顶部和底部定高，中间自适应（剩余的部分能够根据浏览器的大小自适应其高度）。

在现在浏览器中（包括 IE7+，Chrome，Firefox 等等），高度自适应可以利用绝对定位来解决。

当一个元素的定位属性是 absolute 时，它将摆脱默认的文档流，其大小默认是元素内容的大小，除非手动给其设置宽高。此时我们亦可通过设置其位置属性（top，right，bottom，left）来间接改变元素的宽高。

position 定位

整个父元素相对定位，导航高固定，内容区域绝对定位，通过定位属性实现高度自适应。

html,body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.body{
  position: relative;
  height: 100%;
}
.header{
  height: 80px;
  background-color: #ccc;
}
.section{
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 80px;
  background-color: #f8f8f9;
}
.footer{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background-color: #ccc;
}

垂直两项

当然，这也可以两个元素操作

示例代码如下，

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

body,div {
    margin: 0;
    padding: 0;
}
.top {
    background-color: #00d;
    height: 100px;
}
.main {
    background-color: pink;
    position: absolute;
    top: 100px;
    bottom: 0;
    left: 0;
    right: 0;
}

flex 弹性布局

利用 flex flex-direction：column属性，使元素自上往下排列，

flex:1 占据除规定元素外的所有位置

html,body{
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.body{
  height: 100%;
  background-color: #808695;
  display: flex;
  /*设置排列顺序*/
  flex-direction: column;
}
.header{
  height: 80px;
  background-color: #ccc;
}
.section{
  flex: 1;
  background-color: #f8f8f9;
}
.footer{
  height: 80px;
  background-color: #dcdee2;
}

混合布局

最后来个前面的大综合。

<div class="head">head</div>
  <div class="main">
    <div class="left">left</div>
    <div class="middle">middle</div>
    <div class="right">right</div>
  </div>
<div class="footer">footer</div>

body{
  text-align: center;
  font-size: 2em;
  margin: 0;
  padding: 0
}
.head,.main,.footer{
  width: 80%; margin:0 auto;
  }
.head{
  background-color: #ccc; height: 100px
  }
.footer{
  background-color: #9cc; height: 100px
  }
.main{
  position: relative;
}
.left{
  width: 20%;
  height: 900px;
  background-color: #eee;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
.middle{
  height: 900px;
  background-color: #fcc;
  margin: 0 20%;
  overflow: hidden;
}
.right{
  width: 20%;
  height: 900px;
  background-color: #eee;
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
}