CSS布局

单列布局

实现方式： 定宽+水平居中

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

max-width和width的区别:固定宽度当浏览器缩小时页面出现滚动条；最大宽度当页面缩小时页面自动伸缩 以真实宽度作为浏览器计算的基准
1.一栏布局

  
头部
  
内容
  
尾部

也可有如下写法，省标签，便于控制局部:

头部
内容
尾部

2.通栏布局

  
头部

内容

  
尾部

双列布局

浮动元素+普通元素marmgin

  

    
aside
    
content
  
  
footer

三列布局

两侧两列固定宽度，中间列自适应宽度

#content:after{
      content: '';
      display: block;
      clear: both;
    }
    .menu{
      width: 100px;
      height: 500px;
      background: pink;
      float: left;
    }
    .aside{
      width: 200px;
      height: 500px;
      background: yellow;
      float: right;
    }
    .main{
      margin-left: 110px; /*为什么要加margin-left*/
      margin-right: 210px;
      height: 400px;
      background: red;
    }

    #footer{
      background: #ccc;
    }

  

    
    
aside
    
aside
    
content
  
  
footer

水平等距排列

  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8