display,position和float之间的关系(Relationships between 'display', 'position ',and 'float ')

三个影响盒子构建和布局的元素——‘display’,‘position’ 和 ‘float’——相互影响如下:
1、如果‘display’ 取 ’none‘ 值,那么’position‘ 和 ’float‘ 的设置都不会应用。在这种情况下,元素不构建盒子(不显示)
2、否则,如果 ’postion‘ 取值为 ’absolute‘ 或者 ’fixed‘ ,那么该盒子就被放在绝对位置上了,计算出的 ’float‘ 值为 ’none‘ ,’display‘ 的计算取值根据下面的表格进行设置。这个盒子的定位由 ’top‘,’right‘,’bottom‘ 和 ’left‘ 属性值和这个盒子的包含块所决定。
3、否则,如果 ’float‘ 有一个非 ’none‘ 的值,那么这个盒子就浮动起来了,‘display’ 属性会根据下面这个表格进行设置。
4、否则,如果这个元素是根元素,’display‘ 属性会根据下面这个表格进行设置,除非这个具体display值是接下来这种情况。一个 ‘display’ 取值为 ‘list-item’,这个取值最终为计算值 ’block‘ 还是就是原值(’list-item‘)不变? 这个在CSS2.1中无定义。
5、否则,剩下的 ’display‘ 属性值就为大家指定的值。

具体设置的值计算出来的值
inline-tabletable
inline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-blockblock
others和具体值一样
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值