什么是布局

现有样式的布局，不能满足需求

• 文档流
• 浮动
• 定位

现实需要的布局：

• 导航栏+内容
• 导航栏+内容+广告栏
• 从上到下、从左到右、定宽、自适应

单列布局

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

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

注意 max-width和width的区别

max-width屏幕变窄的时候没有拉动条，width在屏幕变窄的时候下方会出现拉动条

 和 code

     
  
      
       头部
      
  
      
       内容
      
  
      
       尾部
      
     

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

     
      头部
     
     
      内容
     
     
      尾部
     

 

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

     
  
      
       头部
      
     
     
      内容
     
     
  
      
       尾部
      
     

 

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

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

     
  
      
       头部
      
     
     
      内容
     
     
  
      
       尾部
      
     

 

双列布局

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

 

如何实现

浮动元素 + 普通元素margin 

  
     
    
      
       aside
      
    
      
       main
      
  
     
  
     
      footer
     

 

如果侧边栏在右边呢？

侧边栏在右

谨记页面元素的渲染顺序 

  
     
    
      
       aside
      
    
      
       main
      
  
     
  
     
      footer
     

 

三列布局

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

 

如何实现

    
     
    
          
      
       aside
      
    
      
       aside
      
    
      
       main
      
  
     
  
     
      footer
     

 

其它布局(了解)

• 水平等距排列

以上两个情况都是需要使用到负margin的情况，仔细分析一下为什么需要使用负margin

     
  
      
    
       
1
    
       
2
    
       
3
    
       
4
    
       
5
    
       
6
    
       
7
    
       
8
  
      
     

 

• 圣杯布局
• 双飞翼布局

• 流式布局

• 弹性布局flex

• grid

 

移动端布局

设置 meta ，如

适配

媒体查询 or 动态 rem

 

元素居中

水平居中

text-align

在父元素上设置 text-align: center 使文字/图片水平居中。

.container {  text-align: center;}

margin

.container {  width: 80%;  margin-left: auto; margin-right: auto; }

垂直居中

居中vs不居中

 

绝对定位实现居中（包含定宽高和不定宽高的块的居中）

特别注意代码里面的注释

 

vertical-align实现居中

特别注意代码里面的注释

 

table-cell实现居中

特别注意代码里面的注释

 

display: flex

.space {  width: 100vw;  height: 100vh; /* 设置宽高以显示居中效果 */ display: flex; /* 弹性布局 */ align-items: center; /* 垂直居中 */ justify-content: center; /* 水平居中 */ } body { margin: 0; background: rgba(0, 0, 0, .95); } .earth::after { content: '?'; font-size: 85px; }

?