大前端學習筆記整理【一】CSS盒模型與基於盒模型的6種元素居中方案

概覽

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 }

 

 

　　前端學習持續進行中，但願經過本身的努力可以讓本身成爲一個合格的前端工程師吧（神特喵總結→_→...就是不那麼菜雞就好....）

　　博客內容爲本身收集並整理，非原創。感謝度娘，感謝必應，谷歌翻過去了網速很差，也沒找到啥能看得...若有雷同，那確定就是我整理資料的來源吧，手動滑稽;

　　ps.如需轉載，請附上本人博客地址http://www.cnblogs.com/azhai-biubiubiu/p/5933562.html

　　完結撒花