盒模型及BFC

博客介绍了两种盒子模型,即W3C和IE盒子模型,阐述了盒模型由内容、外边距、内边距和边框组成,以及二者在宽度定义上的区别。还介绍了BFC(块级格式化上下文),它类似密闭盒子,内部元素不受外部影响,并说明了创建BFC的几种方式。

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

盒子模型有两种,W3C(标注模型)和IE盒子模型

盒模型是描述DOM位置的一种模型,他由content(内容)、padding(外边距)、margin(内边距)、border(边框)组成。

W3C盒子模型和IE盒子模型的主要区别在于:

W3C定义的盒子的宽度width = content(内容)的宽度;

IE盒子模型定义的盒子元素宽度width = content + border + padding

BFC:(块级格式化上下文)

从样式上看,具有 BFC的元素与普通的容器没有什么区别, 
从功能上看,BFC相当于构建了一个密闭的盒子模型,

在BFC中的元素不受外部元素的影响。

如何创建一个BFC:

1:float为left或right

2:overflow为hidden、auto、scorll(非visibility)

3:display:inline-block / tabl-cell / table-caption(行内元素或表格元素)

4:position:absolute / fixed(绝对定位元素)

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值