【CSS篇】inline block和block的區(qū)別

stonezhu 發(fā)布于2019-08-30 15:53 / 2242人閱讀

摘要：如圖所示小薇學(xué)院任務(wù)六，模擬報(bào)紙排版中需實(shí)現(xiàn)如下效果開始我是用將兩個(gè)單詞分別包裹，設(shè)置來實(shí)現(xiàn)下劃線的，可是當(dāng)我企圖用的偽元素將首字母選中調(diào)整其字體大小時(shí)發(fā)現(xiàn)，用根本無法選中首字母，樣式不生效，后查看示例時(shí)發(fā)現(xiàn)其是放在標(biāo)簽下的，故我想其

1.如圖所示IFE(小薇學(xué)院)任務(wù)六，模擬報(bào)紙排版中需實(shí)現(xiàn)如下效果

開始我是用span將兩個(gè)單詞分別包裹，設(shè)置border-bottom來實(shí)現(xiàn)下劃線的，可是當(dāng)我企圖用CSS3的偽元素first-letter將首字母選中調(diào)整其字體大小時(shí)發(fā)現(xiàn)，用span:first-letter根本無法選中首字母，樣式不生效，后查看W3C示例時(shí)發(fā)現(xiàn)其是放在p標(biāo)簽下的，故我想其可能是只對(duì)塊級(jí)元素包裹的文本才生效，故我對(duì)span用了display:block,可是問題來了，雖然首字母能夠選中調(diào)整字體，可是span元素變得和父元素一樣寬了,當(dāng)我加上下邊框時(shí)其就變成了如下模樣：

心痛,無奈之余我試了試將block改為inline-block然后奇跡就發(fā)生了,span元素的寬度既是被文本撐開的，首字母也能選中，簡(jiǎn)直不能再開森！
于是詳細(xì)查了下diaplay的常用屬性inline,block,inline-block的區(qū)別：

display:block

1.block元素會(huì)獨(dú)占一行，默認(rèn)情況下其寬度自動(dòng)填滿其父元素的寬度
2.block元素可以設(shè)置width,height屬性
3.block元素可以設(shè)置margin的padding屬性

display:inline

1.inline元素不會(huì)獨(dú)占一行,多個(gè)相鄰元素會(huì)排列在同一行，直到排滿換行,其寬度隨元素內(nèi)容而變化
2.inline元素設(shè)置width,height屬性無效
3.inline元素的margin和padding屬性都只有水平方向上的起效果

diaplay:inline-block

1.將對(duì)象呈現(xiàn)為inline對(duì)象，故其寬度能由內(nèi)容撐開
2.但是將對(duì)象的內(nèi)容作為block對(duì)象呈現(xiàn),故可以用偽元素first-letter將首字母選中
3.故被設(shè)置為inline-block的元素會(huì)既具有寬高屬性，又具有同行特性