内联元素如的长和宽是随着标签内的内容改变的,如果是空的就不会显示,一种方法可以用display:inline-block改变。但是发现我设置了定位为absolute之后,在设置长和宽就可以显示了,这是什么原因呢?
参见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
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。