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