什么是布局

...
现有的样式不能满足人们的需求

• 文档流
• 浮动
• 定位
  人们需要：
• 导航栏+内容
• 导航栏+内容+广告栏
• 从上到下、从左到右、定宽、自适应......

单列布局

单列布局.png

实现方式 定宽+水平居中

width: 1000px; //或 max-width: 1000px;
margin-left: auto;
margin-right: auto;

几种范例 可供参考
布局说明 ：上下+main是自适应 aside 固定宽高
范例代码如下 ：

<style>
   .layout{
     max-width:560px;
     margin:0 auto;
   }
   .header{
     height:50px;
     background:pink;
   }
   .content{
     position:relative;
   }
   .content .aside{
     position:absolute;
     right:0;
     width:100px;
     height:300px;
     background:blue;
   }
   .content .main{
     margin-right:110px;/*设置main的右margin为 aside宽度+10px*/
     background:red;
     height:300px;
   }
   .footer{/*自适应导航栏 不设宽度 那么宽度就是layout设置的总宽度*/
     height:50px;
     background:#ccc;
   }
 </style>


 <div class="layout">
 <div class="header">头部自适应</div>
 <div class="content">
   <div class="aside">旁边（固定宽高）</div>
   <div class="main">内容自适应</div>
 </div>
 <div class="footer">尾部</div>
</div>

效果图如下 ：

单列布局范例.png

下面几种比较简单 记住一点 自适应没有宽度（width）限制 只有高度（height） 或者 自身没有 只有全局设置多宽

<style>

 body{
      /* min-width: 960px; */
    }
    .layout{
      width: 600px;
      margin: 0 auto;
       border: 1px solid; 
    }
    #header{
      height: 60px;
      background: red;
      min-width: 600px;
    }
    #content{
      height: 400px;
      background: blue;
    }
    #footer{
      height: 50px;
      background: yellow;
    }
  
  </style>
 <div id="header">
    <div class="layout">头部</div>
  </div>
  <div id="content" class="layout">内容</div>
  <div id="footer">
    <div class="layout">尾部</div>
  </div>

我疑惑地地方 尾部 footer 应该是和内容一样宽啊 为什么会和头部一样呢 */
早上想通了 头部和尾部 子元素都是600px宽 而包裹他的父元素没有设置宽 所以 会自适应
效果图如下

单列布局通栏.png

范例二

<style>
    .layout{
      width:960px;
      margin:0 auto;
    }
    .header{
      height:50px;
      background:pink;
    }
    .content{
      height:300px;
      background:red;
    }
    .footer{
      height:50px;
      background:blue;
    }
  </style>
<div class="header">头部</div>
<div class="content layout">内容</div>
  <div class="footer layout">尾部</div>

效果图如下

范例二.png

双列布局

一列固定宽度，另外一列自适应宽度

双列布局示意图.png

两栏布局时注意加载顺序
右侧固定 左侧及尾部自适应布局 注意代码加载顺序！！！！
范例如下

<style>
    .layout{
      max-width:960px;
      margin:0 auto;
    }
    .content:after{
      content:'';
      display:block;
      clear:both;
    }
    .content .aside{
      float:right;
      width:200px;
      height:200px;
      background:pink;
    }
    .content .main{
      height:400px;
      background:red;
      margin-right:210px;
    }
    .footer{
      height:50px;
      background:#ccc;
    }
  </style>
<div class=" content layout">
  <div class="aside">右侧固定</div>
  <div class="main">左侧自适应</div>
</div>
  <div class="footer layout">尾部自适应</div>

效果图如下

两栏布局 右侧固定.png

范例代码二 两栏及尾部都是自适应

<style>
    .layout:after{
      content:'';
      display:block;
      clear:both;
    }
    .aside{
      float:right;
      width:30%;
      height:200px;
      background:pink;
    }
    .main{
      width:70%;
      height:400px;
      background:red;
    }
    .footer{
      background:#ccc;
    }
  </style>
<div class="layout">
  <div class="aside">自适应</div>
  <div class="main">也是自适应</div>
</div>
  <div class="footer">尾部</div>

效果图如下

两栏自适应布局.png