css中盒模型有哪些

标准盒模型(w3c盒模型)

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

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

怪异盒模型(IE盒模型)

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

相关推荐
韦小勇几秒前
el-table 父子数据层级嵌套表格
前端
奔赴_向往3 分钟前
为什么 PWA 至今没能「掘进」主流?
前端
小小愿望3 分钟前
微信小程序开发实战:图片转 Base64 全解析
前端·微信小程序
掘金安东尼5 分钟前
2分钟创建一个“不依赖任何外部库”的粒子动画背景
前端·面试·canvas
电商API大数据接口开发Cris5 分钟前
基于 Flink 的淘宝实时数据管道设计:商品详情流式处理与异构存储
前端·数据挖掘·api
小小愿望7 分钟前
解锁前端新技能:让JavaScript与CSS变量共舞
前端·javascript·css
程序员鱼皮10 分钟前
爆肝2月,我的 AI 代码生成平台上线了!
java·前端·编程·软件开发·项目
天生我材必有用_吴用23 分钟前
一文搞懂 useDark:Vue 项目中实现深色模式的正确姿势
前端·vue.js
胡西风_foxww26 分钟前
CSS 多列布局(Multi-column Layout):快速上手指南
css·column·入门·指南·layout·多列布局·上手
二闹27 分钟前
JS调用高德地图标注地点-简单呐
前端·javascript