为什么 span 元素绝对定位之后设置 width height 就可以生效?

发布于 2022-09-12 23:28:42 字数 196 浏览 41 评论 0

如题。
目前知道 span 绝对定位之后 display 会变为 block,但是不知道更深层次的原因,不清楚是不是标准里面规定的。
补充一个示例,span 绝对定位之后再 chrome 中查看计算后的样式↓。
image.png

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

聊慰 2022-09-19 23:28:42

设置了absolute之后相当与给span设置了 display: inline-block;
image.png
可以看看张大大的这篇文章
https://www.zhangxinxu.com/wo...

眼眸 2022-09-19 23:28:42

css 权威指南中对绝对定位特性描述了其中2点特性
1、绝对定位的元素从文档流中脱离;
2、元素绝对定位后,生成一个块级框,所以可是设置width 和height

大姐,你呐 2022-09-19 23:28:42

呃,确实牵扯到标准规范,具体什么原因就是楼上所提的 " inline-block 化 "

我看你想看具体的文档了解具体因为什么,我给你一个 W3 的规范文档吧, Visual formatting model - W3.org

9.4.1块格式化上下文 部分当中提到:

Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (except when that value has been propagated to the viewport) establish new block formatting contexts for their contents.

大概就是说,浮动和绝对定位的元素,是类似于 inline-blocktable-cellstable-captions 的非块级元素

如果你还好奇什么是 W3C 可以看这里

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文