CSS vertical aglin屬性基本應用

2021-07-10 18:29:50 字數 1236 閱讀 9692

1.1定義:vertical-align 屬性設定元素的垂直對齊方式。

1.2相容性:所有瀏覽器都支援 vertical-align 屬性。

注釋:任何的版本的 internet explorer (包括 ie8)都不支援屬性值 「inherit」。

1.4具體可以參考w3school

2.1首先看圖(有錯別字求忽略)

首先要知道vertical-aglin對block塊級元素不起作用。

上圖除了父級是div ,其餘均為span元素。

從圖中可以看到 黑色的邊框,這裡我們需要建立乙個inline-box的概念——包含同一行的元素的盒子。盒子的高度取決於行元素的大小。

對應關係分別是:

盒子的中線——middle

盒子的頂部——vertical-align:top

盒子的底部——vertical-align:bottom

父級文字的頂部——vertical-align:text-top

父級文字的底部——vertical-align:text-bottom

預設:middle

2.2其實內聯元素也是乙個道理。新增一張看看。

這裡需要注意的是:vertical-align只對同一行的內聯元素起作用!!。

那麼換行了會怎麼樣呢,看圖

2.3 如果沒有父級文字呢?

text-top/text-bottom 的位置和 父級的文字font-size有關。可以假設有font-size:?px大小的文字(只是看不見)。然後還是同樣的道理,帶入inline-box的概念。

個人還是不是很懂這個屬性,涉略很淺。這裡是對平時文字對齊使用的總結。有興趣的可以看張鑫旭的我對css vertical-align的一些理解與認識。篇幅有點長,請耐心看完。這篇文章主要是為自己以後溫習做乙個小鋪墊,有錯誤還請指正。

transform 三個屬性的基本應用

transform translate 偏移自身的屬性 寬和高 不會影響其他元素的位置。transform translate x,y transform rotate 單位為deg 順時針旋轉 逆時針旋轉 可以加hover效果,通過transtion 過度 屬性演示動畫。transform ori...

SIP基本應用

sip基本應用 sip 協議作為 voip 通訊的主要協議之一,以起簡單,靈活,開放性而逐漸在 voip 通訊領域內佔據主導地位。使用 sip通訊的主要方式如下圖,主要裝置有 sip終端,定向伺服器,位置伺服器,pstn 閘道器等裝置。sip協議發展的目前,最新標準為 rfc3261 主要的網路裝置...

CGI 基本應用

gdi graphics device inte ce plus也就是圖形裝置介面,提供了各種豐富的圖形影象處理功能 在c net中,使用gdi 處理二維 2d 的圖形和影象,使用directx處理三維 3d 的圖形影象,圖形影象處理用到的主要命名空間 是system drawing 提供了對gdi...