网页布局

一列布局

• 作为布局板块，style样式中 margin:0 auto 表示居中
• image.png

• 运行效果

  
  
  板块

二列布局

• 在main中二列布局

  
  
  image.png

• float:left ;float:right表示浮动到左边，浮动到右边

• 浮动（float）和绝对定位(position:absolute)可以让元素脱离文档流。

  
  
  image.png

• 运行效果

  
  
  image.png

三列布局

• 在main中三列布局

  
  
  image.png

• width:33.33%平均分配
  

  image.png

• 运行效果

  
  
  image.png

position:absolute绝对定位

• left、right部分绝对定位，middle部分自适应
• left{position:absolute ; left:0 ; top:100px}表示left部分绝对定位离顶100像素（ 因为top{height ：100px} ），离左边0像素，这个位置与left是否在main里面无关。

• middle{ margin : 0 310px 0 210px} 表示middle在main里距离上0px,距离右310px,距离下0px，距离左210px。

  
  
  image.png
  
  
  image.png

• 运行效果

  
  
  image.png

混合布局

• 层级：
  main(left,right)
  right(sub_l,sub_r)

  
  
  image.png

• 自行计算width:
  main (800px)
  =left(200px) + right(600px)
  = left(200px) + sub_l(400px) + sub_r(200px)

  
  
  image.png

• 运行效果

  
  
  image.png