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