CSS布局總結

對於css的學習來說，布局和定位可以說使最關鍵的一部分，也是最基礎的部分，布局和定位方面在學習的時候應該要系統，要自己總結一遍，如果只是草草的過一遍，就直接開始做demo，會遇到很多坑，反而得不償失。因此我寫下這篇部落格，讀者如果發現問題，望不吝賜教。

在講布局和定位之前，先總結一下盒子模型。盒模型是布局定位的基礎。

盒模型由以下四個部分組成

- 內容區

- 內邊距

- 邊框

- 外邊距

注意：背景應用於由內容和內邊距、邊框組成的區域。即圖中淺色區域。

**：

background-image: url(images/background.gif);

在 css 中，width 和 height 指的是內容區域的寬度和高度。增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

假設框的每個邊上有 10 個畫素的外邊距和 5 個畫素的內邊距。如果希望這個元素框達到 100 個畫素，就需要將內容的寬度設定為 70 畫素，如下圖：

#box

流是瀏覽器在頁面上擺放html元素所用的方法，瀏覽器從html檔案最上面開始，從上到下沿著元素流逐個顯示遇到的各個元素。

每個塊元素獨佔一行，或者說塊元素之間會有乙個換行。

內聯元素則會在水平方向上挨著，隨著瀏覽器或內容區大小自適應換行。

併排放置兩個內聯元素時，元素都會有外邊距，如果左邊元素外邊距為10px，右邊元素外邊距為20px，那麼兩個元素之間就有30px的空間。

瀏覽器上下放置兩個塊元素時，它會把他們共同的外邊距摺疊在一起，摺疊的外邊距高度就是最大的外邊距高度。

指定乙個標識，指定寬度。注意所有的浮動元素必須要有寬度。

#id

clear屬性可以解決浮動元素重疊的問題。

採用div實現，內容區會擴充到整個瀏覽器的視窗。可採用主內容固定，側邊欄浮動，即可填滿整個介面。

顧名思義就是內容區不會自適應瀏覽器視窗，無論瀏覽器視窗大小形狀怎麼變化，內容區大小都不變，若視窗小於內容區的大小，那麼有一部分內容將無法被看見。

#content

凝膠介於流體和凍結之間，為內容區增加div，屬性如下，可實現居中，內容不會像流體布局那樣擴充到整個瀏覽器的視窗，確定了寬度後，拉大瀏覽器的介面，內容區會居中，左右兩邊會出現空白

width: 800px;
margin-left: auto;
margin-right: auto;

用table布局和其他布局一樣有優缺點，table多用於資料承載，或者用於簡單的頁面布局，但**冗餘多，不好調整結構，不容易改變布局。css對**的控制也不是很好。而且對效能也有很大影響。所以布局最好不用table，有多行多列的資料需要顯示的時候可以用來當容器。相關css **如下：

#container #tablerow #main #sidebar