css标准盒子模型与IE盒子模型

CSS中的盒子模型包括IE盒子模型(IE6以下)和标准的W3C盒子模型。这两种盒子模型都包含有内容(content)、填充(padding)、边框(border)、边界(margin)这四个组成部分,这四个部分都包含有top/right/bottom/left四个组成部分。

如图可见,标准w3c盒子模型的宽度width不包含元素的边距padding和边框宽度border;下边再来看IE盒子模型(IE6以下)是什么样

很明显,和标准w3c盒子模型相不同,IE盒子模型的宽度width包含元素的边距padding和边框宽度border;

在CSS3中引入了box-sizing属性,box-sizing:content-box;表示标准的盒子模型,box-sizing:border-box表示IE盒子模型。默认的情况下是标准盒子模型,仔细观察一下两张图就可以看出他们之间的区别了:

(1) 第一张是标准的盒子模型:

(2) 第二张是IE盒子模型:

相关推荐
闪闪发光得欧9 小时前
前端提效新思路:Gemini 3.5 自动化定位 CSS 异常
前端·css
用户059540174464 天前
AI Agent记忆测试踩坑实录:Mock骗了我一周,Mem0+pytest一招破局
前端·css
Darling噜啦啦5 天前
CSS 3D 变换与 Flex 布局实战:从零打造旋转立方体
前端·css
用户059540174465 天前
把待办应用从Electron换成Tauri,内存占用狂降90%,打包体积仅5MB
前端·css
小月土星5 天前
CSS 3D 从入门到炫技:手把手教你写一个旋转立方体
前端·css
xingpanvip5 天前
星盘接口开发文档:本命盘接口指南
android·开发语言·css·php·lua
HjhIron5 天前
CSS 3D 世界:从盒子模型到三维空间动画
javascript·css
参宿76 天前
CSS 悬挂空白与选区溢出
前端·css
黄敬峰6 天前
纯 CSS3 打造 3D 旋转魔方:从文档流、Flex 布局到空间变换的硬核复盘
css
JieE2126 天前
手把手带你用纯 CSS 实现一个 3D 旋转魔方,这些前端基础你能打几分?
前端·css·html