Css細節總結

盒子模型（box-model）box-sizing

所謂盒子模型（Box Model）就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器。每個矩形都由元素的內容(content)、內邊距（padding）、邊框（border）和外邊距（margin）組成。

所有的文件元素（標籤）都會生成一個矩形框，我們成為元素框（element box），它描述了一個文件元素再網頁佈局彙總所佔的位置大小。因此，每個盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置。

盒子模型特性：

• • 　每個盒子都有：邊界、邊框、填充、內容 4個屬性；
  • 每個屬性都包括4個部分：上、右、下、左。屬性的4部分可以同時設定，也可以分別設定。

盒子模型常用的兩個大類：content-box border-box

• content-box

瀏覽器預設的盒子模型為 content-box，以盒子中的內容的寬高為基準，最總盒子的總體的寬高還需要加上padding、border的值

• border-box

寬高的計算以border為基準，定義後的寬高，就是最總盒子的寬高，其寬高已經包括了padding值和border的值。

在專案中為了更好的相容低版本的瀏覽器，在設定box-sizing:border-box,需要設定加上瀏覽器的字首

div{
	box-sizing:border-box;
    -moz-box-sizing:border-box;/*firefox*/
    -webkit-bobx-sizing:border-box;/*chrome*/
    -ms-box-sizing:border-box;/*IE8以下*/
    -o-box-sizing:border-box;/*opera*/
}
 

定位 （position）

語法格式：

選擇器{ position ：屬性值 }

屬性值：

1. static（靜態）

2. absolute （絕對定位）

3. relative （相對定位）

4. fixed (固定定位)

注意：

1. 在靜態定位狀態下，無法通過邊偏移屬性（top、bottom、left或right）來改變元素的位置。

2. 進行相對定位的元素，進行位置的偏移做出調整時，發生的偏移量的操作是相對於自身原來在文件流中的位置進行定位的，它的改變不會影響到其他元素的位置改變，進行相對定位的元素不會脫離文件流，佔有位置。

3. 絕對定位的元素，相對於其父級元素中相離該元素最近的一個定位的父元素進行定位（static除外），進行絕對定位的元素，會脫標，，不在佔據位置空間，其後面的塊級元素會直接推移佔據他原來的位置，行內和行內塊級元素會自動和避開絕對定位的元素。

4. 固定定位的元素，也會脫標，不佔據位置

5. 定位模式的轉化：當一個行內元素，行內塊級元素，塊級元素，進行absolute 、 fixed 、float 操作後都會隱式的改變成行內塊級元素（inline-block）及可以設定寬高