css中盒模型有哪些

标准盒模型(w3c盒模型)

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

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

怪异盒模型(IE盒模型)

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

相关推荐
爱学习的茄子几秒前
【建议收藏】2025最全JS事件循环详解:从底层机制到浏览器渲染
前端·javascript·深度学习
前端小嘎几秒前
一个非常有用的设计模式——有限状态机
前端·javascript
柒崽1 分钟前
手把手带你搭建一个MCP客户端,小白也能学会
前端
雲墨款哥2 分钟前
一个前端开发者的救赎之路——JS基础回顾(一)
前端·javascript
杨进军3 分钟前
React 实现 useLayoutEffect 与 useEffect
前端·react.js·前端框架
我想说一句4 分钟前
深入解析 React 核心:JSX 本质与 Key 的奥秘
前端·javascript·前端框架
南篱4 分钟前
JavaScript类型转换:隐式魔法与显式掌控
javascript
想干到35岁的程序猿4 分钟前
Vue设计原理解读之初始化挂载流程(二)
前端
解道Jdon7 分钟前
AI IDE冲击下JetBrains作死,IDEA埋订阅陷阱
javascript·reactjs
Face7 分钟前
Vue源码解析(叁)
前端·vue.js