css中盒模型有哪些

标准盒模型(w3c盒模型)

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

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

怪异盒模型(IE盒模型)

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

相关推荐
朴shu5 小时前
揭秘高性能协同白板:轻松实现多人实时协作(一)
前端·设计模式·架构
wyjcxyyy5 小时前
polar靶场-MISC,WEB(中等)
前端·chrome
2301_816073835 小时前
SELinux 学习笔记
linux·运维·前端
秋天的一阵风5 小时前
😱一行代码引发的血案:展开运算符(...)竟让图表功能直接崩了!
前端·javascript·vue.js
Hilaku5 小时前
npm scripts的高级玩法:pre、post和--,你真的会用吗?
前端·javascript·vue.js
申阳5 小时前
Day 12:09. 基于Nuxt开发博客项目-使用NuxtContent构建博客模块
前端·后端·程序员
合作小小程序员小小店5 小时前
web网页开发,在线短视频管理系统,基于Idea,html,css,jQuery,java,springboot,mysql。
java·前端·spring boot·mysql·vue·intellij-idea
n***29325 小时前
前端动画性能优化,减少重绘重排
前端·性能优化
mCell5 小时前
React 如何处理高频的实时数据?
前端·javascript·react.js
随笔记5 小时前
HbuilderX载入项目,运行后唤起微信开发者工具,提示:Error: Fail to open IDE,唤醒不起来怎么办
javascript·微信小程序·uni-app