前端初學--"html"中的種"display"
這里是廢話
剛畢業(yè)面試前端的時候,被人各種刁難!!!!fuck!!!!
記得一個面試的人問我.請詳細說明display的所有屬性,與他們的特征,還有不同!!
當時心中一萬只泥馬飛過.最后的結(jié)局已經(jīng)可想而知.我成功的被pass了!!從此我立志要成為了一個面試管.然后去坑別人.
display的概念
先引用一下 w3c 中對display 的表述
display 屬性 設(shè)置元素如何顯示.---w3cSchool
在常用的前端布局中有display有三個屬性會經(jīng)常被用到[inline]","block","inline-block"
display:inline屬性
- inline元素不會獨占一行，多個相鄰的行內(nèi)元素會排列在同一行里，直到一行排列不下，才會新?lián)Q一行，其寬度隨元素的內(nèi)容而變化。
-
inline元素設(shè)置width,height屬性無效.
width/height效果圖 -
inline元素的margin和padding屬性,部份失效,圖中紅色線條代表失效.
*padding/margin 的特性*
最操蛋的地方:雖然在html中padding-(top/bottom),margin-(top/bottom)是無效的,但是效果中會出現(xiàn)以下這種情況.在gif中可以看出.所謂的padding/margin 上下部份依然生效,不過這種效果,通常卻不是我們想要的.
操蛋的margin/padding
display:block屬性
- block元素會獨占一行.無論后邊跟著的是什么.block(塊)就是要單獨一行.天王老子我最大.默認情況下，block元素寬度自動填滿其父元素寬度。
- block元素可以設(shè)置width,height屬性。塊級元素即使設(shè)置了寬度,仍然是獨占一行。
-
block元素可以設(shè)置margin和padding屬性
示例
沒寫完呢
先寫到這.再反省反省,然后再得瑟.
