css中盒模型有哪些

标准盒模型(w3c盒模型)

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

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

怪异盒模型(IE盒模型)

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

相关推荐
阿蓝灬12 小时前
clientWidth vs offsetWidth
前端·javascript
一代明君Kevin学长12 小时前
快速自定义一个带进度监控的文件资源类
java·前端·后端·python·文件上传·文件服务·文件流
4Forsee13 小时前
【Android】动态操作 Window 的背后机制
android·java·前端
用户904438163246013 小时前
从40亿设备漏洞到AI浏览器:藏在浏览器底层的3个“隐形”原理
前端·javascript·浏览器
小二李13 小时前
第12章 koa框架重构篇 - Koa框架项目重构
java·前端·重构
鸡吃丸子13 小时前
React Native入门详解
开发语言·前端·javascript·react native·react.js
阿蒙Amon13 小时前
JavaScript学习笔记:12.类
javascript·笔记·学习
qq_4287232413 小时前
英语歌10个月之前启蒙磨耳朵
前端
Hao_Harrision13 小时前
50天50个小项目 (React19 + Tailwindcss V4) ✨ | DrinkWater(喝水记录组件)
前端·react.js·typescript·vite7·tailwildcss
SadSunset13 小时前
(19)Bean的循环依赖问题
java·开发语言·前端