标准盒模型与IE盒模型

最新推荐文章于 2025-07-17 21:42:20 发布
转载 最新推荐文章于 2025-07-17 21:42:20 发布 · 158 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：https://my.oschina.net/u/3695701/blog/1550988

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同。

1.JPG

2.JPG

转载于:https://my.oschina.net/u/3695701/blog/1550988

chongnao2008
关注
CSS盒模型的定义以及标准盒模型与IE盒模型的区别
2402_84885073的博客
07-14 585
CSS盒模型是网页布局和样式设计的基础，它允许开发人员精确地控制元素的尺寸和布局。标准盒模型和IE盒模型是盒模型的两种不同计算方式，它们的主要区别在于如何计算元素的宽度和高度。在现代网页设计中，标准盒模型更为常见和推荐，因为它提供了一种更为直观和易于理解的布局方式。然而，了解IE盒模型仍然有助于处理一些与旧版本IE浏览器相关的兼容性问题。
网页里的两种盒子模型(W3C盒子模型、IE盒子模型)
09-22
由于IE盒子模型与W3C盒子模型的差异，开发者在编写CSS时可能会遇到兼容性问题。为了解决这个问题，可以使用`box-sizing`属性。将`box-sizing`设置为`border-box`可以让元素遵循IE盒子模型，而`content-box`则保持W3C...
标准盒子模型与IE盒子模型的区别
wzb的博客
12-15 906
标准盒模型又称为W3C盒子模型，盒子模型的宽度指的是content，标准盒子对应的css属性box-sizing: content-box;IE盒子模型的宽度包括content，padding，border；对应的css属性box-sizing: border-box;
理解标准盒模型与IE（替代）盒模型的区别
你若盛开，清风自来
06-22 1455
本文将介绍CSS中的标准盒模型和IE（替代）盒模型的概念及区别，帮助开发者更好地理解和应用这些概念，从而提高网页设计的准确性。本文介绍了CSS中的标准盒模型和IE（替代）盒模型的概念及区别。理解这两种盒模型的区别对于开发者来说至关重要，可以帮助他们更好地设计和布局网页。
html盒子标准模型,CSS标准盒模型与IE盒子模型以及弹性盒模型
weixin_29268385的博客
06-07 591
CSS2.1中提出了盒模型的概念，盒模型高度提炼了所有元素的基本特征，即标准盒模型，CSS3中进一步扩展，提出了弹性盒模型的概念什么是盒模型，我们可以先直观的看一个东西打开Chrome浏览器，F12打开开发者工具我们能看到这个东西margin,padding,border，平常我们在设置这些属性的时候就是盒模型的一个应用~盗一张图来说明Margin(外边距) - 清除边框外的区域，外边距是透明...
html 盒模型ie,标准盒模型与IE盒模型之间的转换
weixin_39926639的博客
06-09 436
首先上图，这两张很明显可以看出IE盒模型和标准盒模型之间的差别。当然今天不是去细细追究两种模型具体是怎么去计算布局的，那个很多文章已经已经有过了，不再重复。以前刚开始学习盒模型的时候，就学到的是IE的盒模型不规范，不符合标准的盒模型，要加文档申明把IE的转换为标准的。要给文档头部加上 DOCTYPE 声明。让所有浏览器中都可以显示“标准 W3C 盒子模型”。为了让网页能兼容各个浏览器。殊不知，真正...
告别布局困惑：彻底搞懂CSS标准盒模型与IE盒模型
pzhdv的博客
07-17 762
CSS盒模型是网页布局的核心概念，主要分为W3C标准盒模型(content-box)和IE盒模型(border-box)。标准盒模型中，width/height仅作用于内容区，padding和border会额外增加元素尺寸；而IE盒模型的width/height包含内容区、内边距和边框，更符合直观预期。现代开发推荐全局使用border-box，通过设置box-sizing:border-box可以简化布局计算，实现"所见即所得"的效果。这种盒模型选择能显著提升开发效率和布局稳定性，已成为
盒子模型（标准盒子模型与IE盒子模型）
qq_40818233的博客
08-01 1638
做前端的都知道，盒子模型是我们前端开发网页必须要用的布局方法，当然了，盒子模型只是一个统称，那么下面我们就来具体说下盒子模型的种类有哪些。 盒子模型主要分为三大类：标准盒子模型，IE盒子模型，弹性盒子 这篇文章当中主要讲一下标准盒子模型以及IE盒子模型 一、标准盒子模型 在W3C标准下，盒子模型从外到里分别为magin（外边距）、border（边框）、padding（内边距）、conten...
标准盒模型和ie盒模型
链珠的博客
11-29 3514
当对一个文档进行布局时，浏览器会对css 基础框盒模型，将所有元素表示为一个个的矩形盒子。 一个盒子由content、padding、 border、margin组成。 <style> .box { width: 200px; height: 100px; padding: 20px; background: pink; } </style> .
标准盒模型与IE盒模型的区别
Marco_30的博客
01-21 3410
标准盒模型与IE盒模型的区别 1.标准盒模型 标准盒模型在这里插入图片描述 也称W3C盒模型，现在大部分浏览器都采用标准盒模型， 在标准模式下，一个元素所占的总宽度=width(content)+padding(左右)+margin(左右)，元素的高度同理也是一样的。 如图所示： 2.IE盒模型 标准盒模型也称怪异盒模型，IE6之前的浏览器默认采用怪异盒模型， 在怪异模式下，一个元素所占的总宽度=width+margin(左右)，（即width包含了border+padding+content）元素的高度
标准盒子模型和IE盒子模型的区别
GuoZ00的博客
08-08 651
IE盒模型的width和height属性的范围包含了border、padding和content。盒模型都是由四个部分组成的，分别是margin、border、padding和content。标准盒模型的width和height属性的范围只包含了content，CSS3中的盒模型有以下两种：标准盒子模型、IE盒子模型。表示IE盒模型（怪异盒模型）表示标准盒模型（默认值）
IE盒子模型和标准W3C盒子模型
12-09
`可以使元素的宽度和高度包括边框和内边距，使其更接近IE模型，但依然保持标准W3C模型的解析一致性。 总之，理解盒子模型对于CSS布局至关重要，而选择标准W3C模型并确保其正确应用，可以保证网页在不同浏览器上的...
详解CSS 怪异盒模型和标准盒模型
12-30
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型） 用两个简单的例子分别介绍下这两个盒子模型： 标准盒模型： &lt...
ACM-ICPC/CCPC/XCPC算法竞赛资料kmeans聚类
12-18
ACM-ICPC/CCPC/XCPC算法竞赛资料kmeans聚类
【CAOA三维路径规划】基于matlab鳄鱼伏击算法CAOA多无人机协同集群避障路径规划（目标函数：最低成本：路径、高度、威胁、转角）（Matlab代码实现）
12-18
【CAOA三维路径规划】基于matlab鳄鱼伏击算法CAOA多无人机协同集群避障路径规划（目标函数：最低成本：路径、高度、威胁、转角）（Matlab代码实现）内容概要：本文介绍了基于Matlab的鳄鱼伏击算法（CAOA）在多无人机协同集群三维路径规划中的应用，重点解决动态环境下的避障问题。该方法以最低成本为目标函数，综合考虑路径长度、飞行高度、威胁等级和转弯角度等因素，通过优化算法实现无人机集群的安全、高效路径规划。文中提供了完整的Matlab代码实现，便于科研人员复现与改进，适用于复杂环境下的无人机协同任务。; 适合人群：具备一定Matlab编程基础，从事无人机路径规划、智能优化算法或协同控制研究的研究生、科研人员及工程技术人员。; 使用场景及目标：①研究多无人机在复杂三维环境中的协同避障路径规划；②验证和改进鳄鱼伏击算法（CAOA）在实际路径规划中的性能；③实现以最低综合成本为目标的智能路径优化，提升无人机集群的任务执行效率与安全性。; 阅读建议：建议读者结合提供的Matlab代码进行实践操作，深入理解目标函数构建、约束条件处理及算法迭代过程，同时可尝试将算法扩展至更多动态障碍物或更大规模无人机集群场景中进行测试与优化。
基于径向基函数神经网络RBFNN的自适应滑模控制学习（Matlab代码实现）
12-18
基于径向基函数神经网络RBFNN的自适应滑模控制学习（Matlab代码实现）内容概要：本文介绍了基于径向基函数神经网络（RBFNN）的自适应滑模控制方法，并提供了相应的Matlab代码实现。该方法结合了RBF神经网络的非线性逼近能力和滑模控制的强鲁棒性，用于解决复杂系统的控制问题，尤其适用于存在不确定性和外部干扰的动态系统。文中详细阐述了控制算法的设计思路、RBFNN的结构与权重更新机制、滑模面的构建以及自适应律的推导过程，并通过Matlab仿真验证了所提方法的有效性和稳定性。此外，文档还列举了大量相关的科研方向和技术应用，涵盖智能优化算法、机器学习、电力系统、路径规划等多个领域，展示了该技术的广泛应用前景。; 适合人群：具备一定自动控制理论基础和Matlab编程能力的研究生、科研人员及工程技术人员，特别是从事智能控制、非线性系统控制及相关领域的研究人员； 使用场景及目标：①学习和掌握RBF神经网络与滑模控制相结合的自适应控制策略设计方法；②应用于电机控制、机器人轨迹跟踪、电力电子系统等存在模型不确定性或外界扰动的实际控制系统中，提升控制精度与鲁棒性； 阅读建议：建议读者结合提供的Matlab代码进行仿真实践，深入理解算法实现细节，同时可参考文中提及的相关技术方向拓展研究思路，注重理论分析与仿真验证相结合。
STM32F407-RT-Thread-CAN工程代码
12-18
STM32F407芯片，开发环境：RT-Thread Stdio开发环境，使用内部drv_can实现can功能，官方的drv_can.c文件中对于stm32f407的位时序配置错误，已修改位时序，但是800k的CAN速率，由于CAN时钟为42M的原因，无法整除(42/0.8=52.5)，导致800k的速率无法使用.
安卓应用源码Android闹钟源码
12-18
安卓应用源码Android 闹钟源码
转子轴承系统振动分析.zip
最新发布
12-18
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
请说明什么是盒模型，并简要描述标准盒模型与IE盒模型的区别
01-04
### CSS盒模型概述 在CSS中，所有的HTML元素都被视为矩形盒子，这些盒子由四个部分组成：外边距（margin）、边框（border）、内边距（padding）和内容区域（content）。这种结构被称为CSS盒模型[^4]。 ### 标准盒模型与IE盒模型的区别 #### 宽度和高度的计算方式 - **标准盒模型**下，当为一个元素指定宽度和高度时，这两个尺寸仅应用于该元素的内容区。如果还设置了`padding`或`border`，那么整个元素的实际占用空间将是原始设定的宽度/高度加上`padding`和`border`的总和。 ```css .standard-model { width: 200px; height: 150px; padding: 20px; border: 5px solid black; } ``` 此处`.standard-model`的真实宽度会是\(200 + (2 \times 20) + (2 \times 5)\)=250像素；真实高度则是\(150+(2\times20)+(2\times5)\)=200像素[^2]。 - **IE盒模型**则采取了一种不同的处理方法，在此模式里，给定的宽度和高度已经包含了`padding`和`border`在内的全部尺寸。这意味着即使增加了额外的填充或边界线，也不会影响到整体大小的变化。 ```css .ie-model { box-sizing: border-box; /* 使用IE盒模型 */ width: 200px; height: 150px; padding: 20px; border: 5px solid black; } ``` 对于`.ie-model`而言，其最终呈现出来的实际宽度仍然是200像素，而内部可用的空间将会相应减少以适应新增加的部分[^3]。 ### 控制盒模型的行为 为了兼容不同浏览器并控制盒模型的具体行为，可以通过设置`box-sizing`属性来切换使用的盒模型： - `content-box`: 默认值，默认遵循W3C的标准盒模型； - `border-box`: 让元素按照IE盒模型的方式来解析尺寸，即把`padding`和`border`都算入到width和height之内[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值