css中盒模型有哪些

标准盒模型(w3c盒模型)

在标准盒模型中,元素的width和height只包括内容区域,不包括内边距、边框、外边距。也就是元素的实际宽高是内容区域加上内边距、边框、外边距。

例如:一个元素的宽度设置为100px,内边距为10px,边框为5px,那么该元素的实际宽度将是130px(100 + 10**2 + 5**2)

怪异盒模型(IE盒模型)

怪异盒模型与标准盒模型不同,它的widthheight 属性不仅包括内容区域,还包括内边距和边框,但不包括外边距。这意味着,如果你设置了相同的widthheight ,在怪异盒模型中,内容区域会比在标准盒模型中小,因为内边距和边框也被包含在内。在怪异模式下,一个块的总宽度等于width 加上margin (左右),其中width 已经包含了paddingborder值。

相关推荐
BD_Marathon8 分钟前
SpringBoot——辅助功能之切换web服务器
服务器·前端·spring boot
Kagol8 分钟前
JavaScript 中的 sort 排序问题
前端·javascript
eason_fan34 分钟前
Service Worker 缓存请求:前端性能优化的进阶利器
前端·性能优化
光影少年43 分钟前
rn如何和原生进行通信,是单线程还是多线程,通信方式都有哪些
前端·react native·react.js·taro
好大哥呀1 小时前
Java Web的学习路径
java·前端·学习
HashTang1 小时前
【AI 编程实战】第 7 篇:登录流程设计 - 多场景、多步骤的优雅实现
前端·uni-app·ai编程
cos1 小时前
Fork 主题如何更新?基于 Ink 构建主题更新 CLI 工具
前端·javascript·git
小满zs1 小时前
Next.js第二十一章(环境变量)
前端·next.js
C***11502 小时前
Spring aop 五种通知类型
java·前端·spring