W3C标准盒模型和IE盒模型

最新推荐文章于 2025-10-26 09:37:34 发布
原创 最新推荐文章于 2025-10-26 09:37:34 发布 · 1.8k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#盒模型 #W3C标准盒模型和IE盒模型

本文详细介绍了标准W3C盒子模型和IE盒子模型的区别。W3C盒子模型中，盒子的总宽度由内容、边框和填充共同决定；而在IE盒子模型中，指定的宽度已包含了内容、边框和填充。

 标准W3C盒子模型：（内容content是一个独立的部分）

所以盒子总宽度为：width+border+padding 

IE盒子模型： （width已经包含content border padding）

所以盒子总宽度为：width 

IE盒子模型和标准W3C盒子模型
09-27
在Web开发中，有两种主要的盒子模型：IE盒子模型和标准W3C盒子模型，这两种模型对于元素尺寸的计算方式有所不同，因此对页面布局有着深远的影响。 **标准W3C盒子模型**遵循W3C规范，它将每个HTML元素视为一个矩形...
网页里的两种盒子模型(W3C盒子模型、IE盒子模型)
09-22
网页设计中的两种主要盒子模型，即W3C盒子模型和IE盒子模型，是理解CSS布局的关键因素。这两种模型在计算元素的实际尺寸时有着显著的区别，从而影响到元素在页面上的表现。 1. W3C盒子模型（标准模型） W3C盒子模型...
用标准W3C盒子模型
chmsword的专栏
06-09 1336
盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟悉的标准盒子模型：从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。IE 盒子模型从上图可以看到 IE
什么是盒模型？标准盒模型和怪异盒模型（IE盒模型）有什么区别？
最新发布
破损的天堂鸟博客
10-26 1122
其核心功能是用来控制当前盒子与其他元素盒子之间的距离，从而在页面上创建元素间的空白间隔，防止它们相互重叠。值得注意的是，外边距的值可以设置为负数，这会使元素向指定方向移动，甚至与其他元素发生重叠。几乎所有的网页布局挑战，从简单的间距调整到复杂的响应式设计，都与对盒模型的深刻理解息息相关。CSS盒模型是理解和构建网页布局的根本。所提供的可预测的尺寸模型将变得更加重要，它为构建独立、自适应的UI组件提供了坚实的基础。CSS盒模型的基本思想是，网页上的每一个HTML元素都可以被想象成一个矩形的盒子。
标准盒模型
demin3278的博客
01-10 199
一、盒模型 　　（一）盒模型概念： 　　　　盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系，css定义所有的元素都可以像盒子一样的外形和平面空间，即包含内容区、填充区（padding）、边框（border）、边界（margin）,这就是盒模型。 　　　　 　　　　1.填充（padding）：padding是指在内容与边框的空白区域，也称补白。 　　　...
标准盒模型（w3c标准）和 怪异盒模型（IE标准）
z980498059的博客
12-01 3819
盒模型的理解
W3C标准盒模型
奋斗的 优快云
11-13 647
W3C标准盒模型 1、这个宽度和高度是元素内容的宽度和高度，而不是padding的 #div1 { height: 200px; width: 200px; background: #f00; } 2、加上padding后的图形 #div1 { padding: 200px; height: 200px; width: 200px; background: #f00; } 3、加边框 #div1 { /*padding: 200px
详解CSS 怪异盒模型和标准盒模型
12-30
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： &lt...
盒模型
weixin_44346202的博客
10-12 114
1.IE6盒子模型与W3C盒子模型 2. 文档中的每个元素被描绘为矩形盒子。盒子有四个边界：外边距边界margin, 边框边界border, 内边距边界padding与内容边界content 3. CSS3中有个box-sizing属性可以控制盒子的计算方式 4. content-box：padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和。（W3C盒子模型） 5. border-box：padding和border
css盒模型（W3C标准盒模型、IE怪异盒模型、box-sizing）
Predator117的博客
01-19 371
所有的HTML元素都可以看作是盒子，每个盒子包括： 外边距（margin）、边框（border）、内边距（padding）、内容（content） W3C标准盒模型 设定的height与width就是content的高度与宽度， 盒子总宽度=margin + border + padding + content/width 盒子总高度=margin + border + padding + content/height IE怪异盒模型 设定的height与width是包括了border、padding、
css标准盒模型
码上行动
06-21 246
文章目录标准盒模型一、padding（内边距）二、margin（外边距）总结 标准盒模型 标准盒模型盒子的实际大小 盒子的总宽度 = width + 左右的padding + 左右的border 盒子的总高度 = height + 上下的padding + 上下的border 一、padding（内边距） 控制内容与盒子边框的关系（又叫内填充） 填充：padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白； 用法： 1）用来调整内容在容器中的位置关系 2）paddin
ie的盒模型和标准模型
dhzp5170的博客
04-16 210
使用 box-sizing:content-box || border-box || inherit 原理图 计算 怪异模型|IE模型 div宽度（定死） = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度不会变化 标准模型 div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化 代码...
标准盒模型和ie盒模型
03-08
标准盒模型（Standard Box Model）和IE盒模型（Internet Explorer Box Model 或 Quirks Mode Box Model），它们在处理元素宽度、高度及内边距（padding）、外边框（border）的方式上有所不同。 ### 标准盒模型 这是W3C推荐的标准盒子模型，现代浏览器默认采用此模型。在这个模型中， - 元素的实际**总宽**等于设定的`width`加上左右两侧的`padding`再加上左右两边的`border`； - **总高**则是设置的高度加上下侧的`padding`再加下边界的厚度。 换句话说，当我们给定一个固定大小的内容区域尺寸时，如果增加了`padding`或设置了较厚的`border`，那么整个区块将会超出原始指定的空间范围，并且可能会破坏页面布局的设计意图。 公式表示为： - 总宽度 = width + padding-left + border-left-width + padding-right + border-right-width - 总高度 = height + top-padding + border-top-width + bottom-padding + border-bottom-width 例如，CSS代码如下所示： ```css .box { width: 200px; height: 150px; padding: 20px; border: 10px solid black; } ``` 按照标准盒模型计算的话，`.box`真实的占据空间应该是：宽度=240px（200+2*20+2*10），高度同样也是类似的结果。 ### IE盒模型 / Quirks模式下的表现 相比之下，在旧版本 Internet Explorer 浏览器所使用的非标准盒模或者是在启用Quirk mode的情况下，情况刚好相反： - 这里所说的宽度实际上包含了内容区、内边距(padding)，甚至是边界(border)在内的全部； - 高度同理，它不仅仅包含实际内容的高度还包括上下方的填充物以及内外两层界限线的部分。 因此，在相同的 CSS 规则应用于上述 `.box` 示例时， ```css /* 当文档处于quirkmode状态 */ .box { width: 200px; /* 包含content area,padding,border*/ height: 150px;/* 同样也包括这些部分 */ padding: 20px; border: 10px solid black; } ``` 此时 .box的真实占用面积就变成了固定的200x150像素，因为所有的额外尺寸已经被考虑进去了。 这种差异曾经使得很多开发者感到困惑并难以适配早期版本的IE，直到后来随着HTML5和CSS3的发展，新的网页逐渐统一到了标准盒模型之上。 为了保证兼容性和一致性，建议总是显式声明 DOCTYPE ，让浏览器运行于 standards-compliant 模式之下而不是 quirks 模式。此外还可以利用 `box-sizing:border-box;` 属性强制将所有元素按IE盒模型的方式来解析尺寸，这有助于简化样式控制并且保持一致性的用户体验。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值