>웹 프론트엔드 >HTML 튜토리얼 >CSS中display/float/position属性值的相互影响_html/css_WEB-ITnose

CSS中display/float/position属性值的相互影响_html/css_WEB-ITnose

WBOY
WBOY원래의
2016-06-24 11:26:141214검색

有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是CSS3弹性布局模块引入的新属性值。


参考链接:

1. https://www.w3.org/TR/css3-flexbox/#flex-containers

2. https://www.w3.org/TR/CSS2/visuren.html#dis-pos-flo


by iefreer

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.