CSS 基礎點集錦一：盒子模型、浮動、清除浮動

1、盒子模型：

示意圖（圖片來自w3school）：

說明：上圖中，由內而外依次是

元素內容（content）

內邊矩（padding-top、padding-right、padding- bottom、padding-left）

邊框（border-top、border-right、border-bottom、border- left）

外邊距（marging-top、margin-right、margin-bottom、margin-left）。

　　內邊距、邊框和外邊距可以應用於一個元素的所有邊，也可以應用於單獨的邊。而且，外邊距可以是負值，而且在很多情況下都要使用負值的外邊距。

元素框的最內部分是實際的內容，直接包圍內容的是內邊距。內邊距呈現了元素的背景。內邊距的邊緣是邊框。邊框以外是外邊距，外邊距預設是透明的，因此不會遮擋其後的任何元素。

提示：背景應用於由內容和內邊距、邊框組成的區域。

內邊距、邊框和外邊距都是可選的，預設值是零。但是，許多元素將由使用者代理樣式表設定外邊距和內邊距。可以通過將元素的 margin 和 padding 設定為零來覆蓋這些瀏覽器樣式。這可以分別進行，也可以使用通用選擇器對所有元素進行設定：

* {
  margin: 0;
  padding: 0;
}

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

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

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

參考：點選開啟連結

擴充：CSS 內邊距、CSS 邊框、CSS 外邊距

2、CSS精靈技術

參考：點選開啟連結

案例：126郵箱

其所用圖片：

3、CSS 浮動（摘自w3school）

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文件的普通流中，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

請看下圖，當把框 1 向右浮動時，它脫離文件流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：

再請看下圖，當框 1 向左浮動時，它脫離文件流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文件流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從檢視中消失。
如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。

如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”：

CSS float 屬性
在 CSS 中，我們通過 float 屬性實現元素的浮動。
如需更多有關 float 屬性的知識，請訪問參考手冊：CSS float 屬性。

w3school擴充閱讀：點選開啟連結

4、CSS  清除浮動

• 背景不能顯示

由於浮動產生，如果對父級設定了（CSS background背景）CSS背景顏色或CSS背景圖片，而父級不能被撐開，所以導致CSS背景不能顯示。

• 邊框不能撐開

如上圖中，如果父級設定了CSS邊框屬性（css border），由於子級裡使用了float屬性，產生浮動，父級不能被撐開，導致邊框不能隨內容而被撐開。

• 3、margin padding設定值不能正確顯示

由於浮動導致父級子級之間設定了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。

解決方法：

•  clear: both清除產生浮動
• 父級div定義 overflow:hidden
  對父級CSS選擇器加overflow:hidden樣式，可以清除父級內使用float產生浮動。優點是可以很少CSS程式碼即可解決浮動產生。
  
• .clearFix清除浮動（參考：點選開啟連結）

    .clearFix:after {
              content: "."; /*內容為“.”就是一個英文的句號而已。也可以不寫。*/
              display: block; /*加入的這個元素轉換為塊級元素。*/
              clear: both; /*清除左右兩邊浮動。*/
              visibility: hidden; /*可見度設為隱藏。注意它和display:none;是有區別的。visibility:hidden;仍然佔據空間，只是看不到而已；*/
              line-height: 0; /*行高為0；*/
              height: 0; /*高度為0；*/
              font-size: 0; /*字型大小為0；*/
          }
  
          .clearFix {
              *zoom: 1;
          }

  
  

上面的程式碼就是.clearFix的定義和應用，簡單的說下.clearFix的原理：

• 在IE6, 7下zoom: 1會觸發hasLayout，從而使元素閉合內部的浮動。
  
• 在標準瀏覽器下，.clearFix:after這個偽類會在應用到.clearFix的元素後面插入一個clear: both的塊級元素，從而達到清除浮動的作用。
  
• 在需要清除浮動的時候，只要寫一個.clearFix就行了，然後在需要清浮動的元素中 新增clearFix類名就好了。