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

假设浏览器窗口设置为1250px；
wrapper的宽度为960px；
content的宽度为920px：确保了wrapper居中时两边有20px的间距；
  secondary的宽度为230px；
  primary的宽度为670px；
    其中primary中的secondary的宽度为400px;
    primary的宽度为230px;
      padding-right为20px。

固定宽度布局

宽度以像素为单位，这种布局类型成为固定宽度的布局，非常常见的一种。

• 优点：开发者对布局和定位有更大的控制能力，知道每个元素的精确宽度，就能够对它们进行精确的布局，而且知道所有东西在什么地方。
• 缺点：①宽度是固定的，无论窗口尺寸多大它们的尺寸都不变，所以空间利用率不高，不适应灵活的web。②行长和文本易读性：固定宽度布局往往适合于浏览器默认文本字号，但只要将文本字号增加几级，边栏就会挤满空间并且行长太短，阅读起来不舒服。
  为解决上述缺点，可使用流式布局或弹性布局代替固定宽度的布局。

流式布局

流式布局中尺寸用百分比而不是像素设置。

• 优点：使得能够相对于浏览器窗口进行伸缩，可以更好的利用空间。
• 缺点：①窗口宽度较小时行变得非常窄，很难阅读，所以有必要加上像素或em为单位的min-width，防止布局变得太窄，但min-width设置的太大也会遇到与固定宽度相同的问题。②如果设计横跨整个浏览器窗口，那么行就会变得太长，也很难阅读。解决方法：Ⅰ、让容器之跨越宽度的一部分，Ⅱ、用百分数设置内边距和外边距，Ⅲ、对于非常严重的问题，可以为容器设置最大宽度max-width，防止内容在大显示器上变得过宽。
  将固定宽度布局的三列转换为流式三列布局：

流式布局的缺点：在大分辨率显示屏上，行仍然会过长，让用户不舒服，在窄窗口或在增加文本字号时，行会变得非常短，内容很零碎。
解决方法：弹性布局。

弹性布局

相对于字号（而不是浏览器宽度）来设置元素的宽度，单位为em，可以确保在字号增加的时候整个布局随之扩大。
缺点：①不能充分的利用空间②因为在字号增加的时候整个布局随之扩大，所以弹性布局会变得比浏览器窗口宽，导致水平滚动条的出现，解决方法是在容器div上添加100%的max-width。
将固定宽度布局的三列转换为弹性三列布局：技巧：设置基字号，让1em大致相当于10px，浏览器默认字号是16px，10px是16px的62.5%，所以在主题上将字号设置为62.5%即可。
内部宽度仍使用百分数，只以em为单位设置容器的宽度，这样的话，内部宽度仍是相对于字号的，可以更方便的修改布局的总尺寸，不必修改每个元素的宽度，更灵活、更易操作。