假設瀏覽器窗口設置為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，防止內容在大顯示器上變得過寬。
  將固定寬度布局的三列轉換為流式三列布局：

  <div class="wrapper"
   
  >
      <div class="content">
          <div class="primary">
              <div class="primary">     </div>
              <div class="secondary">   </div>
          </div>
          <div class="secondary"> </div>
      </div>
  </div>
  <style>
          .wrapper
   
  {
              width:76.8%;   /*960÷1250=76.8%*/
              margin:0 auto;
              text-align:left;
              min-width : 62em; /*比較小的窗口尺寸，布局太擠，所以添加以em為單位的min-width*/
              max-width : 125em; /*設置為em為單位的max-width是為了確保文本行的長度適合閱讀*/
          }
          .content{
              overflow: hidden;  /*加上此句後conten和wrapper容器的高度不再是0，而是100*/
          }
          .content .primary{
              width : 72.82%;  /*670÷920=72.82% ，因為在wrapper設置了水平居中，所以40px均勻分布在content容器兩側各20px*/
              float:right;
              display:inline;
          }
          .content .secondary{
              background-color: red;
              width:25%;   /*230÷920=25%*/
              float:left;
              display:inline;
          }
          .content .primary .primary{
              background-color: yellow;
              width:59.7%;  /*400÷670=59.7%*/
              float:left;
              display:inline;
          }
          .content .primary .secondary{
              background-color: blue;
              width:34.33%;   /*230÷670=34.33%*/
              padding-right:3%;   /*20÷670=3% 設置內邊距，避免其包含的文本緊挨著元素的右邊緣*/
              float:right;
              display:inline;
          }
  </style>

  流式布局的缺點：在大分辨率顯示屏上，行仍然會過長，讓用戶不舒服，在窄窗口或在增加文本字號時，行會變得非常短，內容很零碎。解決方法：彈性布局。

彈性布局

相對於字號（而不是瀏覽器寬度）來設置元素的寬度，單位為em，可以確保在字號增加的時候整個布局隨之擴大。
缺點：①不能充分的利用空間②因為在字號增加的時候整個布局隨之擴大，所以彈性布局會變得比瀏覽器窗口寬，導致水平滾動條的出現，

解決方法是在容器div上添加100%的max-width。
將固定寬度布局的三列轉換為彈性三列布局：

　　技巧：設置基字號，讓1em大致相當於10px，瀏覽器默認字號是16px，10px是16px的62.5%，所以在主題上將字號設置為62.5%即可。

　　內部寬度仍使用百分數，只以em為單位設置容器的寬度，這樣的話，內部寬度仍是相對於字號的，可以更方便的修改布局的總尺寸，不必修改每個元素的寬度，更靈活、更易操作。

<div class="wrapper">
    <div class="content">
        <div class="primary">
            <div class="primary">     </div>
            <div class="secondary">   </div>
        </div>
        <div class="secondary"> </div>
    </div>
</div>
<style>
        body{
            font-size:62.5%;
            text-align:center;
        }
        .wrapper{
            width:92em;   /*容器寬度以em為單位*/
            margin:0 auto;
            text-align:left;
            max-width : 95%;
        }
        .content{
            overflow: hidden;  /*加上此句後conten和wrapper容器的高度不再是0，而是100*/
        }
        .content .primary{
            width : 72.82%;  /*670÷920=72.82%  內部寬度仍使用百分數*/
            float:right;
            display:inline;
        }
        .content .secondary{
            background-color: red;
            width:25%;   /*230÷920=25%   內部寬度仍使用百分數*/
            float:left;
            display:inline;
        }
        .content .primary .primary{
            background-color: yellow;
            width:59.7%;  /*400÷670=59.7% 內部寬度仍使用百分數*/
            float:left;
            display:inline;
        }
        .content .primary .secondary{
            background-color: blue;
            width:34.33%;   /*230÷670=34.33%  內部寬度仍使用百分數*/
            padding-right:2em;   /*2em=20px 設置內邊距，避免其包含的文本緊挨著元素的右邊緣*/
            float:right;
            display:inline;
        }
</style>

固定寬度、流式、彈性布局