1. 程式人生 > >對display主要屬性的探究,以及vertical-aligin

對display主要屬性的探究,以及vertical-aligin

lln nbsp AD pad 沒有 com block ccf 圖片

display

首先要簡單說明一下display的主要3個主要屬性,分別為block,inline-block,inline,這裏只提及主要,關於其他的inherit,none等可以自行了解

  inline:不可定義寬高,內容決定位置

  inline-block:可定義寬高,內容決定位置

  block:可定義寬高,獨占一行

三種屬性都可以設定padding,margin但是識別空間各有不同

  block,上下會形成margin合並,取最大的margin值

  inline-block,它與block不會形成上下margin合並

  inline,它確實是可以設定margin和padding,但是但其進行排列的時候,只會識別它的左右margin+padding的空間,上下的margin和padding的空間會被忽視,具體如下

     首先,這是一個定義了margin+padding的inline,默認與inline-block進行文本對齊

     技術分享圖片

      這是取消inline-block後,可以發現其上方padding和margin被忽視

      技術分享圖片

      這是給其上下加了兩個block後,效果不言而喻

      技術分享圖片

以上均為個人摸索而來,如有不到請指正

vertical-aligin

關於vertical-aligin,個人實踐所得效果,它是用在inllne-block上的,但是並不控制inline-block,對其內部元素也沒有影響,而是控制和他相鄰的inline元素的對齊方式,例如:

如果一個inline-block前後有inline元素,我在inline-block上設定vertical-align: middle;就會出現以下效果

技術分享圖片

多余的請自行實驗,由於網上看到的對此寫的很多,這裏給大家簡單指明一下它的用法

也是個人探究得來,不到請指正

對display主要屬性的探究,以及vertical-aligin