一段放松的YY后,進(jìn)入正題。上個(gè)月21號(hào),有位同行留言想讓我講講vertical-align屬性,我其實(shí)對(duì)vertical-align屬性也是略知皮毛,要說(shuō)豈敢談“講解”,就說(shuō)說(shuō)我對(duì)vertical-align屬性的一些理解吧,純屬個(gè)人見(jiàn)解,若有不準(zhǔn)確之處還望見(jiàn)諒。還有,vertical-align屬性牽扯到的知識(shí)實(shí)在是太多了,不是一篇文章就可以講清楚的,這里我就只挑幾個(gè)典型或是重要的地方說(shuō)一說(shuō)。
在開(kāi)始之前,希望對(duì)下面的知識(shí)有所了解,inline box模型,inline/inline-block/block屬性。//zxx:關(guān)于inline box模型,我在“浮動(dòng)的’破壞性’”部分做了專(zhuān)門(mén)的介紹。
二、vertical-align一大堆亂七八糟的屬性
vertical-align指的是什么意思呢?我window+D清屏,雙擊打開(kāi)有道桌面詞典,輸入vertical,再輸入align,“哦~~~~”,我腦袋一晃,原來(lái)是“垂直的”+“對(duì)齊”的意思,就是垂直對(duì)齊嘛!
中,就是垂直對(duì)齊的意思,先放一邊,我看先看看vertical-align支持哪些屬性,我比較喜歡輕巧的Dreamweaver,看看他的提示屬性又哪些:
有句俗語(yǔ)叫做“見(jiàn)多不怪”,我估摸著這些top,bottom屬性大家都見(jiàn)過(guò),沒(méi)啥看頭,沒(méi)啥說(shuō)頭。老實(shí)講,我看到這些養(yǎng)臭蟲(chóng)的屬性也頭疼,所以,忘了他們,我們說(shuō)點(diǎn)有意思的。vertical-align屬性與數(shù)值。見(jiàn)下面的表:
值 | 描述 |
---|---|
數(shù)值 | 上下的高度值,支持負(fù)值 |
百分值 – % | 上下的高度值,百分大小相對(duì)于”line-height”屬性 |
baseline | 默認(rèn)。元素放置在父元素的基線上。 |
sub | 下標(biāo)對(duì)齊 |
super | 上標(biāo)對(duì)齊 |
top | 把元素的頂端與行中最高元素的頂端對(duì)齊 |
text-top | 把元素的頂端與父元素字體的頂端對(duì)齊 |
middle | 父元素中線對(duì)齊 |
bottom | 把元素的頂端與行中最低的元素的頂端對(duì)齊。 |
text-bottom | 父元素文字底部對(duì)齊 |
inherit | 繼承父元素 |
1. 首先關(guān)于數(shù)值,見(jiàn)下面的示例:
新聞熱點(diǎn)
疑難解答
圖片精選