浅谈CSS中display/float/position属性值的相互影响

有3个属性和布局以及box的创建有关:display, position 和 float,彼此交互作用如下:

如果display值为none,则position 和 float无作用。这种情况下,不生成box。

否则,

如果position值为absolute 或 fixed, box被绝对定位,float的计算值为none,而display的值按下表设定。box的位置将由top, right, bottom 和 left 属性及其包容块所确定。

否则,

如果float的值不是none, box是浮动的并且display的值按下表设定。

否则,

如果元素为根元素,display的值按下表设定(除了list-item指定值,该值被计算为block还是list-item,在CSS2.1中未定义。)

否则,

其余情况下display属性值就是其指定的值。

其中inline-flex和flex是CSS3弹性布局模块引入的新属性值。

概括而言,绝对定位、弹性布局和网格布局容器的内容项的display属性会被块级化(blockified)。

以上这篇浅谈CSS中display/float/position属性值的相互影响就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

浅谈CSS中display/float/position属性值的相互影响