對display主要屬性的探究,以及vertical-aligin
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