【CSS篇】inline block和block的区别

stonezhu 发布于2019-08-30 15:53 / 2080人阅读

摘要：如图所示小薇学院任务六，模拟报纸排版中需实现如下效果开始我是用将两个单词分别包裹，设置来实现下划线的，可是当我企图用的伪元素将首字母选中调整其字体大小时发现，用根本无法选中首字母，样式不生效，后查看示例时发现其是放在标签下的，故我想其

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

服务器托管混合云 inline_block inline-block inline_block间隙 blocked

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116598.html

前端入门-day2（常见css问题及解答）

摘要：写在前面今天是入门前端的小伙伴们应该已经看了一些的基础和的基础了，是不是遇到了很多关于的问题呢。因为很少有太复杂的问题，所以直接写一篇关于的常见问题及解答啦和的区别简单来说不会再占据空间，就跟不存在一样。 showImg(https://segmentfault.com/img/remote/1460000016762552); 写在前面今天是入门前端的day2, 小伙伴们应该已经看...

tuantuan 2019-08-29 17:02 评论0 收藏0
css基础知识整理篇

摘要：折叠后的计算参与折叠的都是正值在都是正数的情况下，取其中较大的值为最终值。参与折叠的中有正值，有负值有正有负，先取出负中绝对值中最大的，然后，和正值中最大的相加。单冒号用于伪类，双冒号用于伪元素。转自某个大神整理的面试题盒子模型标准盒子模型内容（content）+ 填充（padding）+ 边界（margin）+ 边框（border）; 低版本IE盒子模型 content部分把...

QiShare 2019-08-29 11:24 评论0 收藏0
重拾css(5)——浏览器默认样式

摘要：而依然有效的原因是浏览器默认样式的优先级低于外联内部样式。例如第二，浏览器默认样式还为设置了，这个值是对英文比较友好，中文状态下就显得有点拥挤。上一节介绍了样式的五种来源，咱们再通过一张图回顾一下。 showImg(https://segmentfault.com/img/bVM2Rk?w=536&h=245); 对于上面的三层，咱们大概都比较熟悉了。下面的两层中，用户自定义样式一般...

guqiu 2019-08-29 12:45 评论0 收藏0
《CSS世界》笔记三：内联元素与对齐

摘要：上一篇世界笔记二盒模型四大家族下一篇世界笔记四流的保护与破坏写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的，而头疼不已。上一篇：《CSS世界》笔记二：盒模型四大家族下一篇：《CSS世界》笔记四：流的保护与破坏写在前面在页面布局中，内联元素的垂直对齐是比较常见和基础的布局需求，但是我们往往会因为垂直对齐中的1px，2px而头疼不已...

HtmlCssJs 2019-08-29 16:19 评论0 收藏0
CSS基础篇--你知道的display的值有多少？用了多少？

摘要：与属性的值不同，其不为被隐藏的对象保留其物理空间指定对象为内联元素。指定对象作为块元素级的表格。类同于标签指定对象作为表格行组。伸缩盒过渡版本将对象作为弹性伸缩盒显示。伸缩盒最新版本新增属性可能存在描述错误及变更，仅供参考。它的语法如下： display：none | inline | block | list-item | inline-block | table | inline...

wangdai 2019-08-28 18:17 评论0 收藏0