CSS的两种盒模型

博客介绍了W3C盒模型(正常盒模型)和IE盒模型(怪异盒模型)。W3C盒模型中,padding和border加在盒子外会撑大盒子;IE盒模型可理解为固定宽高,padding和border加在盒子里面。还给出了两种盒模型宽高的计算方式。

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


通过学习,我现在的理解是
盒模型就是盒子包裹HTML元素,四个属性从内到外分别是,content(内容),padding(内填充),border(边框),margin(外边距)
用一个例子来说明
设一个类名为box的盒子固定宽高 width:100px hight:100px
边框为1px 实线 黑色 border : 1px solid black
内填充 padding:10px
外边距 margin:50px

1.W3C盒模型(正常的盒模型)

box-sizing: content-box
此刻类名为box盒子
宽 width=122px
高 hight=122px
此刻盒子的宽 width=content(100px)+左右padding(2 x 10px = 20px)+ 左右border(2 x 1px = 2px)
盒子的高同理
padding和border加在了盒子外(可以撑大盒子)
具体盒模型的则还需要加上margin的值

2.IE盒模型(怪异盒模型)

box-sizing:border-box
此刻类名为box盒子
宽 width=100px
高 hight=100px
此刻盒子的宽 width= content(78px) + 左右padding(20px)+ 左右border(2px)
盒子的高同理
“可理解成固定了宽高” padding和border是加在了盒子里面
具体盒模型的则还需要加上margin的值

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值