position跟display、margin collapse、overflow、float这些特性相互叠加

本文探讨了CSS中'display'、'position'、'float'等属性间的相互作用及如何影响元素布局,并深入解析了不同条件下外边距折叠(margin collapsing)的行为。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、'display'、'position' 和 'float' 的相互关系

1. 'display' 的值为 'none'

如果 'display' 的值为 'none',那么 'position' 和 'float' 不起作用。在这种情况下,元素不产生框。因此浮动和定位无效。
2. 'position' 的值是 'absolute' 或 'fixed'
否则,如果 'position' 的值是 'absolute' 或 'fixed',框就是绝对定位的,'float' 计算后的值应该是 'none',并且,'display' 会被按照上表设置。 框的位置将由 'top','right','bottom' 和 'left' 属性和该框的包含块确定。
也就是说,当元素是绝对定位时,浮动失效,'display' 会被按规则重置。
3. 'float' 的值不是 "none"。
按照规则,SPAN 是行内元素,因此不能够设置其宽度和高度。但是浮动后,'display' 值按照转换对应表设置后,成为块级元素
4. 元素是根元素
如果元素是根元素,'display' 的值按照转换对应表设置。

5. 否则,应用指定的 'display' 特性值。

二、position跟display、overflow、float下的margin collapse。

margin collapse我觉得这里的意思应该是Collapsing margins,即外边距折叠,指的是毗邻的两个或多个外边距 (margin) 会合并成一个外边距。
其中所说的 margin 毗邻,可以归结为以下两点:
•这两个或多个外边距没有被非空内容、padding、border 或 clear 分隔开。
•这些 margin 都处于普通流中。
1.两个或多个毗邻的普通流中的块元素垂直方向上的 margin 会折叠。

2.浮动元素、inline-block 元素、绝对定位元素的 margin 不会和垂直方向上其他元素的 margin 折叠.

3.创建了块级格式化上下文的元素,不和它的子元素发生 margin 折叠

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值