标准盒模型和IE盒模型

最新推荐文章于 2024-07-20 22:27:34 发布

有爱的萌哥

最新推荐文章于 2024-07-20 22:27:34 发布

阅读量217

点赞数

分类专栏：个人总结前端面试考点文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/GJM_Memory/article/details/125915028

版权

个人总结前端面试考点专栏收录该内容

7 篇文章 0 订阅

订阅专栏

标准盒模型和IE盒模型

可以通过box-sizing设置盒模型（默认值：content-box 标准盒模型）

box-sizing: border-box; /* IE盒模型（怪异盒模型） */
box-sizing: content-box; /* 标准盒模型 */

IE盒模型（怪异盒模型）：

设置的盒子宽度 = border+padding+内容宽度

标准盒模型：

设置的盒子宽度 = 内容宽度

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

有爱的萌哥

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

Marco_30的博客

01-21

3309

标准盒模型与IE盒模型的区别 1.标准盒模型 标准盒模型在这里插入图片描述也称W3C盒模型，现在大部分浏览器都采用标准盒模型，在标准模式下，一个元素所占的总宽度=width(content)+padding(左右)+margin(左右)，元素的高度同理也是一样的。如图所示： 2.IE盒模型标准盒模型也称怪异盒模型，IE6之前的浏览器默认采用怪异盒模型，在怪异模式下，一个元素所占的总宽度=width+margin(左右)，（即width包含了border+padding+content）元素的高度

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

12-30

由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型）用两个简单的例子分别介绍下这两个盒子模型：标准盒模型： &lt...

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

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

12-09

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

标准W3C盒子模型和IE盒子模型CSS布局经典盒子模型

xkdamowang的博客

11-09

328

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

web两种盒子模型详解

最新发布

Yoahcc的博客

07-20

1063

前端两种盒子模型深入学习

标准盒模型和ie盒模型

链珠的博客

11-29

3354

当对一个文档进行布局时，浏览器会对css 基础框盒模型，将所有元素表示为一个个的矩形盒子。一个盒子由content、padding、 border、margin组成。 <style> .box { width: 200px; height: 100px; padding: 20px; background: pink; } </style> .

【CSS】标准盒模型和IE盒模型（box-sizing:border-box）

y_coder的博客

05-22

2322

换句话说，边框和内边距的尺寸会从元素的内容区域中减去，使得内容区域的尺寸保持不变。例如，如果一个元素的宽度设置为200px，内边距设置为10px，边框设置为5px，那么元素的内容区域的宽度将为200px - 2 * 10px - 2 * 5px = 170px。content-box 是 CSS 盒子模型的默认值，因此在不指定盒子模型属性时，浏览器会默认使用 content-box 来计算盒子的宽度和高度。在Web开发中，每个元素都被视为一个矩形的盒子，由内容区域、内边距、边框和外边距组成。

标准盒模型和IE盒模型的区别

06-10

标准盒模型和IE盒模型是CSS中盒模型的两种不同实现方式：标准盒模型：元素的宽度和高度只包括内容的宽度和高度，不包括边框（border）、内边距（padding）和外边距（margin）。 IE盒模型：元素的宽度和高度包括...

盒子模型（标准盒子模型与IE盒子模型）

qq_40818233的博客

08-01

1463

做前端的都知道，盒子模型是我们前端开发网页必须要用的布局方法，当然了，盒子模型只是一个统称，那么下面我们就来具体说下盒子模型的种类有哪些。盒子模型主要分为三大类：标准盒子模型，IE盒子模型，弹性盒子这篇文章当中主要讲一下标准盒子模型以及IE盒子模型一、标准盒子模型在W3C标准下，盒子模型从外到里分别为magin（外边距）、border（边框）、padding（内边距）、conten...

IE盒模型和标准盒模型

weixin_57153112的博客

07-21

2602

IE盒模型和标准盒模型

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

xiaochumen0707的博客

07-18

4620

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

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

wzb的博客

12-15

762

标准盒模型又称为W3C盒子模型，盒子模型的宽度指的是content，标准盒子对应的css属性box-sizing: content-box;IE盒子模型的宽度包括content，padding，border；对应的css属性box-sizing: border-box;

IE盒模型和标准盒模型的区别

qq_46617584的博客

05-17

2257

在以前IE5.5以及更早的IE浏览用的不是标准盒模型，我们称之为IE盒模型。先说重要的区别：两者的区别在于content的不同， IE盒模型：width=content+border+padding 标准盒模型：width=content box-sizing:border-box || content-box || inherit 当使用content-box时：页面将采用标准模式来解析计算，content-box也是默认模式当使用border-box时，页面将采用怪异模式解

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

鹤屋学姐的虎牙的博客

08-21

974

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

标准盒子模型和IE盒子模型的区别

qq_27816595的博客

08-25

1949

标准盒子模型的（height和width）只有content部分，而IE盒子模型则包括border + padding+ content

IE盒模型与W3C标准盒模型

liux6687的博客

09-06

164

网页盒子模型存在两种：（1）有两种， IE 盒子模型、W3C 盒子模型；（2）盒模型：内容(content)、填充(padding)、边界(margin)、边框(border)；（3）区别： IE的content部分把 border 和 padding计算了进去; 在两种不同模型网页里，定义了相同CSS属性的元素显示效果是不一样的，下面就用公式来区分这两种不同的盒子模型。 ...