【CSS篇】inline block和block的區別

1.如圖所示IFE(小薇學院)任務六，模擬報紙排版中需實現以下效果

開始我是用span將兩個單詞分別包裹，設置border-bottom來實現下劃線的，但是當我企圖用CSS3的僞元素first-letter將首字母選中調整其字體大小時發現，用span:first-letter根本沒法選中首字母，樣式不生效，後查看W3C示例時發現其是放在p標籤下的，故我想其多是隻對塊級元素包裹的文本才生效，故我對span用了display:block,但是問題來了，雖然首字母可以選中調整字體，但是span元素變得和父元素同樣寬了,當我加上下邊框時其就變成了以下模樣：

心痛,無奈之餘我試了試將block改成inline-block而後奇蹟就發生了,span元素的寬度既是被文本撐開的，首字母也能選中，簡直不能再開森！
因而詳細查了下diaplay的經常使用屬性inline,block,inline-block的區別：

• display:block

  1.block元素會獨佔一行，默認狀況下其寬度自動填滿其父元素的寬度
  2.block元素能夠設置width,height屬性
  3.block元素能夠設置margin的padding屬性

• display:inline

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

• diaplay:inline-block

  1.將對象呈現爲inline對象，故其寬度能由內容撐開
  2.可是將對象的內容做爲block對象呈現,故能夠用僞元素first-letter將首字母選中
  3.故被設置爲inline-block的元素會既具備寬高屬性，又具備同行特性