css学习-布局

css布局技术的根本都是三个基本概念：定位，浮动，外边距操纵。

在页面中水平居中

width:920px
margin:0 auto;

body{
    text-align:center // ie会误解让所有东西居中，而不只是文本。
}

创建两列和三列的基于浮动的布局

主要都是使用float来实现。

但是最好添加display:inline 来预防ie中的双外边距浮动产生的bug.

可以对

.content{
    overflow:hidden;
}

创建固定宽度、流式和弹性布局。

对于流式布局 : 尺寸是使用百分比而不是像素设置的。这使得流式布局能够相对于浏览器窗口进行伸缩。

但是在变小到时候 可以添加像素或者添加min-width.从而防止问题呢。

对于弹性布局：对于字号而不是浏览器宽度来设置元素宽度。以em为单位设置宽度，以确保在字号在增加的时候整个布局随着扩大。

创建高度相等的列

对于css3 可以通过 

column-count

column-witdh

column-gap

column-rule

css框架和css系统