task11常见布局

1、单栏布局

Paste_Image.png

• 方法：（1）定宽，width, min-width, max-width （2）块级元素水平居中。
  例：单栏布局（通栏）
  
  

  Paste_Image.png
  
  此种情况有个bug，在浏览器宽度低于设置宽度（960px）时，内容是可以滚动的，所以其宽度是960px，但header和footer在滚动区域不在填充，因为header和footer没有设置宽度，填充窗口即可，其宽度大小为窗口大小，所以在滚动部分不在填充。
  解决方法，在header、footer或body上添加：min-width: 960px;
  单栏布局

2、双列布局

一列固定宽度，另一列自适应宽度
方法：（1）浮动元素+普通元素margin
注意：浮动元素，需要注意浏览器的渲染顺序。

3、三栏布局

方法：旁边两栏固定宽度，中间栏宽度自适应
左右两栏float，中间栏设置margin-left与margin-right。因为中间栏是不浮动的块级元素，所以在html中应放在最后，浏览器最后渲染。
三栏布局

4、圣杯布局

     main在html中前置，
      两边aside，extra，固定宽度；main 宽度100%；
      将 main, aside,extra  设置浮动；
      对aside，extra设置负边距，使之上移。
      父容器padding-left，padding-right；
      对aside，extra设置position: relative；使之与main不重合。

圣杯布局
当浏览器缩小到一定程度时（aside的宽度大于main的宽度时），会出现错位。

5、双飞翼布局

解决圣杯布局的bug问题，main在html中前置。
双飞翼布局

风景页面