【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的元素会既具有宽高属性，又具有同行特性