position fixed脱离文档流吗_float脱离文档流和absolute脱离文档流的不同之处?说说盒子模型...

0f7f546dd47acd5322a23fb2ce03f140.png

什么叫元素脱离文档流?

元素从普通布局排版中“消失”了,其他盒子在定位的时候,会把脱离文档流的元素当做不存在来进行定位。

什么情况下元素会脱离文档流?

元素设置了float属性 或者元素的position定义为absolute;

float脱离文档流 和 absolute脱离文档流的不同之处?

float脱离文档流:其他盒子会无视这个元素,但文字会为其让出位置,环绕周围。其实这也是float的最初用途,只是被拿来当布局用了。

absolute脱离文档流:其他盒子和文字均会无视这个元素;

box-sizing的几种取值

box-sizing可以理解为选择定义盒子尺寸的模式

box-sizing的取值有 content-box、border-box、padding-box。

适用于一切有width、height属性的元素

content-box:width和height均指的是 内容 的宽度和高度(默认值)

padding-box:width和height值的是 内容+padding的宽度和高度

border-box:width和height指的是 内容+padding+border的宽度和高度

标准盒子模型指的是 content-box ,它的边界是内容区,只对内容区域有效。

a23fc4d67375258b8aedc8773effe89c.png

容器占据的空间大小为:

宽度 = width + paddingLeft + paddingRight + borderLeft + borderRight

高度 = height + paddingTop + paddingBottom + borderTop + borderBottom

IE盒子模型指的是 border-box ,它的边界是边框,对这个容器有效。

9f5229bf61a74ce8ac6cc0e5a1eaebd9.png

容器占据的空间大小为:

宽度 = width

高度 = height

欢迎关注。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值