标准的css盒模型，低版本ie盒模型有什么不同？自己总结的

最新推荐文章于 2022-01-10 12:31:34 发布

原创最新推荐文章于 2022-01-10 12:31:34 发布 · 423 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css盒模型 #ie盒模型 #区别 #面试

本文介绍了盒模型的两种类型：IE盒模型和W3C盒模型，并详细解释了它们之间的区别。主要内容包括盒模型的组成部分：内容(content)、填充(padding)、边界(margin)和边框(border)，以及IE盒模型如何将边框和填充计算进宽度。

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

（1）盒模型有两种， IE 盒子模型、W3C 盒子模型；
（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；
（3）区别： IE的width部分把 border 和 padding计算了进去;

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Sleepy Bunny瞌睡兔

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？

liuhao9999的博客

03-23

686

（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分 IE盒模型和W3C标准盒模型的区别：（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding（2）IE盒模型：属性width，height包含content、border和padding，指的是content+padding+bord.

详解CSS 怪异盒模型和标准盒模型

09-24

盒模型分为两种主要类型：W3C标准盒模型和IE怪异盒模型，这两种模型在处理元素的宽度和高度以及内边距和边框的方式上有所不同。 **标准盒模型**是W3C（万维网联盟）推荐的盒模型。在这个模型中，一个元素的总宽度...

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

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

qq_41981432的博客

04-15

3230

CSS盒子模型: 外边距(margin) 内边距(padding) 边框(border) 内容区(width、height)CSS盒子模型与低版本IE的盒子模型的区别主要在于：宽和高不一样标准的CSS的盒子模型的宽高：内容区的宽高低版本IE的盒子模型的宽高：内容区+内边距+边框...

介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？

LuckXinXin的博客

01-29

202

有两种， IE盒子模型、W3C盒子模型；盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；区别： IE的content部分把 border 和 padding计算了进去; 盒子模型构成：内容(content)、内填充(padding)、边框(border)、外边距(margin) IE8及其以下版本浏览器，未声明 DOCTYPE，内容宽高会包含内填充和边框，称为怪异盒模型(IE盒模型) 标准(W3C)盒模型：元素宽度 = width + p.

介绍一下标准的css盒子模型？低版本的IE的盒子模型有什么不同的？

weixin_42632642的博客

10-29

363

1、有两种盒子模型：IE盒子模型（border-box）和W3C标准盒模型（content-box）。盒模型组成：内容（content）、填充（padding），边框（border），边界（margin）四个部分。 IE盒模型和W3盒模型的区别：（1）IE盒模型的width包含：content+border+padding （2）W3C盒模型的width只包含：content 在ie8+已上的浏览器的浏览器默认是标准盒模型，可以通过css3 的新特性box-sizing改变其属性。如果在i

CSS+盒模型,css盒模型面试题,HTML

09-10

CSS盒模型有两种不同的实现方式，即标准盒模型（W3C盒模型）和IE盒模型（怪异盒模型）。两者的主要区别在于元素的总宽度和高度的计算方式。 - **标准盒模型**：元素的总宽度和高度只包括内容区域的宽度和高度，内...

css盒子模型图解

09-25

本文将详细介绍CSS盒子模型的基本概念、组成部分及其两种不同的表现形式：标准W3C盒子模型与IE盒子模型。 #### 二、CSS盒子模型概述 CSS盒子模型是基于矩形的概念来描述页面元素布局的。每个HTML元素都可以被视为...

《50道CSS基础面试题（附答案）》中的答案真的就只是答案吗？

weixin_34198583的博客

03-20

400

背景想想自己为什么要写这个，难道不是因为这篇《50道CSS基础面试题（附答案）》文章最近被转载的多，比较多而凑热闹蹭热点？显然，肯定是因为这样我才打算写的。而且还有就是，我的公众号也很久没有更新了，微信说长期不更新会关掉公众号的，怕…… 对于 CSS 方面的工作以及跟 CSS 有关的东西，我已经有一些时间没有接触了，自从离开上家公司到了...

标准的CSS的盒⼦模型与 低版本IE的盒⼦模型有什么不同

笑望灬星辰

04-02

162

标准的CSS的盒⼦模型与 低版本IE的盒⼦模型有什么不同有两种 IE 盒⼦模型、 W3C 盒⼦模型；盒模型：内容(content)、填充( padding )、边界( margin )、边框( border )；区别： IE 的 content 部分把 border 和 padding 计算了进去; ...

介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的

阿哲的博客

07-12

2562

CSS盒子模型：由四个属性组成的外边距(margin)、内边距(padding)、边界(border)、内容区(width和height);标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样　　标准的css盒子模型宽高就是内容区宽高；　　低端IE css盒子模型宽高内边距﹢边界﹢内容区；标准的CSS盒子模型与低版本的盒子模型有什么不同的？标准的CSS盒子模型的宽度指的是内容区（co

面试题：介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？

weixin_50736511的博客

01-10

213

CSS盒子模型: 外边距(margin) 内边距(padding) 边框(border) 内容区(width、height) CSS盒子模型与低版本IE的盒子模型的区别主要在于：宽和高不一样标准的CSS的盒子模型的宽高：内容区的宽高 低版本IE的盒子模型的宽高：内容区+内边距+边框 ...

标准的盒子模型，与低版本IE的盒子模型有什么区别

zhzijun的博客

09-09

483

（1）有两种， IE 盒子模型、W3C 盒子模型；（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框 (border)；（3）区别：标准的CSS盒子模型和低端IE CSS盒子模型不同：宽高不一样标准的css盒子模型宽高就是内容区宽高；低端IE的content部分把 border 和 padding计算了进去; ...

