css布局

单栏布局

• 一栏
  注意：

width //无论什么时候 宽度都是设的值的大小 页面被缩放小于宽度时，会出现滚动条
max-width //最大宽度 如果页面宽度比设的值小 则会自动变小 不会有滚动条出现

实现效果

• 通栏（头尾随页面大小一样）
  为了头尾在拉大的时候显示不完全，给body加个min-width ，值等于内容的宽度
  实现效果

两栏， 三栏

多个元素居中显示

.parent{
    text-algin: center;
    ver-algin: top; //高度不同，顶部对齐
}
.child{
    display: inline-block;
}
或者
.parent{
    margin: 0 auto;
}

• 双列布局
  一列固定宽度，另一列自适应宽度
  固定宽度的左浮float:left， 自适应宽度的margin-left：固定宽度的元素的宽度+间隙
  父容器记得清浮动
  实现效果

• 三列布局
  两侧两列固定宽度，中间列自适应宽度
  方法：两侧分别左浮，右浮，中间加左右margin。父容器记得清浮动
  注意渲染顺序，先左右两列元素，最后中间自适应元素
  实现效果

• 水平等距排列（九宫格）
  用ul,li元素比较有语义
  方法：li元素左浮，margin左或右设置间隔，父容器相对于的margin方向设负值，值的大小为li元素的间隔
  实现效果
  展示

圣杯布局（缺点：中间元素宽度不能小于最小侧边元素的宽度）

同三栏布局效果，中间自适应宽度的元素在最前面渲染
方法：
父容器加左右padding 值分别是左右侧元素的宽度 + 间隙
三个元素都左浮，左侧元素负margin 100%，加position:relative,left 负值 本身宽度
右侧元素负margin 自身宽度，加position:relative,right 负值 本身宽度
中间自适应宽度元素宽度100%（相对于父元素）
实现效果

双飞翼布局（解决圣杯布局错乱缺点）

方法：大体和圣杯类似，但是中间自适应元素再加一层父容器，float：left和width: 100%加在父容器上, 内容（高度，背景色等）加在自身
实现效果