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盒子模型:

相关推荐
可视之道10 小时前
CSS Container Queries 在组态大屏中的实战
css
雪碧聊技术1 天前
Vue + Element Plus 实现文本溢出显示省略号及悬浮提示
前端·javascript·css·vue.js·文本溢出省略
小妖6662 天前
设置了 box-sizing: border-box; 不管用,下边框还是被挤压没了
前端·css·html
柚yuzumi2 天前
CSS 定位布局:让元素各就各位
前端·css
用户059540174462 天前
Qdrant 召回不一致踩坑实录:跑了 300 次测试才发现是索引没刷新
前端·css
用户059540174462 天前
AI Agent 上下文污染踩坑实录:用 pytest + Redis 揪出 3 类记忆串号 bug,排查 6 小时
前端·css
—Qeyser3 天前
html 可视化海报模板编辑器
css·html·js
我命由我123453 天前
CesiumJS 笔记 - 获取容器中心点、Cartesian3 clone 方法、修改 Cartesian3 对象的高度
前端·javascript·css·前端框架·html·html5·js
FFF_634560234 天前
简单的画板小工具,下载即用
前端·javascript·css
绝世唐门三哥4 天前
CSS 虚线下划线用法指南:text-decoration 完整解析
前端·javascript·css