[css] 说说你对低版本IE的盒子模型的理解

歌谣的博客

02-20

480

[css] 说说你对低版本IE的盒子模型的理解一个CSS盒子由四部分组成，由内到外依次是：content、padding、border、margin。所谓盒子模型定义的是盒子宽高的计算方法，IE盒子模型的宽高为content、padding、border之和。而W3C盒子的宽高仅为content。从页面布局来说前者实际上更实用一点，这也是后来W3C提供box-sizing属性用于切换盒子模型的原因。个人简介我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，但坚持一定很酷。欢迎大家一起讨论

标准的CSS的盒子模型与低版本IE的盒子模型有什么不同

ljl0433的博客

11-27

874

CSS中盒子模型的组成由内容区（content）、内边距（padding）、边框（border）、外边距（margin）组成。对于盒子模型，W3C标准和低版本IE浏览器是不一样的，主要区别是内容部分的width和height的定义不同。我们常说的盒子模型一般指W3C标准的盒子模型。下面对此做一个区分：如果一个元素各组成部分如下： margin：10px； border：2px； padding：5px； width：200px；height：100px，那么： W3C标准内容部分的width就单单

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

充电五分钟...

08-12

2381

元素的外边距（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 盒模型和W3C盒模型

吴小粥的博客

10-25

1284

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

问题一：什么是css盒模型？标准盒模型和IE盒模型有什么区别？

IT侠客行的博客

11-06

515

css盒模型：本质上是一个盒子，用于封装周围的HTML元素，它包括：边距margin，边框border，填充padding，和实际内容content。标准 W3C 盒子模型的范围：包括 margin、border、padding、content， width 部分只包含 content 不包含其他部分。 IE 盒子模型的范围：也包括 margin、border、padding、content，和...

DIV+CSS两种盒子模型（W3C盒子与IE盒子）

热门推荐

wzqnls

07-25

1万+

在辨析两种盒子模型之前，先简单说明一下什么叫盒子模型。原理：先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS盒子模式都具备这些属性。这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也就是能装东西的一种箱子，也具有这些属性，所以叫它盒子模式。特点：每个盒子都

介绍一下标准的css的盒子模型？与低版本ie的盒子模型有什么不同的？

06-28

### 回答1： CSS的盒子模型是指，页面上的每个元素都看作一个矩形的盒子，该盒子有四个边框（border）、内边距（padding）、外边距（margin）和内容区域（content）。在最新的CSS3标准中，又增加了一些盒子模型的新属性，例如box-sizing等。 低版本的盒子模型与最新的盒子模型不同之处在于，低版本的盒子模型是指，它只考虑了内容区域，而没有考虑边框和内边距。这就导致在计算宽度时，需要将边框和内边距分别加上去，才能得出实际宽度。而在最新的盒子模型中，宽度包括了边框和内边距，更加符合直觉，也更加方便使用。 ### 回答2： CSS盒子模型是指在HTML文档中，每一个元素被看成一个盒子，包括外边距（margin）、边框（border）、内边距（padding）和内容（content）四个相互嵌套的部分，这四个部分构成了一个完整的盒子模型。标准的CSS盒子模型中，元素的width和height属性只包括content部分的宽度和高度，而不包括padding和border。这意味着，如果我们将元素的宽度设置为100px，同时它还有10px的padding和1px的border，那么在浏览器中显示出来的宽度将是100+2*10+2*1=122px。此外，在标准盒子模型中，内边距和边框是向内的，它们不会增加元素的尺寸。而在低版本IE浏览器中，元素的width和height属性包括了content、padding和border三个部分的宽度和高度，即如果将元素的宽度设置为100px，同时它还有10px的padding和1px的border，那么在IE浏览器中显示出来的宽度将是100px。此外，在低版本IE浏览器中，内边距和边框是向外的，它们会增大元素的尺寸，这与标准盒子模型有很大的不同。这些差异可能会导致在不同浏览器中显示不一致的问题。为了避免这种问题，我们需要在CSS中显式地设置盒子模型，可以使用box-sizing属性来实现。将box-sizing设置为border-box可以让元素遵循低版本IE盒子模型的规则，即元素的width和height包括了content、padding和border三个部分的宽度和高度。而将box-sizing设置为content-box则代表采用标准盒子模型。 ### 回答3： CSS盒子模型是指HTML元素的大小及其位置是如何被计算和渲染的。标准的CSS盒子模型包含四个部分：内容区域、内填充区域、边框区域和外填充区域。这四个部分都是从内向外递增的，它们的总宽度等于元素的宽度。内容区域包含着HTML元素实际的内容；内填充区域在内容区域的外部，可以用来设置内容与边框之间的空隙；边框区域在内填充区域的外面，为整个HTML元素设置边框样式和边框宽度；外填充区域则是在边框区域外面，用来设置HTML元素与其它元素之间的空隙。与此相对应的是低版本的IE盒子模型，它与标准的CSS盒子模型有所不同。低版本IE盒子模型同样包含四个部分，但是它的实现方法是从外向内的，也就是说，它的总宽度包括了内容区域、内填充区域和边框区域，而不是仅包括内容区域。这种盒子模型的缺陷是会导致计算元素宽度时出现误差，因为它会把填充和边框的宽度也计算在内。这种误差有时候会很小，但是在某些情况下却会导致元素的布局出问题。为了解决这个问题，CSS引入了更为精确的标准CSS盒子模型。