【CSS篇】inline block和block的区别

1.如图所示IFE(小薇学院)任务六,模拟报纸排版中需实现如下效果

《【CSS篇】inline block和block的区别》

开始我是用span将两个单词分别包裹,设置border-bottom来实现下划线的,可是当我企图用CSS3的伪元素first-letter将首字母选中调整其字体大小时发现,用span:first-letter根本无法选中首字母,样式不生效,后查看W3C示例时发现其是放在p标签下的,故我想其可能是只对块级元素包裹的文本才生效,故我对span用了display:block,可是问题来了,虽然首字母能够选中调整字体,可是span元素变得和父元素一样宽了,当我加上下边框时其就变成了如下模样:

《【CSS篇】inline block和block的区别》

心痛,无奈之余我试了试将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的元素会既具有宽高属性,又具有同行特性
    
    原文作者:张爱玲
    原文地址: https://segmentfault.com/a/1190000008633111
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