css中盒模型有哪些

标准盒模型(w3c盒模型)

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

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

怪异盒模型(IE盒模型)

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

相关推荐
风铃喵游几秒前
打造地基: App拉起基础小程序容器
前端·架构
lky不吃香菜4 分钟前
JavaScript中的Map与Set:哈希表与集合的妙用指南
javascript
上海张律师8 分钟前
如何实现桌面快捷方式【2】--ArkTS开发
javascript
吴楷鹏9 分钟前
【Next.js】路由跳转显示进度条
前端·react.js·next.js
Cache技术分享13 分钟前
112. Java 继承 - 抽象方法和类
前端·后端
Mintopia32 分钟前
计算机图形学:屏幕空间效果的奇幻之旅
前端·javascript·计算机图形学
kingsley42 分钟前
浅谈工作流画布引擎 React Flow
前端
裕波43 分钟前
VueConf 2025 来啦,7 月 12 日,深圳见!
前端·vue.js
Aasee1 小时前
Web 搜索 MCP 启动!
前端·javascript