精通CSS——chapter8（布局）

CSS的主要好处之一是，他能够控制页面布局而不需要使用表现性标记。所有CSS布局技术的根本都死3个基本概念：定位、浮动、外边距操纵。

8.1计划布局

概念性的东西，这一节是为了告诉我们创建网页的时候要学会事先做好规划。

8.2 设置基本结构

.wrapper{

    width:920px;

    margin: 0 auto;

}

如果我们要居中，那么就用到这个东西

8.3基于浮动的布局

就是用好float：left/right 还有display：inline（这个是预防措施，是为了防止IE中的双外边浮动产生的bug）

8.4固定宽度、流式和弹性布局

流式布局：

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

2、他的缺点：在窗口宽度较小的时候，行变得非常窄，很难阅读。有必要添加以像素或em为单位的min-width，从而防止布局变得太窄。但是如果min-width设置得太大，流式设计也会遇到与固定宽度布局相同的限制。

3、大多数人根据自己屏幕上的效果选择尺寸，但是，如果希望更精确一点，可以通过查看浏览器统计数据确定最常用的效果选择尺寸，然后根据固定宽度版本与这个尺寸的比例，选择容器百分数。

弹性布局:

1、弹性布局相对于字号而不是浏览器的宽度来设置元素的宽度。以em为单位设置宽度，可以确保在字号增加的时候整个布局随之扩大。这可以将行长保持在可阅读的范围。

2、缺点：在文本字号增加的时候整个布局会增大，所以弹性布局会变得比浏览器窗口宽，导致水平滚动条的出现，为了防止这一种情况，可能需要在容器div上添加100%的max-width。

我们只以em为单位设置容器的宽度，其他仍然用百分数，这样的话内部宽度仍然是相对于字号的，这样就可以方便的修改布局的总尺寸，不必修改每个元素的宽度，这种解决办法更加灵活。

其他布局内容其实没有什么，在实战中会感受更深。