css中盒模型有哪些

标准盒模型(w3c盒模型)

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

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

怪异盒模型(IE盒模型)

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

相关推荐
这是个栗子4 分钟前
AI辅助编程(一) - ChatGPT
前端·vue.js·人工智能·chatgpt
2501_944448005 分钟前
Flutter for OpenHarmony衣橱管家App实战:预算管理实现
前端·javascript·flutter
Remember_9938 分钟前
Spring 核心原理深度解析:Bean 作用域、生命周期与 Spring Boot 自动配置
java·前端·spring boot·后端·spring·面试
2501_944448009 分钟前
Flutter for OpenHarmony衣橱管家App实战:意见反馈功能实现
android·javascript·flutter
笨蛋不要掉眼泪11 分钟前
Redis持久化解析:RDB和AOF的对比
前端·javascript·redis
心.c13 分钟前
Vue3+Node.js实现文件上传分片上传和断点续传【详细教程】
前端·javascript·vue.js·算法·node.js·哈希算法
We་ct14 分钟前
LeetCode 48. 旋转图像:原地旋转最优解法
前端·算法·leetcode·typescript
妙团团15 分钟前
React学习之自定义tab组合组件
javascript·学习·react.js
2601_9498095920 分钟前
flutter_for_openharmony家庭相册app实战+隐私设置实现
android·javascript·flutter
2601_9495936522 分钟前
React Native 鸿蒙跨平台开发:LinearGradient 渐变动画效果
javascript·react native·react.js