css中盒模型有哪些

标准盒模型(w3c盒模型)

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

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

怪异盒模型(IE盒模型)

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

相关推荐
Csvn3 小时前
WASM
前端
修己xj4 小时前
我用 AI 给自己写了一个 Markdown 编辑器,然后把它开源了
前端
FRing035 小时前
vue2干货总结2(v-bind、v-for、v-model、指令修饰符、v-bind操作class和style)
开发语言·前端·vue.js·vue2
幸运小猿5 小时前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
moshuying7 小时前
网购能买Token了!
前端
h_65432107 小时前
echarts实现柱状图加一条横线
前端·echarts
风骏时光牛马7 小时前
生成一个后端标题,只需要一个标题,不需要其他的任何文本。
前端
子非鱼@Itfuture7 小时前
关于前后端联调中登录状态/登录信息失效?
java·前端
郭小李7 小时前
openFeign入门
java·开发语言·前端
馒头不想说话7 小时前
AI当运营,帮你省人力
前端