CSS3一些總結

1.標準流

2.浮動

1. 浮動的元素將脫離標準流
2. 浮動後的元素不會佔有原有的位置
3. 浮動有 左浮動 | 右浮動 | 不浮動
4. 浮動的元素不會浮出當前元素的父元素之外，即浮動元素的外邊緣不會超出其父元素的內邊緣。
5. 浮動元素之間不會重疊。
6. 沒有上下浮動
7. 設置浮動屬性後，display屬性將完全失效，元素將可以設置寬高，且不會獨佔一行。

1.清除浮動

在使用浮動之後，清除浮動是必不可少的。
語法：

clear: left | right | both

清除浮動的常用方式：

1. 結尾處添加空div標籤， clear: both。[或在下一個元素上加 clear: both]
2. 浮動元素的父級div 添加 overflow: hidden;
3. 浮動元素的父級定義寬高屬性。

3.定位

1.屬性值

1.relative[相對定位]

1. 以當前相對定位的元素 原有的位置 作爲參照物 移動指定的距離
2. 相對定位的元素移動後，原有的位置 仍然 會被佔用

2.absolute[絕對定位]

1. 絕對定位的元素移動後，原有的位置不會被佔用
2. 以其他定位的元素[默認值static不算]作爲參照物移動指定的距離
3. 視爲樹型結構，將當前絕對定位的元素作爲葉子節點向樹的根級查找最近且具有定位屬性的元素作爲參照物品，之後進行移動。若查找到根級仍然未找到，則以body作爲參照物。

3.fixed[固定定位]

1. 以當前瀏覽器窗口作爲參照物固定元素。頁面的滾動不會引起元素位置的變化。

4.static

1. 默認值，無任何意義。

2.z-index[堆疊順序]

1. 元素使用定位屬性後，元素之間可能會發生堆疊。
2. 可以使用z-index屬性調整元素之間的重疊順序
3. z-index屬性僅可以在使用了定位的元素上使用
4. 數值型，值越大越在前面，若爲負值，則表示越在後面。

4.display

CSS規範規定，每一個網頁元素都有一個display屬性，用於確定該元素的類型。例如div元素，默認display屬性值爲"block"，稱之爲"塊元素"，span元素的默認display屬性值爲"inline"，稱之爲"行內元素"。
塊元素與行元素之間是可以互相轉換的。
塊元素：具有寬高屬性，並且獨佔一行。
行元素：沒有寬高屬性，不會獨佔一行。
行內塊元素：具有寬高屬性，不會獨佔一行。
display常見屬性值

• none：隱藏對象
• inline：指定對象爲內聯元素(行內元素)
• block：指定對象爲塊元素
• inline-block：指定對象爲內聯塊元素
• table-cell：指定對象作爲表格單元格
• flex：彈性盒

5.盒子模型

盒子模型是css中一個重要的概念，通過理解盒子模型才能對頁面進行更好的排版。
W3C組織建議把網頁上的元素看成是一個一個的盒子。
盒子模型主要定義四個區域：內容（content）、內邊距（padding）、邊框（border）、外邊距（margin）
元素實際寬度 = 左右側外邊距 + 左右側邊框 + 內容聲明寬度 + 左右側內邊距

1.外邊距

圍繞在元素邊框周圍的空白區域

• 會在元素外創建額外的空白區域
• 外邊距是透明的
  語法

margin: value;

1.外邊距簡寫

margin: value;	/*四個方向相同*/
margin: value(上下) value(左右);
margin: value(上) value(左右) value(下);
margin: value(上) value(右) value(下) value(左);

2.外邊距合併

外邊距合併 形成一個外邊距

• 塊級元素的垂直相鄰的外邊距會合並
• 行內元素沒有外邊距。
• 浮動元素的外邊距不會合並
• 外邊距值可以設置爲負值，需要小心使用。

1.上下合併

當兩個塊狀元素上下排列，且都具有外邊距屬性，則上下以最大的外邊距距離進行合併。

2.包含合併

當一個塊狀元素包含一個塊狀元素，且都具有外邊距屬性，則外邊距會自動合併。
解決方案：爲父塊狀元素添加一個邊框屬性即可。

2.邊框

• 會擴大元素邊框所佔用的區域

邊框三要素：寬度、邊框樣式、顏色
語法

border: 1px solid red; /*簡寫*/
border-width: ; /*可選，邊框寬度，默認3像素*/
border-style: ; /*必選，邊框樣式，不寫則不顯示邊框*/
border-color: ; /*可選，邊框顏色，默認黑色*/

邊框樣式有五種常用樣式可選：

• dotted - 點狀
• solid - 實線
• double - 雙線（寬度最起碼設置爲3像素，否則顯示不下）
• dashed - 虛線
• none - 無邊框

3.內邊距

• 內容區域和邊框之間的空間
• 會擴大元素邊框所佔用的區域
  語法

padding: value;

值可以爲像素或者百分比，不可爲負數

1.內邊距簡寫

padding: value;	/*四個方向相同*/
padding: value(上下) value(左右);
padding: value(上) value(左右) value(下);
padding: value(上) value(右) value(下) value(左);

4.盒子模型

• 標準盒（W3C規範標準）

• 怪異盒（IE盒模型）
  通過Box-sizing切換盒子模型

• conteng-box（標準）
  padding和border不被包含在width和height內，元素的實際大小爲寬高+border+padding，此爲標準模式下的盒模型

• border-box（怪異）
  padding和border被包含在定義的width和height中，元素實際的大小爲你定義了多寬就是多寬。此屬性爲怪異模式下的盒模型。