css屬性總結

- 僅做用於塊級元素的屬性

width，height（這倆可用於替換元素）

text—align， text—indent， vertical—align（也可用於表單元格和替換元素如input/img）

background-position(注意百分數和絕對值的區別，同時這個屬性會影響平鋪效果)

---

［基本視覺格式化］

1. 框模型：
－ background包括內容框、內邊距和邊框，外邊距一般是透明的，顯示父元素的背景；

2. 水平屬性：

－子元素的左（右）margin，左（右）padding，左（右）border和內容框width的值加起來必須等於父元素的內容框width；

－若是設置margin—left,margin-right,width（只有這三個值能夠設置爲auto）之中的兩個爲特定值，餘下的那個爲auto，則設置爲auto的屬性值會自動計算以填充父元素的width：

＊ 若是三個值都爲非auto的特定值（over constrained），那麼margin-right會被強制設置爲auto；
 ＊ 若是margin中某一個設置爲auto，另外一個設置特定值，width設置爲auto，則設置爲auto的margin會被置爲0；
 ＊ 若是width設置爲特定值，兩個margin設置爲auto，則會**水平居中**！！

－ 父元素的padding會跟子元素的margin疊加；

－ 非替換元素的默認寬度由其內容決定；爲替換元素設置width爲auto（如img），那麼其值將會是其原本的寬度；若是隻設置width，那麼height會等比例變化，反之亦然。

3. 垂直屬性：

與水平屬性相似，不一樣點／注意點：

－ 若是將margin-top或margin-bottom設置爲auto，則會被默認爲0，所以不能垂直居中囧，除非用特定值顯示設置；
－ 使用百分數設置子元素height時，若是沒有顯示設置父元素的height值，那麼子元素height會默認爲auto；
－ 若是父元素只包含子塊級元素，那麼父元素的height將不包含子元素的margin，除非父元素有border或padding！！爲何呢，由於垂直方向上的margin會重疊。由此看來，要避免重疊，就須要使用border和padding來說相鄰margin隔開哦；

行內元素：
－ line-height（行框高度）對於替換元素而言，就是其內容的高度。所以替換元素無行間距（line-height － font-size）；對於非替換元素而言，是其內容框高度加上行間距;
－ 對於只包含文本的行，能改變其行間距離的只有line-height, font-size, vertical-align。

非替換元素：

－ 當line-height值小於font-size時可能會產生文本重疊，爲避免此現象可設置line-height爲1 em（需設置font-size）或1（根據font-size的縮放因子），此外它會繼承父元素的計算值而不是字面值，除非顯式定義；

－ 行內元素的內邊距、外邊距和邊框都不會影響行高。其中外邊距只有左右有效，上下無效；但若有正的內邊距且有背景，則有可能覆蓋鄰行（仍不影響行高和佈局，就是說設置了內邊距行高也不會變高）；

替換元素：

－ 行內元素的內邊距、外邊距和邊框會影響行高，且上下margin有效。
－ 爲img設置一個height值，會影響行高，但其line-height的有效值不會改變，有些屬性例如vertical-align仍然是使用line-height有效值進行計算；
－ 若是一個替換元素是一個塊級元素或表格單元格中的惟一後代，那麼就會被放到基線上，例如div中的img。解決方法：使用負margin將其往下拉或者設置display爲block來避免生成行框。

4. 其餘

－ display屬性：

* 設置元素display屬性爲inline-block時， 其表現相似行內替換元素；若是沒有顯式定義width，則它會自動收縮以適應內容寬度，也就是說會使其寬度恰好能包含全部內容且沒有多餘；
   * 設置元素display屬性爲run-in，表示若是該元素後面是一個display爲block的元素，則該元素表現爲行內元素放在後面那個元素的開頭，不然其自己將顯示爲塊級元素。
   * 對於浮動或絕對定位元素，計算值與聲明值可能不一樣。除inline-table以外大部分聲明值（包括inline，inline-block，run-in）都會被計算爲block。

---

［border、margin、padding］

1. margin
   － 若是使用百分數，則計算值是相對於父元素的width值（not height）而言。哪怕是margin-top也是！

2. border
   － 不指定的值會使用默認值, e.x.:

   { border: solid 1px dotted;
     border: 1px;
   }

   此處第二條border設置會覆蓋第一條，因爲在第二條中沒有設置border-style，默認爲none，因此將不會有border；

---

［浮動和定位］

浮動：

1. 浮動元素的margin不會合並；

2. 假設要使一個非替換元素浮動，須要爲其指定一個width，不然會按瀏覽器規定的最小width浮動；

3. 浮動元素會生成一個塊級框，而不論這個元素自己是什麼；

4. 浮動元素的頂端不能比其父元素或以前全部浮動元素的頂端更高；

5. 當浮動元素與文檔流中的元素重疊時：
   （1）若是是塊級元素，則其內容會在浮動元素之上，而邊框和背景則在之下；
   （2）若是是行內元素，則其內容、邊框和背景都在浮動元素之上，即不會被覆蓋。
   這與元素出如今文檔流中的前後順序無關。

6. 浮動元素必須包含其全部的浮動子元素；

7. 使用clear屬性清除浮動時，例如clear: left，其實是爲設置clear屬性的元素增長margin-top。所以，有可能即便該元素設置了margin-top，也會與浮動元素牢牢相連，除非margin-top的值足夠大。要使二者之間有間隔，能夠設置浮動元素的margin-bottom。

   定位：

8. 絕對定位

   *若是父元素是塊級元素且position的值爲非static，則子元素absolute定位是其外邊距外界相對於父元素的邊框界定區域定位；
   *經過指定top, bottom, left, right的值，能夠隱式指定元素的寬高；
   *除bottom外被設置成auto的屬性，會默認與元素靜態位置的對應值一致；
   *水平／垂直方向上，當元素過分受限時（left和right的值以及元素水平方向的各尺寸之和不等於父元素width），會忽略right／bottom的值。若是有設置爲auto的屬性，則改變其值來知足前等式，若是兩個則平分，因此能夠用來作居中（margin設爲auto，其餘值均爲0）！
   *假設一個元素有設置z-index值，那麼其全部子元素都是相對於這個疊放上下文來放置，而且css2.1中規定全部元素絕對不能放在其疊放上下文的背景之下，但能夠在其內容之下；

9. 固定定位
   *right的值老是等於－left，bottom的值老是等於－top。

持續更新中。。。。。

本文參考 《css權威指南》