IE盒模型

最新推荐文章于 2023-12-06 17:46:49 发布

转载最新推荐文章于 2023-12-06 17:46:49 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhang-jian/p/4153322.html

本文介绍了IE盒模型与W3C盒模型的区别，IE盒模型在IE5.5及更早版本中使用，块元素实际宽度仅包含width。W3C盒模型则在width基础上加上padding和border。此外还探讨了IE盒模型出现的条件。

IE5.5及更早的版本使用的是IE盒模型，在在IE6及以上版本的浏览器中，浏览器支持一种解决了这种差异的可选的渲染模式，也开始遵循标准模式。

IE盒模型和W3C盒模型的差异：

IE盒模型，块元素的实际宽度=width（包含padding和border）；

W3C盒模型，块元素的实际宽度=width+padding+border；

IE盒模型

而IE盒模型的出现条件：

IE5.5之前版本

IE怪异模式（文档声明缺失或不完整；文档类型为HTML3之前的版本；使用HTML 4.0 Transitional或Frameset的文件类型描述且系统标识符（URI）不存在时；在DOCTYPE声明之前出现SGML注释或者其它无法识别的内容时；文档任何地方有错误时；注释符相遇时出现末尾文字重复；Internet Explorer 6在DOCTYPE声明之前出现XML声明）

在支持box-sizing的浏览器中使用box-sizing:border-box;

转载于:https://www.cnblogs.com/zhang-jian/p/4153322.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30414635

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

CSS盒模型的定义以及标准盒模型与IE盒模型的区别

2402_84885073的博客

07-14

568

CSS盒模型是网页布局和样式设计的基础，它允许开发人员精确地控制元素的尺寸和布局。标准盒模型和IE盒模型是盒模型的两种不同计算方式，它们的主要区别在于如何计算元素的宽度和高度。在现代网页设计中，标准盒模型更为常见和推荐，因为它提供了一种更为直观和易于理解的布局方式。然而，了解IE盒模型仍然有助于处理一些与旧版本IE浏览器相关的兼容性问题。

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

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

小猿同学628的博客

03-20

768

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

盒模型

weixin_44346202的博客

10-12

111

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

ie的盒模型和标准模型

dhzp5170的博客

04-16

208

使用 box-sizing:content-box || border-box || inherit 原理图计算怪异模型|IE模型 div宽度（定死） = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度不会变化标准模型 div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化代码...

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

12-09

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

IE盒模型（怪异盒模型）

GANKB的博客

02-03

601

IE盒模型（怪异盒模型）触发条件：box-sizing: border-box; 标准盒模型：总盒高 = padding（上下）+ border（上下）+ height 总盒宽 = padding（左右）+ border（左右）+ width IE盒模型(怪异盒模型): 总盒高 = height 总盒宽 = width ...

网页里的两种盒子模型(W3C盒子模型、IE盒子模型)

09-22

IE盒子模型，又称怪异盒模型，是Internet Explorer早期版本（尤其是IE5和IE6）采用的模型。在这个模型中，元素的宽度(width)和高度(height)已经包含了内边距和边框，因此在计算总尺寸时，不需要额外加上这些值。这...

IE盒模型和标注盒模型

qq_43504916的博客

08-04

220

IE盒模型（border-box）：width和height包含padding和border（IE5及其以下都是IE盒模型，IE6-IE8在混杂模式下是IE盒模型） W3C标准盒模型（content-box）：width和height不包含padding和border（IE8以上都是标准盒模型，IE6-IE8在标准模式下是标准盒模型）混杂模式和标准模式随着WEB的发展，兼容性问题的解决越来越显得迫切，随即，各浏览器厂商发布了按照标准模式（遵循各厂商制定的统一标准）工作的浏览器，比如IE6就是其中之一。考

IE盒模型和标准盒模型

weixin_57153112的博客

07-21

2800

IE盒模型和标准盒模型

IE盒模型和W3C盒模型

qq_34559257的博客

06-11

331

1.什么是盒模型？盒模型的组成：padding+border+content+margin。有两种盒模型，一种是标准（W3C）盒模型，它的宽高：content 一种怪异（IE）盒模型，它的宽高:padding+border+content2.怎么设置盒模型？ box-sizing:border-box; //IE盒模型 bo...

IE 盒模型和W3C盒模型

吴小粥的博客

10-25

1303

在CSS中有两种盒模型： IE盒模型的宽度是边框+padding+内容宽度 W3C盒模型的宽度就是内容宽度 box-sizing属性可以设置元素应用哪一种盒模型。

IE-什么是盒模型？

m0_56232007的博客

06-10

2945

IE盒模型 IE盒模型又叫怪异盒模型。在IE8以上以及其他的浏览器中使用的盒模型都是标准盒模型，但是IE低版本使用的是IE盒模型。 IE盒模型与标准盒模型的区别 IE盒模型设置的宽为：整个盒子所占有的宽度。（内容的宽+左右padding+左右border）标准盒模型设置的宽：内容区域的宽。设置IE盒模型的方法 box-sizing: border-box； ...

盒模型（IE，W3C）

赵乘风_i

02-29

471

W3C盒模型 IE盒模型从上图可以看到 ie 盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是： ie 盒子模型的 content 部分包含了 border 和 pading。两者的不同体现在width和height上 IE：width=content+padding+border W3...

CSS盒模型: ie盒模型 / 标准盒模型

充电五分钟...

08-12

2456

元素的外边距（margin）、边框（border）、内边距（padding）、内容（content）就构成了CSS盒模型盒模型分为：IE/怪异盒模型和 W3C标准盒模型。标准盒模型：width/height = content宽高，不包含border和padding; IE 盒模型： width/height = content + padding + border，包含 border和padding。 Css3新属性box-sizing: content-box | border-box | in.

标准盒模型和IE盒模型（又称为怪异盒模型）

qq_36825145的博客

12-06

715

属性来分别设置盒模型类型。在CSS3中，可以通过。

CSS 盒模型标准盒模型 IE盒模型

qq_42816270的博客

01-31

1404

CSS 盒模型标准盒模型 IE盒模型。在IE盒模型中，设置的 width 和 height，包含了 border , padding, content-box 的宽度和高度的和。在标准盒模型，设置的width和height，实际上设置的是 content box 的宽度和高度。加上 padding 和 border 的 width 和 height 构成一个盒子的宽高。

5、盒子模型（标准和IE）

weixin_45065754的博客

04-04

281

1、盒子模型盒子模型类型 box-sizing属性标准盒子模型 content-box IE盒子模型 border-box – – 标准盒子模型实际宽高 width+padding+border IE盒子模型 width 网页布局：一个一个盒子的布局写好后，拼接好一起，就组合成了一个网页 2、源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

CSS盒模型

sssnanPl的博客

05-05

535

css盒子模型，就是可以装东西的盒子，比如 div、li、h 等，而 input、img 就不是盒子。盒模型：包括内容（content）、内边距（padding）、边框（border）、外边距（margin），内容又分为宽（width）和高（height）。盒模型类型盒模型分为IE盒模型和W3C标准盒模型。 IE盒模型（border-box） IE盒模型：width 和 height 包含 content、padding、border。 W3C标准盒子模型 W3C标准盒子模型：与IE盒模型不同，宽和

标准盒模型和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盒模型的方式来解析尺寸，这有助于简化样式控制并且保持一致性的用户体验。