Chrome盒子模型和IE盒子模型的区别

&&&&&&&&&&&&

已于 2022-01-25 14:22:44 修改

阅读量779

点赞数 1

文章标签： chrome github html

于 2022-01-25 14:05:24 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_62614119/article/details/122684114

版权

本文详细解释了浏览器中的盒子模型概念，包括Chrome盒模型和IE盒模型的区别。Chrome盒模型的内容大小仅包含content，而IE盒模型的内容大小则包含了content、padding和border。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

【序】盒子模型是什么呢？
每个元素运行在浏览器中占的位置大小
这个盒子结构一层一层就像套娃一样
从外往里看依次为：
margin（外边距） -> padding（内边距） -> border (边框) -> content （内容）

【文章标题：区别】
关键字【内容】：Chrome 盒子模型内容大小等于content（内容）大小；
关键字【内容】：IE盒模型内容大小等于content（内容） + padding（内边距） + border (边框) 的总和。

~~助记：~~
关键字【内容】：
Chrome浏览器是娃最里面的一个娃，而IE 除了自己的外边距外，都认定是自己的内容

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

&&&&&&&&&&&&

关注关注

1
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS盒子模型汇总

m0_67846661的博客

05-18

591

在使用CSS进行网页布局时，我们一定离不开的一个东西————盒子模型。盒子模型，顾名思义，盒子就是用来装东西的，它装的东西就是HTML元素的内容。或者说，每一个可见的 HTML 元素都是一个盒子，下面所说的盒子都等同于 HTML 元素。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒子模型允许我们在其它元素和周围元素边框之间的空间放置元素。 盒子模型(Box Model)： Margin(外边距)- 清除边框外的区域，外边距是透明的 Border(边.

前端面试宝典每日一题（5）IE盒模型与Chrome盒模型（正常盒模型和怪异盒模型）的区别？

小猿同学628的博客

03-20

747

IE盒模型与Chrome盒模型（正常盒模型和怪异盒模型）的区别？

参与评论您还未登录，请先登录后发表或查看评论

简述谷歌,盒模型与IE,盒模型的区别

m0_60069787的博客

08-03

335

简述谷歌,盒模型与IE,盒模型的区别

Chrome调整CSS盒模型自动生成代码

y4ung

05-03

4656

问题今天在编写一组标签和输入框的时候遇到了这样一个问题，标签和输入框的间隔拉的太开了：小编我对CSS也不是很了解。在Brackets里修改了 style.css里的样式以后，发现没啥卵用。解决最后在页面里审查元素的时候发现了有个盒模型。然后就试着修改了一下参数，发现Chrome在我的html代码里加上了修改后的内容。鼠标右键，审查元素；找到间距有问题的地方，修改盒模型的参数； 3.比如：修改为

简述Chore盒模型和IE盒模型的区别

L_ZMZ的博客

05-13

280

HTML+CSS基础知识

【每天一个知识点】ie盒子和谷歌盒子的区别

youshenshiwoye的博客

04-19

564

1.ie盒子和谷歌盒子的区别一张图解释 W3C就是谷歌盒子 margin（外边距） -> padding（内边距） -> border (边框) -> content （内容）【文章标题：区别】关键字【内容】：Chrome 盒子模型内容大小等于content（内容）大小；关键字【内容】：IE盒模型内容大小等于content（内容） + padding（内边距） + border (边框) 的总和。助记：关键字【内容】： Chrome浏览器是娃最里面的一个娃，而IE 除了自己

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

09-27

在Web开发中，有两种主要的盒子模型：IE盒子模型和标准W3C盒子模型，这两种模型对于元素尺寸的计算方式有所不同，因此对页面布局有着深远的影响。 **标准W3C盒子模型**遵循W3C规范，它将每个HTML元素视为一个矩形...

css盒子模型图解

12-13

然而，Internet Explorer（IE）采用了不同的盒子模型，称为IE盒模型或怪异盒模型。在这个模型下，内容区域包括了边框和内边距，使得元素的实际大小和占据的空间相等。因此，上述例子在IE盒模型下，元素的总宽度为...

css盒子模型 css margin 外边框合并

09-25

由于IE5和IE6浏览器在怪异模式下的盒子模型与标准模式存在差异，导致了兼容性问题。在标准模式下，元素宽度仅指内容区域的宽度，而怪异模式下的宽度包括内容、内边距和边框。这种差异有时会导致布局的不一致，因此在...

什么是 IE 盒子模型，与 W3C 盒子模型有何区别？

最新发布

03-08

### IE 盒子模型与 W3C 盒子模型的区别在网页设计和前端开发过程中，了解不同浏览器对盒子模型的不同解释非常重要。IE 浏览器早期版本采用了一种不同于 W3C 标准的盒子模型处理方式，这导致了很多跨浏览器兼容性的...

什么是盒子模型？IE盒模型与Chrome盒模型的区别？box-sizing的用法

qq_36507046的博客

10-15

1257

什么是盒子模型？IE盒模型与Chrome盒模型的区别？box-sizing的用法

浏览器中的盒子模型

weixin_45092282的博客

11-23

678

浏览器中的盒模型

标准盒子模型和IE盒子模型

adobe1992

04-10

6869

盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型：从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。　从上图可以看到 IE

浏览器的盒子模型 Box Model

黄贺群的专栏

10-13

2796

盒子模型(Box Mode)是CSS中一个重要的概念，对于网页中的大部分对象，实际呈现形式都是一个盒子形状对象，理解了盒子模型才能更好的排版。对于盒子，我们最关心的就是盒子的尺寸：丫的要占多大地皮？ 其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型，他们对盒子模型的解释各不相同，简单理解一下，方便我们了解为何IE这么让人痛苦，为何要为IE写一堆HOCK。这里再顺便鄙视一下，IE总是与标准对着干。 W3C家的盒子 从上图可以看到标准 W3

盒子模型&position定位

weixin_34343308的博客

07-02

128

有时候深深的感觉语文这门课程其实很有用，至少以前学的时候没有感觉到直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之：认真阅读小心品味当然，前面的孤言自语和本文无关，只是笔者在有段时间内误解一个与本文有关的知识点源于阅读的不小心，笔者在写本篇文章之前阅读了大量的资料，试图以一种简单易懂的方式把布局的精髓展现给读者； 盒子模型：所...

标准盒模型和IE盒模型（区别）

xiaochumen0707的博客

07-18

4925

标准盒模型先不说它的盒子占用宽度等于什么，实际宽度等于什么加什么看例子总结，更容易理解。 .demo{ width: 200px; height: 200px; background-color :pink; padding: 20px; margin: 10px; border: 10px solid red; /* margin: auto; */ } 来图：为了方便看清楚，截了整个图,箭头

【css】iE和chrome盒模型表现不一致解决办法

qq_39443301的博客

12-09

1104

css盒模型在不同浏览器表现不一致 chorme是标准规范。即width和height不包含padding和border 但ie的宽高包含padding和border 【解决办法】加上 doctype 声明<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 这样ie中也会按照标准解析 ...

标准盒子模型与IE盒子模型区别

鹤屋学姐的虎牙的博客

08-21

1017

标准盒子模型 元素宽度=margin*2+border*2+padding*2+width; IE盒子模型元素宽度=margin*2+width;

标准盒模型和IE盒模型

myboke1的博客

12-15

9292

盒模型的组成，由里向外分别是content，padding，border，margin 盒子模型在页面中占的实际宽度是：（margin+padding+border）*2 + width，高度同理。盒模型有标准盒模型和ie盒模型，二者的区别是标准盒模型的内容大小就是content的大小，而ie盒模型的大小则是content+padding+border总的大小。通过设置 box-si...