盒模型是WEB页面排版定位的核心，正是由于不同的浏览器对盒模型的解释不一，造成同样的CSS设计代码在不同的浏览器上有不同的表现。那么差异到底有多大，网上也没有一个直观的具体的数据可供参考，因此才有了这个盒模型比较数据。
既然要比较，必然要有一个标准，所以，在比较开始之前，先来了解一下W3C标准盒模型解释。
W3C标准盒模型
一个标准的盒模型由margin，boder，padding，content属性组成，每个属性在盒模型的显示中占据不同的区域：
Margin 占据margin边界线到boder边界线之间的区域（粉色区域）；
Boder 占据boder边界线到padding边界线之间的区域（黄色区域）；
Padding占据 padding边界线到content边界线之间的区域（绿色区域）；
而height和width决定Content的宽和高，在设置了这几个属性之后，整个盒模型的显示尺寸应该是：
宽度：（margin-left）+（boder-left）+（padding-left）+width+（padding-right）+（boder-right）+margin-right
高度：（margin-top）+（boder-top）+（padding-top）+height+（padding-bottom）+（boder-bottom）+margin-right
举例说明：
我们设置了一个margin， boder，padding各为1，heigh为50，width为100的div对象，那么这个div对象的宽度和高度分别为：
宽度：1+1+1+100+1+1+1=106；
高度：1+1+1+50+1+1+1=56；
但是由于margin 透明的缘故，因此，我们在一般情况下，实际看到是一个宽104，高54的div对象。
OK，有了参照标准，下面我们以一个实际的Div例子，来看看，在不同的浏览器下，盒模型的表现方式差异。
Div示例代码如下：
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>盒模型</title>
<style type="text/css">
<!--
.simple{
border: 1px solid #FF0000;
padding: 1px;
width:100px;
height:50px;
margin:1px;
float:left;
}
.simple .inner {
border:1px solid #00FF00;
padding: 1px;
width:100px;
height:50px;
margin:1px;
}
body {
background-color: #FFFFFF;
margin:0px;
}
-->
</style>
</head>
<body>
<div id=”A” class="simple">
<div id=”B” class="inner">Area-1</div>
</div>
<div id=”C” class="simple">Area-2</div>
</body>
</html>
|
在代码里，我们定义了3个高度和宽度都分别是50像素和100像素的div对象，它们的 margin，boder，padding都为1，其中divB是divA对象的嵌套div。
我们要注意标红的代码段，此为标准XHTML文档的类型定义标签DOCTYPE，用来定义文档的类型，共分为3种，我们选择的Transitional类型为过渡类型，此类型的XHTML页面，浏览器的解释较为宽松，同样这个类型也是Dreamweaver默认的类型标签。在后面测试我们可以发现，此标签的设置与否，也会影响到浏览器对盒模型的解释。
测试环境：
浏览器：IE5.5、IE6、IE7、IE8、Firefox3.5、Opera9.64 （以下Firefox和Opera如未指定版本，皆为此版本，不再单独列出版本号）
显示器分辨率：1440X900
测试步骤：
1、 不设定div对象的margin属性，不设定body的margin属性，测试各浏览器对div大小的解释和div距离body边距的大小；
2、 设定div对象的margin属性为1，测试各浏览器div距离body的边距大小；
3、 设定div对象的float属性为left，再次测试各浏览器div距离body的边距大小；
4、 测试各个浏览器对div对象的大小解释和 divB相对divA的边距大小和嵌套表现；
5、 最后，设置body的margin属性为0，再次测试各浏览器对div大小的解释和div距离body边距的大小；
6、 将默认的DOCTYPE文档类型标签去掉，再次进行上述测试。
注：因为Firefox和Opera浏览器在窗口最大化和非最大化时渲染不一样，因此分开进行测试；
测试数据：
使用DOCTYPE标签各个浏览器解释数据（点击图片查看原图）
通过上图表格，可以看出各浏览器在解释使用DOCTYPE标签的网页时，有如下差异：
a) IE5.5对div的大小解释与标准的盒模型大小有出入，它对div对象的高度和宽度的定义没有考虑boder和padding设置的影响。
b) IE6在显示嵌套div对象时，对div的大小解释与标准的盒模型大小有出入；
c) IE系列除IE8之外，div与body上边距和左边距都是15px和10px，而IE8都是8px；
d) Firefox、Opera在非最大化窗口时，div与body上边距和左边距的距离也都是8px；但是最大化后，Firefox左边距会减少2px，变为6px；而Opera的左边距会减少1px，变为7px；
e) 当设置了div对象的margin属性为1px时，IE5.5的上边距没有发生变化，仍为15px，但是左边距增加1px，变为11px；IE6和IE7的上边距和左边距都比原来增加1px，分别变为16px和11px；IE8和非最大化窗口的Firefox、Opera上边距不变，仍为8px，左边距增加1px，变为9px；但是Firefox、Opera最大化后，Firefox的左边距会减少2px，变为7px，而Opera的左边距也会减少1px，变为8px；
f) 当设置了div对象的float属性为left之后，IE5.5和IE6的上边距和左边距分别变为16px和12px；IE7上边距和左边距分别为16px和11px；IE8和非最大化窗口的Firefox、Opera上边距和左边距都分别变为9px；Firefox、Opera最大化后，Firefox的左边距会减少2px，变为7px；Opera的左边距会减少1px，变为8px；
g) IE系列浏览器对包含嵌套的div对象的解释开始出现偏差， IE7、IE8、Firefox（包括最大化和非最大化）、Opera（包括最大化和非最大化）浏览器对divA和divB的大小显示符合盒模型标准，宽和高分别为54px和104px，divB对象的宽高溢出；IE5.5将内嵌的divB的大小高度和宽度分别解释为100px和50px，而外包divA的大小自动撑大，高度和宽度变为106px和55px；IE6对内嵌的divB对象的大小高度和宽度解释遵守盒模型计算规则，分别为104px和54px，但是外包divA的大小则自动撑大，高度和宽度变为110px和59px；所以，我们看到，IE5.5和IE6在显示时divB对象是完全包含在divA对象中的，没有宽高溢出的情况。
h) IE5.5对外包divA的大小计算公式：
宽：divABoder+divAPadding+divBMargin+divB宽度（divBWidth）+divBMargin+divAPadding+divABoder
所以，计算结果1+1+1+(100)+1+1+1=106px
高：divABoder+divAPadding+divB高度（divBHeight）+divBMargin+divAPadding+divABoder
所以，计算结果1+1++(50)+1+1+1=55px
i) IE6对外包divA的大小计算公式：
宽：divABoder+divAPadding+divBMargin+divB宽度（divBBoder+divBPadding+divBWidth+divBPadding+divBBoder）+divBMargin+divAPadding+divABoder
所以，计算结果1+1+1+(1+1+100+1+1)+1+1+1=110px；
高：divABoder+divAPadding+divB高度（divBBoder+divBPadding+divBHeight+divBPadding+divBBoder）+divBMargin+divAPadding+divABoder
所以，计算结果1+1+(1+1+50+1+1)+1+1+1=59px;
j) IE5、IE6在解释嵌套的div对象时，如果包含的div对象大小超过外层div的大小，会自动调整外层div的大小，不符合盒模型计算规则（自适应也有错？）；在计算div高度时，不论有没有设置magrin-top，都不计算Magrin-top的值，但是如果设置了magrin-bottom，则会在高度中包含magrin-bottom的值（有点匪夷所思）；
k) 设置body的margin属性为0px之后，IE系列浏览器、Firefox和Opera非最大化窗口下，div与body上边距和左边距的大小都为1px；但是Firefox在最大化窗口下，左边距会变为-1px；而Opera浏览器左边距则会变为0px；
总结：
IE8浏览器在使用DOCTYPE的Transitional类型时，对盒模型的解释已经接近标准，基本和基于W3c标准的Firefox浏览器在非最大化窗口条件下的解释一模一样；
未使用DOCTYPE标签各个浏览器解释数据（点击图片查看原图）
通过上图表格，可以看出各浏览器在不使用DOCTYPE标签的网页时，有如下差异：
a) 对于IE系列的浏览器，DOCTYPE标签的设置对页面盒模型的解释十分重要，如果没有指定该标签，各版本的浏览器在盒模型的解释上保持着惊人的一致（果然是一个模子倒出来的-_-!），都是非标准的盒模型解释，而是使用自家的自适应标准；
b) 对于IE5.5和IE6，如果设置了div对象是向左浮动和body的margin属性为0px，那么div对象与body的左边距为2px；
c) Firefox浏览器会对DOCTYPE标签低敏感，几乎对显示没有任何影响；
d) Opera浏览器对DOCTYPE标签敏感，如果未设置该标签，包含嵌套divB的divA对象的高度将会自适应；变为60px；
e) Opera浏览器对外包divA的高度计算公式：
高度：divABoder+divAPadding+divBMargin+divB高度(divBBoder+divBPadding+divBHeight+divBPadding+divBBoder)+divBMargin+divAPadding+divABorder
所以，计算结果1+1+1+(1+1+50+1+1)+1+1+1=60px；
经过以上的测试，相信对各个浏览器对盒模型的解释应该有一个基于数据上的直观了解。通过这些数据可以发现，要做出在所有浏览器都显示得一模一样的网页是件多么不容易的事情。
在本次测试中，最始料未及的是Firefox和Opera在最大化窗口下和非最大化窗口下，div边距的大小居然不一致，Firefox在左边距上居然还出现了-1px的大小,鉴于此，在后期增加了最大化和非最大化窗口来分别测试。不过，IE5.5在整个测试中算是最特立独行的一个，与标准盒模型的解释基本上大相径庭，值得欣慰的是使用的人越来越少，值得花力气和时间去兼容的必要性也在逐步下降；IE6、IE7在遵循W3C盒模型解释标准的同时，对模型的解读也有自己的“另类”方式，但使用这些浏览器的还大有人在，因此还是有必要花力气和时间去兼容；不过通过对IE8的测试，可以预见，未来发布的各个浏览器之间的差距将会越来越小，也越来越趋于标准化，这也许是广大WEB设计者的福音了，以后，不再需要奔走于各个浏览器之间去测试设计网页的兼容性了。
相关推荐
内容概要：本文档《数据结构》（02331）第一章主要介绍数据结构的基础概念，涵盖数据与数据元素的定义及其特性，详细阐述了数据结构的三大要素：逻辑结构、存储结构和数据运算。逻辑结构分为线性结构（如线性表、栈、队列）、树形结构（涉及根节点、父节点、子节点等术语）和其他结构。存储结构对比了顺序存储和链式存储的特点，包括访问方式、插入删除操作的时间复杂度以及空间分配方式，并介绍了索引存储和散列存储的概念。最后讲解了抽象数据类型（ADT）的定义及其组成部分，并探讨了算法分析中的时间复杂度计算方法。 适合人群：计算机相关专业学生或初学者，对数据结构有一定兴趣并希望系统学习其基础知识的人群。 使用场景及目标：①理解数据结构的基本概念，掌握逻辑结构和存储结构的区别与联系；②熟悉不同存储方式的特点及应用场景；③学会分析简单算法的时间复杂度，为后续深入学习打下坚实基础。 阅读建议：本章节内容较为理论化，建议结合实际案例进行理解，尤其是对于逻辑结构和存储结构的理解要深入到具体的应用场景中，同时可以尝试编写一些简单的程序来加深对抽象数据类型的认识。
内容概要：本文详细介绍了施耐德M580系列PLC的存储结构、系统硬件架构、上电写入程序及CPU冗余特性。在存储结构方面，涵盖拓扑寻址、Device DDT远程寻址以及寄存器寻址三种方式，详细解释了不同类型的寻址方法及其应用场景。系统硬件架构部分，阐述了最小系统的构建要素，包括CPU、机架和模块的选择与配置，并介绍了常见的系统拓扑结构，如简单的机架间拓扑和远程子站以太网菊花链等。上电写入程序环节，说明了通过USB和以太网两种接口进行程序下载的具体步骤，特别是针对初次下载时IP地址的设置方法。最后，CPU冗余部分重点描述了热备功能的实现机制，包括IP通讯地址配置和热备拓扑结构。 适合人群：从事工业自动化领域工作的技术人员，特别是对PLC编程及系统集成有一定了解的工程师。 使用场景及目标：①帮助工程师理解施耐德M580系列PLC的寻址机制，以便更好地进行模块配置和编程；②指导工程师完成最小系统的搭建，优化系统拓扑结构的设计；③提供详细的上电写入程序指南，确保程序下载顺利进行；④解释CPU冗余的实现方式，提高系统的稳定性和可靠性。 其他说明：文中还涉及一些特殊模块的功能介绍，如定时器事件和Modbus串口通讯模块，这些内容有助于用户深入了解M580系列PLC的高级应用。此外，附录部分提供了远程子站和热备冗余系统的实物图片，便于用户直观理解相关概念。
某型自动垂直提升仓储系统方案论证及关键零部件的设计.zip
2135D3F1EFA99CB590678658F575DB23.pdf#page=1&view=fitH
可以搜索文本内的内容，指定目录，指定文件格式，匹配大小写等
Windows 平台 Android Studio 下载与安装指南.zip
Android Studio Meerkat 2024.3.1 Patch 1（android-studio-2024.3.1.14-windows.zip）适用于Windows系统，文件使用360压缩软件分割成两个压缩包，必须一起下载使用： part1: https://download.csdn.net/download/weixin_43800734/90557033 part2: https://download.csdn.net/download/weixin_43800734/90557035
国网台区终端最新规范
国网台区终端最新规范
1.【锂电池剩余寿命预测】Transformer-GRU锂电池剩余寿命预测（Matlab完整源码和数据） 2.数据集：NASA数据集，已经处理好，B0005电池训练、B0006测试； 3.环境准备：Matlab2023b，可读性强； 4.模型描述：Transformer-GRU在各种各样的问题上表现非常出色，现在被广泛使用。 5.领域描述：近年来，随着锂离子电池的能量密度、功率密度逐渐提升，其安全性能与剩余使用寿命预测变得愈发重要。本代码实现了Transformer-GRU在该领域的应用。 6.作者介绍：机器学习之心，博客专家认证，机器学习领域创作者，2023博客之星TOP50，主做机器学习和深度学习时序、回归、分类、聚类和降维等程序设计和案例分析，文章底部有博主联系方式。从事Matlab、Python算法仿真工作8年，更多仿真源码、数据集定制私信。
Android项目原生java语言课程设计，包含LW+ppt
大学生入门前端-五子棋vue项目
这是一个完整的端到端解决方案，用于分析和预测阿联酋（UAE）地区的二手车价格。数据集包含 10,000 条二手车信息，覆盖了迪拜、阿布扎比和沙迦等城市，并提供了精确的地理位置数据。此外，项目还包括一个基于 Dash 构建的 Web 应用程序代码和一个训练好的 XGBoost 模型，帮助用户探索区域市场趋势、预测车价以及可视化地理空间洞察。 数据集内容 项目文件以压缩 ZIP 归档形式提供，包含以下内容： 数据文件： data/uae_used_cars_10k.csv：包含 10,000 条二手车记录的数据集，涵盖车辆品牌、型号、年份、里程数、发动机缸数、价格、变速箱类型、燃料类型、颜色、描述以及销售地点（如迪拜、阿布扎比、沙迦）。 模型文件： models/stacking_model.pkl：训练好的 XGBoost 模型，用于预测二手车价格。 models/scaler.pkl：用于数据预处理的缩放器。 models.py：模型相关功能的实现。 train_model.py：训练模型的脚本。 Web 应用程序文件： app.py：Dash 应用程序的主文件。 callback
资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！ 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。
资源内项目源码是来自个人的毕业设计，代码都测试ok，包含源码、数据集、可视化页面和部署说明，可产生核心指标曲线图、混淆矩阵、F1分数曲线、精确率-召回率曲线、验证集预测结果、标签分布图。都是运行成功后才上传资源，毕设答辩评审绝对信服的保底85分以上，放心下载使用，拿来就能用。包含源码、数据集、可视化页面和部署说明一站式服务，拿来就能用的绝对好资源！！！ 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、大作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.txt文件，仅供学习参考, 切勿用于商业用途。
此为代码审查工具 可查 文件数，字节数，总行数，代码行数，注释行数，空白行数，注释率等
内容概要：本文档涵盖了一项关于企业破产概率的详细分析任务，分为书面回答和Python代码实现两大部分。第一部分涉及对业务类型和破产状态的边际分布、条件分布及相对风险的计算，并绘制了相应的二维条形图。第二部分利用Python进行了数据处理和可视化，包括计算比值比、识别抽样技术类型、分析鱼类数据集以及探讨辛普森悖论。此外，还提供了针对鱼类和树木数据的统计分析方法。 适合人群：适用于有一定数学和编程基础的学习者，尤其是对统计学、数据分析感兴趣的大学生或研究人员。 使用场景及目标：①帮助学生掌握统计学概念如边际分布、条件分布、相对风险和比值比的实际应用；②教授如何用Python进行数据清洗、分析和可视化；③提高对不同类型抽样技术和潜在偏见的理解。 其他说明：文档不仅包含了理论知识讲解，还有具体的代码实例供读者参考实践。同时提醒读者在完成作业时需要注意提交格式的要求。
MCP快速入门实战，详细的实战教程
python，playwright基础
氖星生命体SDK是JAVA开发的代码。它能输出多种情绪和意图，让机器人、AI玩具和其他硬件具备人工生命，并在意图驱动下运行。