CSS部分屬性的深入學習

標籤：水平   href   zhang   http   png   指定   idt   預設   ext   

先上個張鑫旭大神的政治課，來個一棒打醒(手動滑稽)； 說說CSS學習中的瓶頸；雖然自己水平不高，但是對於重構這方面工作一直不怎麼喜歡，可能覺得比較沒有新意，但是看了大神文章突然有點一棍打醒的感覺，突然覺得自己的CSS水平好爛。。。。  一、vertical-align①、觸發元素：行元素、設定有display:inline/display:inline-block的元素、表單元素(display:table-cell);                        雖然vertical-align屬性只會在inline-block水平的元素上期作用，但是其影響到的元素涉及到inline屬性的元素，這裡千萬記住，inline水平元素受vertical-align屬性而位置改變等不是因為其對                         vertical-align屬性敏感或起作用，而是受制於整個line box的變化而不得不變化的，這個後面會較為深入的分析。        
②、取值：    來源： http://www.zhangxinxu.com/wordpress/2010/05/%e6%88%91%e5%af%b9css-vertical-align%e7%9a%84%e4%b8%80%e4%ba%9b%e7%90%86%e8%a7%a3%e4%b8%8e%e8%ae%a4%e8%af%86%ef%bc%88%e4%b8%80%ef%bc%89/

值	描述
長度	通過距離升高（正值）或降低（負值）元素。‘0cm‘等同於‘baseline‘
百分值 – %	通過距離（相對於1line-height1值的百分大小）升高（正值）或降低（負值）元素。‘0%‘等同於‘baseline‘
baseline	預設。元素的基準與父元素的基準對齊。
sub	降低元素的基準到父元素合適的下標位置。
super	升高元素的基準到父元素合適的上標位置。
top	把對齊的子項目的頂端與line box頂端對齊。
text-top	把元素的頂端與父元素內容地區的頂端對齊。
middle	元素的中垂點與 父元素的基準加1/2父元素中字母x的高度 對齊。
bottom	把對齊的子項目的底端與line box底端對齊。
text-bottom	把元素的底端與父元素內容地區的底端對齊。
inherit	採用父元素相關屬性的相同的指定值。

    常用的值有：top、middle、bottm、數值、百分比；    註：數值和百分比為正值時，只會把文本下方展開，不會將文本往下擠；如果為負值時，會將文本往下方擠去；    百分比是相對於此標籤繼承的line-height值決定的。
    　　　　　　 ③、vertical-align無效原因：是否滿足①中的觸發元素要求，對於塊元素中的inline-block元素，需要使用line-height屬性來讓vertical-align有參照目標；其他詳細內容、相容等請參考大神文章：我對CSS vertical-align的一些理解與認識（一）、CSS vertical-align的深入理解(二)之text-top篇、CSS深入理解vertical-align和line-height的基友關係   

 

CSS部分屬性的深入學習