标准盒模型与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 盒子模型。他们对盒子模型的解释各不相同。

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

chongnao2008

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

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

1454

本文将介绍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

1637

做前端的都知道，盒子模型是我们前端开发网页必须要用的布局方法，当然了，盒子模型只是一个统称，那么下面我们就来具体说下盒子模型的种类有哪些。盒子模型主要分为三大类：标准盒子模型，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...

Feigong，针对各种情况自由变化的mysql注入脚本,In view of the different things freely change the mysql injection scrip

最新发布

12-17

下载前可以先看下教程 https://pan.quark.cn/s/90f2470d331b Feigong --非攻 rm... 最近有了新的体验...Feigong 2.0loading....

【空气质量预测】北京 36 站预处理数据落地即用无套路！.zip

12-17

【空气质量预测】北京 36 站预处理数据落地即用无套路！.zip

理光 MP7503 MP6503 MP9003 维修手册p

12-17

理光 MP7503 MP6503 MP9003 维修手册p

【电子测试设备】基于USB-TMC协议的SPD3000系列直流稳压电源固件升级方法：通过EasyPower软件实现.ugf文件更新操作指导

12-17

内容概要：本文介绍了鼎阳直流稳压电源SPD3000系列的固件升级方法，通过PC端管理软件EasyPower和USBTMC连接实现。升级过程包括：安装EasyPower软件并建立与电源设备的USB连接，在软件界面中选择“版本”菜单下的“升级”选项，进入固件升级对话框后选择扩展名为.ugf的固件文件，确认后点击“升级”按钮开始更新。升级过程中需等待进度条完成，结束后重启设备即可正常使用。文中配有操作界面图示，详细展示了各步骤的操作位置和流程。; 适合人群：电子工程师、技术支持人员及具备基本仪器操作经验的实验室技术人员；适用于需要维护或更新SPD3000系列电源设备固件的专业用户。; 使用场景及目标：①当设备功能异常或需要新增功能时进行固件升级；②配合最新版EasyPower软件确保设备兼容性和稳定性；③提升设备性能或修复已知问题。; 阅读建议：在执行升级前请确保正确安装驱动和软件，并使用官方提供的.ugf格式固件文件，避免升级失败。操作过程中保持设备供电稳定，切勿中断升级流程，以防设备损坏。

米游社每日米游币自动化脚本

12-17

源码地址： https://pan.quark.cn/s/d1f41682e390 miyoubiAuto 米游社每日米游币自动化Python脚本(务必使用Python3) 8更新：更换cookie的获取地址注意：禁止在B站、贴吧、或各大论坛大肆传播！作者已退游，项目不维护了。如果有能力的可以pr修复。小引一波推荐关注几个非常可爱有趣的女孩！欢迎B站搜索: @嘉然今天吃什么 @向晚大魔王 @乃琳Queen @贝拉kira 第三方库食用方法下载源码在Global.py中设置米游社Cookie 运行myb.py 本地第一次运行时会自动生产一个文件储存cookie，请勿删除当前仅支持单个账号！获取Cookie方法浏览器无痕模式打开 http://user.mihoyo.com/ ，登录账号按，打开，找到并点击按刷新页面，按下图复制 Cookie： How to get mys cookie 当触发时，可尝试按关闭，然后再次刷新页面，最后复制 Cookie。也可以使用另一种方法：复制代码浏览器无痕模式打开 http://user.mihoyo.com/ ，登录账号按，打开，找到并点击控制台粘贴代码并运行，获得类似的输出信息部分即为所需复制的 Cookie，点击确定复制部署方法--腾讯云函数版（推荐！）下载项目源码和压缩包进入项目文件夹打开命令行执行以下命令 xxxxxxx为通过上面方式或取得米游社cookie 一定要用双引号包裹!! 例如: png 复制返回内容(包括括号) 例如: QQ截图20210505031552.png 登录腾讯云函数官网选择函数服务-新建-自定义创建函数名称随意-地区随意-运行环境Python3....

《CentOS服务器环境搭建实战项目在毕业设计方面的应用-从零部署到高可用Web服务》.docx

12-17

内容概要：本文围绕《CentOS服务器环境搭建实战项目在毕业设计方面的应用——从零部署到高可用Web服务》，系统讲解了如何基于CentOS Stream 9搭建可复现、可答辩、可扩展的服务端原型，涵盖基础设施即代码（IaC）、安全配置（SELinux/Firewalld）、高性能Web架构（Nginx + uWSGI + Flask）、HTTPS加密（Let’s Encrypt）及监控体系（Prometheus + Grafana）等核心技术。通过Ansible自动化部署、Flask应用开发与Nginx反向代理配置，结合真实代码案例，帮助学生在4～6周内完成具备真实实验数据支撑的毕业设计。; 适合人群：计算机、软件工程、大数据、人工智能等专业的应届本科或研究生毕业生，具备Linux基础和基本编程能力者优先。; 使用场景及目标：①用于构建高并发博客、深度学习推理平台或边缘计算网关等毕业设计课题；②实现在论文中展示自动化部署、性能优化、安全加固和监控可视化等关键技术环节，提升答辩说服力与学术可信度；③支持HTTPS、缓存加速、服务监控等功能集成，满足“可复现、可扩展”的科研要求。; 阅读建议：建议结合文中提供的目录结构、Ansible脚本、Flask应用代码和Nginx模板进行动手实践，重点关注IaC思想与实验数据采集方法，并将关键配置截图和性能图表直接嵌入论文，增强论证真实性与技术深度。

请说明什么是盒模型，并简要描述标准盒模型与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]。