CSS布局

课程内容

什么是布局
DIV + CSS？
固定宽度 VS 弹性布局
单列布局
双列布局
三列布局

什么是布局

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

文档流
浮动
定位

人们需要：

导航栏+内容
导航栏+内容+广告栏
从上到下、从左到右、定宽、自适应...
CSS 2 并没有提供原生支持，所以需要将一些属性组合起来，以实现布局

“DIV + CSS 布局”？

中国特色，国外一般不这么叫 
 是一个无语义的标签，适合用来做与内容无关的事情 只能用 
 吗？

不一定
尽量使用有语义的标签

常见布局（PC）

固定宽度布局：比如京东首页，一般pc端都是
优点：简单，宽度可以写死，不管页面怎么变，整体的样式不变
缺点：假如浏览器的宽度小于内容时，会出现滚动条
弹性（fluid）布局：内容并不是固定宽度，和页面的整体宽度有关，需要用百分比做适配，
缺点：在设计和实现上都要复杂些，需要考虑屏幕的不同情况，
优点：设计的好的话，页面会很好看。
响应式布局 —— 多终端（PC、Pad、Phone）

如何实现
定宽

width: 1000px; 或 max-width: 1000px;

width：1000px:当小于1000的时候有滚动条
max-width: 1000px;当小于1000的时候没有滚动条

水平居中

margin-left: auto; margin-right: auto;

范例：单列布局

范例 注意 max-width和width的区别



  
头部
  
内容
  
尾部

进化

省标签，便于控制局部 范例


头部
内容
尾部

通栏

给通栏加背景色 范例



  
头部

内容

  
尾部

通栏优化

给 body 设置min-width 去掉滚动背景色 bug



  
头部

内容

  
尾部

内部元素水平居中

.parent{text-align:center;}
.child{display: inline-block;}
IE 6 不支持 inline-block (为什么用下面的写法)

.child{*display: inline; *zoom: 1;}

http://js.jirengu.com/yaluqavufi/1/edit

如何实现

浮动元素 + 普通元素margin 范例

  
  

    
aside
    
content
  
  
footer

如果侧边栏在右边呢？

侧边栏在右

谨记页面元素的渲染顺序 范例

：浏览器先读content，样式，然后再读aside，样式，再读content
  

  

    
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

http://js.jirengu.com/jige/edit?html,output

浮动 vs 负margin
水平等距排列
圣杯布局
双飞翼布局

浮动 vs 负margin

对于相邻的两个浮动元素，如果因为空间不够导致第二个浮动元素下移，可以通过给第二个浮动元素设置
 margin-left: 负值 来让第二个元素上移，其中 负值 大于等于元素上移后和第一个元素重合的临界值

三个浮动元素

最后一个浮动元素使用了负边距

使用了负边距

范例演示

范例 想想最后一个元素为什么要设置为 -20px?

.float{
    overflow:hidden;
    width:280px;
    border:dashed 1px orange;
}

.float .item{
    width:100px;
    height:100px;
    float:left;
}

.float .item:nth-child(1){
    background:red;
}
.float .item:nth-child(2){
    background:grey;
}
.float .item:nth-child(3){
    background:blue;
    margin-left: -20px;  /* 为什么这里是 -20px ??*/
}



    

    

    

水平等距排列

范例



  

    
1
    
2
    
3
    
4
    
5
    
6
    
7
    
8
  

http://js.jirengu.com/xute/edit?html,output

圣杯布局

why it?

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

实现

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

  

  

    
main
    
aside
    
extra
  

http://js.jirengu.com/poya/1/edit?html,output

缺点

.mian的最小宽度不能小于.aside的宽度

why?：当小于的时候会发生错乱，.main被挤下去

双飞翼布局

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

解决了什么问题?

  
  
  

    

      
main
    
    
aside
    
extra
  

http://js.jirengu.com/casozaraxo/1/edit

一.实现一个单栏布局

代码一

二.实现一个三栏布局

代码二

三.实现圣杯布局

代码三

四.实现双飞翼布局

代码四

代码五