内联元素使用绝对定位后,设置width和height后就可以显示了吗? -问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文

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

杨冬芳 2016-06-08 11:10:47 1495

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

分享到
取消 提交回答
全部回答(1)
  • 杨冬芳
    2019-07-17 19:31:27

    参见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

    0 0
云计算
使用钉钉扫一扫加入圈子
+ 订阅

时时分享云计算技术内容,助您降低 IT 成本,提升运维效率,使您更专注于核心业务创新。

推荐文章