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有效值進行計算；
－ 如果一個替換元素是一個區塊層級元素或表格儲存格中的唯一後代，那麼就會被放到基準上，例如p中的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權威指南》

- 僅作用於區塊層級元素的屬性

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有效值進行計算；
－ 如果一個替換元素是一個區塊層級元素或表格儲存格中的唯一後代，那麼就會被放到基準上，例如p中的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。