css盒模型(W3C标准盒模型、IE怪异盒模型、box-sizing)

本文介绍了CSS盒模型的两种主要类型:W3C标准盒模型,其中width和height仅包含内容区域;以及IE怪异盒模型,其中width和height包含边框和内边距。还讨论了`box-sizing`属性,用于切换这两种模式,以及在实际布局中如何利用它来调整元素尺寸。

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

所有的HTML元素都可以看作是盒子,每个盒子包括:
外边距(margin)、边框(border)、内边距(padding)、内容(content)
在这里插入图片描述

W3C标准盒模型

设定的height与width就是content的高度与宽度,

盒子总宽度=margin + border + padding + content/width
盒子总高度=margin + border + padding + content/height

IE怪异盒模型

设定的height与width是包括了border、padding、content的,

盒子总宽度=margin + width = margin + border + padding + content
盒子总高度=margin + height = margin + border + padding + content

box-sizing

box-sizing有三个值:

  • content-box
  • border-box
  • inherit

content-box:width和height分别应用到元素的content。在width和height之外绘制元素的padding和border。即W3C标准盒模型

border-box:为元素设定的width和height决定了元素的边框盒。为元素指定的任何padding和border都将在已设定的width和height内进行绘制。content=width/height - padding - border。即IE怪异盒模型

box-sizing应用场景:有时在width为100%时需要将content缩小,把box-sizing值设为border-box,增加padding的值。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值