CSS布局汇总

水平布局

float等宽固定布局（float+width）

float流式布局（float+width+margin-left）

float自适应布局（float+width+margin-right+display）

左浮动+右侧定宽（float+width+margin-left）

右浮动+左侧定宽（float+width+margin-right）

注意，html结构是右边的box1在前！！！

文字溢出容器（absolute）

注意，文字要用行内元素！！！

absolute水平布局

如果是行内元素，直接设置absolute

除此以外，还可以通过left、right、bottom、top去设置。

水平居中布局

margin: 0 auto

注意，图片需要设置：display：block

text-align: center

给图片父容器设置：text-align:center

注意，是父容器！！！

display: table

利用table标签的长度自适应性

元素设置：display：table; margin: 0 auto

absolute（IE8+）

2种方法：

1.元素设置：position: absolute; left: 0; right: 0; width: 50%; margin: 0 auto;

如果元素没有高度，还需要设置top: 0; bottom: 0；

父元素设置relative

2.元素设置：position: absolute; left: 25%; right: 25%; top: 0; bottom: 0；

父元素设置relative

垂直居中布局

absolute和relative

元素设置：position: absolute; left: 0; right: 0; top: 25%; bottom: 25%；

父元素设置relative

absolute和relative、margin

容器设置： position:reltaive

元素设置：固定宽高 、 margin:auto; top:0; bottom:0;

line-height 和 vertical-align

父容器设置line-height为width值，

子元素设置vertical-align：middle

display: table-cell

父容器设置：display:table-cell; vertical-align:middle;

display: inline-block 和 vertical-align:middle

HTML结构

容器{    图片{}    空标签{}   }

容器设置：固定高度

图片设置：vertical-align：middle

空标签：display:inline-block; height:100%; vertical-align:middle;

水平垂直居中布局

absolute

元素设置：position: absolute；left: 25%; right: 25%; width: 50%; bottom: 25%;

父元素设置relative

line-height 和 vertical-align:middle 、text-align: center

父容器设置line-height为width值; text-align: center ;

子元素设置vertical-align：middle

display: inline-block 和 vertical-align:middle、text-align: center

HTML结构

容器{    图片{}    空标签{}   }

容器设置：固定高度、text-align: center

图片设置：vertical-align：middle

空标签：display:inline-block; height:100%; vertical-align:middle;

absolute和relative、margin

容器设置： position:reltaive

元素设置：固定宽高 、 margin:auto; top:0; bottom:0;

以上就是我所汇总的各种布局，由于时间仓促，仍有一部分没有提到，将在以后慢慢补充完善。