CSS布局

常见布局（PC）

• 固定宽度布局
  简单但是窗口宽度小的时候会出现滚动条

• 弹性布局（fluid）
  页面较为美观但是较为复杂

• 响应式布局——多终端（PC，pad，Phone）

单列布局

单列布局

• 没有通栏的情况

实现方法：定宽 width:设置固定值，或者设置max-width
然后设置margin-left和margin-right为auto

width和max-width也有一定的区别，设置width当浏览器窗口过小时会出现滚动条.
上述代码html可以简化，省略主layout的div，将.layout的class加到里面子元素上也可以达到效果。

• 有通栏的情况

    

        
header
        
    
    
content
    

        
footer
    
    

• 内部元素水平居中

范例：

内部元素水平居中

一般思路有：

.parent{
        text-align: center;
    }
    .child{
        display: inline-block;
        /*设置为inline-block的时候，一般元素的高度如果不相等的话，还得设置其vertical-align使其垂直方向居中*/
        /*IE6不支持display: inline-block; 可以写为display: inline;*zoom: 1;*/
        /**zoom: 1;用来触发hasLayout,使得元素具有block的性质*/
    }

或者可以使内部元素浮动，用一个元素包裹住，设置margin: 0 auto;

范例代码：

    

        HTML
        CSS
        JavaSctipt
    

双列布局

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

双列布局

• 实现方法：浮动元素+普通元素margin

    
aside
    
main

footer

而当aside在右边的时候，float:right，然后给main设置margin-right即可，但是这时候有一个需要注意的地方，就是在写html结构的时候，必须要将aside的div写在main的div前面，即：

    
aside
    
    
main

因为如果先写main的div的话，浏览器解析的时候，main是一个正常流块级元素，会独占一行，使得aside被挤到下一行去。

• 两栏布局的flex写法

    
aside
    
main

footer

三栏布局

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

三栏布局

    
left
    
right
    
    
main


footer

写三栏布局的时候，还是要注意html中left,rigfh和main的先后顺序，要考虑到浏览器的渲染顺序，将普通流的块级元素写在后面。

• 三栏布局的flex实现方法：

    
left
    
right
    
main


footer