CSS布局

• 什么是布局

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

• 文档流
• 浮动
• 定位
  人们需要：
• 导航栏+内容
• 导航栏+内容+广告栏
• 从上到下、从左到右、定宽、自适应....
  css 2 并没有提供原生支持，所以需要将一些属性组合起来，以实现布局。

• 常见布局

  • 固定宽度
  • 弹性（fluid）布局
  • 响应式布局--多终端（pc、pad、phone）

• 单列布局

Paste_Image.png

如何实现：

定宽： width: 1000px; 或max-width: 1000px;
水平居中：margin-left: auto; margin-right: auto;

Paste_Image.png

• 双列布局

如何实现：
浮动元素+普通元素

Paste_Image.png

• 三栏式布局

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

三栏式布局

   #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-right: 210px;
      height: 400px;
      background: red;
    }
  

    
aside
    
aside
    
content
  

效果：

效果

• 圣杯布局

1. 是三列布局，两边固定宽度，中间自适应
2. 中间内容元素在 dom 元素次序中优先位置

 

  

    
main
    
aside
    
extra
  

效果：

效果

缺点：.mian的最小宽度不能小于.aside的宽度。（把整个页面的宽度收缩后，会出现布局错乱的效果，因为当页面收缩时，main因为是其父容器content的100%的宽度，所以main也会跟着收缩，当main收缩到比aside宽度还要小，这时候父容器ct的100%宽度 解决：可以给父容器ct加上一个min-width样式，min-width的值不能小于aside和extra两者间的宽度最大值，这样做可以使中间的main的宽度始终比extra和aside大，就不会导致布局错乱了。

• 双飞翼布局

双飞翼布局解决了什么问题呢？
双飞翼布局不仅能满足main处于优先加载的地位，而且更好的解决了圣杯布局的错乱问题，且css代码更简单，缺点是增加了一个标签。

  
  

    

      
main
    
    
aside
    
extra
  

效果：

效果

文章著作权归饥人谷_sunny和饥人谷所有，转载须说明来源