常见布局-单栏

有两种情况：

image.png

如何实现
定宽

width: 1000px; 或 max-width: 1000px;

水平居中

margin-left: auto; margin-right: auto;

width和max-width的区别

width:600px表示写定宽度，容器的宽度一定为600px，
max-width:600px表示最大宽度为600px，当浏览器的宽度大于600px容器的宽度为600px，当浏览器的宽度小于600px时，容器的宽度则变为由内容撑开的宽度，不再是600px。

width与max-width区别的demo

一栏布局

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

优化
直接把class='layout'加在需要的div上,省标签。便于控制局部。

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

一栏布局（通栏）

<style>
  .layout{
    width: 960px;
    margin: 0 auto;
  }
  #header{
    height: 60px;
    background: red;
  }
  #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>

缺陷：当浏览器大小小于.layout设置的宽度时，会出现content 的溢出。如图

image.png

优化
给 body 设置min-width 去掉滚动背景色 bug

<style>
  .layout{
    width: 960px;
    margin: 0 auto;
  }
  body{
    min-width: 960px;
  }
  #header{
    height: 60px;
    background: red;
  }
  #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>

demo