内联元素使用绝对定位后，设置width和height后就可以显示了吗？

Question

内联元素如<span>的长和宽是随着标签内的内容改变的，如果是空的就不会显示，一种方法可以用display:inline-block改变。但是发现我设置了定位为absolute之后，在设置长和宽就可以显示了，这是什么原因呢？

Answer 1

我了个去，还有这样的规范要求~~

参见CSS2.1规范的9.7
https://www.w3.org/TR/2009/CR-CSS2-20090908/visuren.html#dis-pos-flo

9.7 Relationships between 'display', 'position', and 'float'

The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:

If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.
Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.
Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.
Otherwise, if the element is the root element, 'display' is set according to the table below.
Otherwise, the remaining 'display' property values apply as specified.

Specified value	Computed value
inline-table	table
inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
others	same as specified

==>

display,position和float属性都能影响元素的显示及其位置，它们之间会相互影响:

1. 如果display属性被显式的设置为none，那么position和float属性无论设置什么值或是否设置，都不起作用，页面上将将看不到元素

2. 如上面条件1不满足，但position属性设置为absolute和fixed，元素将被绝对定位，那么float属性将被设置为none，无论其被显式的设置为什么值。display属性值将被重新计算，计算规则如下表所示，元素的位置将由相对于元素包含块的top，left，bottom，left值决定

3. 如上面条件2不满足，但position属性设置为非absoulte、fixed，为relative、static或没有设置，那么看float属性的设置，如果float值为非none值，为left，right等，那么元素将被浮动，float不会被重新计算，top，left等值能起作用（如果设置过得话），display属性将被重新计算，计算规则如下表所示

4. 如上面条件3不满足，（display属性没有设置，position属性保持默认，float属性也没设置）但是这个元素为一个根元素（一般为body），那么display属性将被重新计算，计算规则如下表所示

5. 其它情况下，display属性保持指定值不变

position/float/display关系表

N/A	position:absolut,fixed	position:relative,satic	float:none	float:left,right...
position:absolut,fixed	N/A	N/A	元素不显示	等同float为none
position:relative,satic	N/A	N/A	元素不显示	按下表所示计算
float:none	按下表所示计算	保持不变	N/A	N/A
float:left,right....	等同float为none	按下表所示计算	N/A	N/A

display计算规则

Specified value	Computed value
inline-table	table
inline, run-in, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-block	block
others	same as specified