CSS布局

什么是布局

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

文档流

浮动

定位

人们需要：

导航栏+内容

导航栏+内容+广告栏

从上到下、从左到右、定宽、自适应...

单列布局

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

width: 1000px; //或 max-width: 1000px;margin-left: auto;margin-right: auto;复制代码

注意 max-width和width的区别

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

以下是针对通栏的场景，给通栏加背景色

查看范例效果，能发现不完美的地方吗? 对了，滚动条 bug

下面我们进行优化，给 body 设置min-width 去掉滚动背景色 bug

双列布局

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

如何实现

浮动元素 + 普通元素margin

  
        
     
      aside
     
    
     
      content
     
  
    
  
    
     footer
    
复制代码

如果侧边栏在右边呢？

侧边栏在右

谨记页面元素的渲染顺序

  
        
     
      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
    
复制代码

其它布局(了解)

水平等距排列

圣杯布局

why it?

是三列布局，两边固定宽度，中间自适应

中间内容元素在 dom 元素次序中优先位置

按照注释编号，一行行实现观察效果

缺点：.mian的最小宽度不能小于.aside的宽度

why?

双飞翼布局

按照注释编号，一行行实现观察效果

解决了什么问题?

流式布局

我们实现一个简单的

弹性布局flex

grid

移动端布局

设置 meta ，如


    复制代码

适配

媒体查询 or 动态 rem