html+css 布局系列

如何为固定大小盒子和不固定盒子大小设置网页水平居中，垂直居中
margin:0 auto;（固定大小——设置水平居中对齐，使用自动外边距实现居中，但是必须为该容器指定宽度）
position:absolute; left:40%; top:40%; width:10%; height:10%;(不固定盒子大小实现垂直居中)
如果我们想固定盒子大小，又想固定盒子居中位置，那么可以设置盒子为绝对定位，然后将top和left值设定为50%；并且设置margin-top和margin-left的值为盒子高度和宽度的一半的负值，这样就是可以确保盒子的居中位置
eg:
.box{position:absolute; top:50%; left:50%; width:500px; height:500px; margin:-250px 0 0-250px; border:1px solid red;}

网页利用CSS布局主要有四类布局：一列布局，两列布局，三列布局，混合布局
一列布局通常是指点宽度的，方便进行布局显示，例如百度首页
通常使用margin:0 auto;实现效果
两列布局通常是2个DIV块并排显示,通常使用float实现效果，但是使用浮动之后要记得清楚浮动
三列布局是指三列并排显示
如果是固定宽度就可以直接使用float进行设置，如果有一个是固定宽度，另外一个非固定宽度，就要让固定宽度的那个盒子进行定位，设置好相关的left和top值，然后另外一边的值设置margin值