读书笔记--精通CSS高级Web标准解决方案（八）---布局

一、总论

万变不离其宗，所有的CSS布局技术根本都是3个基本概念：定位、浮动和外边距操纵。实际上，布局是CSS最容易的部分。

二、布局计划

在进行网页布局之前，最好在纸上将布局的大体结构画出来，最好能够事先想好哪些部分用哪些HTML元素，哪些文字用那些字体字号等。

三、常见布局技巧和实现方式

1、让页面内容居中

常见的做法是只需要定义容器div的宽度，然后将水平外边距设置为auto。但是在混杂模式中的IE6不支持margin:auto，好在IE将text-align:center误解为让所有的东西都居中，包括容器div，而不是文本，所以可以利用。

body { 
  text-align: center; 
  min-width: 960px;
}

.wrapper { 
  width: 920px; 
  margin: 0 auto; 
　　/** 让容器的内容重新左对齐，因为上面的body中被设置成了center*/
  text-align: left; 
} 

2、两列浮动布局

两列浮动布局很简单，一个往左浮动，一个往有浮动，从而可以最大程度利用页面空间；另外就是两列浮动了之后，会在容器中溢出，为了使之不溢出容器，可以将容器的overflow属性设置为hidden。需要注意的一点就是，需要在浮动元素中添加display:inline，放在IE的双外边距浮动产生的bug。

3、三列浮动布局

和前面类似，相当于在前面的左边或右边元素里再嵌套一个两列浮动布局。然后通过子选择器来设置特殊的样式。代码示意：

.content .primary .primary {
    width: 59.7%;
    float: left;
}

.content .primary .secondary {
    width: 34.33%;
    padding-right: 2.63%;
    float: right;
}

4、流式布局
所谓流式布局，就是将页面主要内容的容器的宽度单位按照百分比来设置，从而使其随着窗口大小的改变而改变；另外，为了防止布局变得太窄或太宽影响阅读，需要在最外层的容器上设置max-width和min-width属性，并且其单位最好为相对的字体单位em。关键代码：

body {
  text-align: center; 
}

.wrapper {
  width: 76.8%; 
  margin: 0 auto; 
  text-align: left;
    max-width: 125em;
    min-width: 62em;
}

.content {
    overflow: hidden;
}

.content .primary { 
  width: 72.82%;
  float: right;
}

.content .secondary { 
  width: 25%;
  float: left; 
} 


.content .primary .primary {
    width: 59.7%;
    float: left;
}

.content .primary .secondary {
    width: 34.33%;
    padding-right: 2.63%;
    float: right;
}

关于em元素，任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合:
1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为
16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

5、弹性布局

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

其缺点是随着字体的太大或者太小，可能造成页面大小没有充分利用，或者页面出现滚动条，主要代码：

body {
  /**设置1em = 10px; */
  font-size: 62.5%;
  text-align: center; 
}

.wrapper {
  /** 只需要在容器中设置为相对宽度，子元素依然用百分比设置宽度*/
  width: 92em; 
  margin: 0 auto; 
  text-align: left;
  max-width: 95%;
}

.content {
    overflow: hidden;
}

.content .primary { 
  width: 72.82%;
  float: right;
}

.content .secondary { 
  width: 25%;
  float: left; 
} 


.content .primary .primary {
    width: 59.7%;
    float: left;
}

.content .primary .secondary {
    width: 34.33%;
    padding-right: 2.63%;
    float: right;
}

6、流式和弹性图片

对于需要跨域大区域的图像，可以设置为背景图。

<style>
#branding1 {
  height: 171px;
  background: url(images/branding.png) no-repeat left top;
}
</style>
<div id="branding1">

对于需要设置为图像元素的图像，用容器包裹图像，并给容器的overflow设置为hidden。

<style>
#branding2 {
  width: 100%;
  overflow: hidden;
}
</style>
<div id="branding2"><img src="images/branding.png" width="1600" height="171" /></div>

对于新闻式的左图右文，按页面需要的百分比设置图片的宽度，并将最大宽度设置为图像的真实宽度，防止图像失真。但是在符合标准的浏览器上，图像不会超过其实际尺寸。

.news {
  background-color:#eaeaea;
  border: solid 1px #999;
}

.news img {
  float: left;
  padding: 2%;
  width: 25%;
  max-width: 200px;
}

.news p {
  float: right;
  width: 68%;
  margin: 0;
  padding: 2% 2% 2% 0;
}

 7、高度相等的div（Faux列）

对于固定宽度的两列布局，只需要在容器上设置一个垂直重复的背景图即可，其宽度与导航区域的宽度相同：

body {
  text-align: center; 
  min-width: 960px;
}

.wrapper {
  width: 920px; 
  margin: 0 auto; 
  text-align: left;
  background: #fff url(img/nav-bg-fixed.gif) repeat-y left top;
}


.content {
    overflow: hidden;
}

.content .primary { 
  width: 650px;
    padding-right: 20px;
  float: right;
}

.content .secondary { 
  width: 230px;
  float: left; 
} 

对于固定宽度的三列布局，原理盒上面的一样，只是背景图变成横跨3个区域的形式了，这里不再列出代码。
对于不固定宽度的的三列布局，原理盒和上面类似，也是需要用到背景图，关键是需要用到百分比的背景图定位。所谓百分比定位，其规则是：图片本身（x%,y%）的那个点，与背景区域的（x%,y%）的那个点重合。比如，如果放置位置是“20% 10%”，实际结果如下图，可以看到这个点是在图片本身的“20% 10%”的位置上。

 

关键代码

.wrapper {
  width: 76.8%; 
  margin: 0 auto; 
  text-align: left;
    max-width: 125em;
    min-width: 76em;
  background: #fff url(img/secondary-faux-col.gif) repeat-y 25% 0;
}

.inner-wrapper {
  background: url(img/primary-faux-col.gif) repeat-y 71.73% 0;
}

其实，说白了，就是按照比例，将背景图上面的某一个点固定在页面上同样一个比例的位子，从而，不管页面怎么变化，这两个点永远都不分离。