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

Question

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

Answer 1

设置了absolute之后相当与给span设置了 display: inline-block;

可以看看张大大的这篇文章
https://www.zhangxinxu.com/wo...

Answer 2

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

Answer 3

呃，确实牵扯到标准规范，具体什么原因就是楼上所提的 " 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-block，table-cells 和 table-captions 的非块级元素

如果你还好奇什么是 W3C 可以看这里 👉万维网联盟_百度百科

通俗易懂的话，还是张鑫旭大佬的文章CSS 相对|绝对(relative/absolute)定位系列（一）看起来舒服多，啃 W3C 规范有点没必要🤭

---

已参与了 SegmentFault 思否「问答」打卡，欢迎正在阅读的你也加入。