概覽 CSS盒模型，規定了元素框來處理元素的 內容、內邊距、邊框和外邊距的方式 元素部分是指內容部分，也是最實際的內容，包圍內容的稱之為內邊距，內邊距外圍是邊框，邊框外圍就是外邊距；且外邊距是透明的，所以並不會阻擋其後的元素 　　* { 　　　　margin: 0; 　　　　padding: 0; 　　} 　　這是在CSS中最常見的初始化CSS的程式碼，用於覆蓋瀏覽器的預設樣式 瀏覽器相容性 　　大多數瀏覽器都會按照上面的圖示來呈現內容。然而 IE 5 和 6 的呈現卻是不正確的。根據 W3C 的規範，元素內容佔據的空間是由 width 屬性設定的，而內容周圍的 padding 和 border 值是另外計算的。不幸的是，IE 5.X 和 6 在使用自己的非標準模型。這些瀏覽器的 width 屬性不是內容的寬度，而是內容、內邊距和邊框的寬度的總和。 雖然有方法解決這個問題。但是目前最好的解決方案是迴避這個問題。也就是，不要給元素新增具有指定寬度的內邊距，而是嘗試將內邊距或外邊距新增到元素的父元素和子元素。 值複製 　　值複製是指 margin 的四個方位屬性值部分預設時的自動填充。 　　四個值部分預設，有如下三種情況： 　　1 個值，其他 3 個值都由這個值（上外邊距）複製得到 　　　　 1 p {margin: 1px;} /* 等價於 1px 1px 1px 1px */  　　2 個值，第 3 個值（下外邊距）由第 1 個值（上外邊距）複製得到，第 4 個值（左外邊距）由第 2 個值（右外邊距）複製得到 　　　　 1 h2 {margin: 0.5em 1em;} /* 等價於 0.5em 1em 0.5em 1em */  　　3 個值，第 4 個值（左外邊距）由第 2 個值（右外邊距）複製得到 　　　　 1

h1 {margin: 0.25em 1em 0.5em;} /* 等價於 0.25em 1em 0.5em 1em */  　　歸納起來就是，上下對應，左右對應，第一個值是 top. 盒模型的基礎屬性大概就是這些，那麼基於盒模型的概念，也延伸出了不少東西，其中我覺得有必要作為一個點需要記錄下的應該就是元素居中了。元素居中是在頁面中使用最頻繁的一種頁面元素操作手段，也是面試中經常出現的題目。所以特地整理出來了6種常見的元素劇中方式。 1.基本方案： 給予元素一個寬度並使用margin來做居中處理  1 body{ 2 width:960px; 3 margin:0 auto; 4 }  2.單行文字居中 為文字加上line-height屬性後使用vertical-align: middle;

1
 
 #parent { 
2 line-height: 200px;
3  } 
4 #parent img { 
5 vertical-align: middle;
6  }

3.table元素中的居中

#parent {
    display: table;
}
#child {
	display: table-cell;
	vertical-align: middle;
}

這種情況會在IE6 7下出現一定的bug，解決方案如下

1 #child {
2         display: inline-block;
3     }

4.元素使用定位進行居中 此型別居中是需要基於父類元素的，需要先設定父類元素相對定位，子類元素需要做到相對於父類進行絕對定位

1     #parent {position: relative;}
2     #child {
3         position: absolute;
4         top: 50%;
5         left: 50%;
6         height: 30%;
7         width: 50%;
8         margin: -15% 0 0 -25%;
9     }

此型別定位適用於塊級巢狀的元素 5.上個方案的升級版

 1 #parent {
 2 position: relative;
 3 }
 4 #child {
 5 position: absolute;
 6 top: 0;
 7 bottom: 0;
 8 left: 0;
 9 right: 0;
10 width: 50%;
11 height: 30%;
12 margin: auto;
13 }

6.對於已浮動的元素的居中處理

 1 #parent {
 2      height: 250px;
 3 }
 4 #floater {
 5 float: left; 
 6 height: 50%; 
 7 width: 100%; 
 8 margin-bottom: -50px; 
 9 } 
10 #child {
11 clear: both; height: 100px; 
12 }

　　前端學習持續進行中，希望通過自己的努力能夠讓自己成為一個合格的前端工程師吧（神特喵總結→_→...就是不那麼菜雞就好....）

　　部落格內容為自己收集並整理，非原創。感謝度娘，感謝必應，谷歌翻過去了網速不好，也沒找到啥能看得...如有雷同，那肯定就是我整理資料的來源吧，手動滑稽;

　　完結撒花