IE-什么是盒模型？

最新推荐文章于 2023-08-04 15:33:35 发布
最新推荐文章于 2023-08-04 15:33:35 发布
阅读量2.7k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56232007/article/details/115078118
版权

IE盒模型

IE盒模型又叫怪异盒模型。在IE8以上以及其他的浏览器中使用的盒模型都是标准盒模型，但是IE低版本使用的是IE盒模型。

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

IE盒模型设置的宽为：整个盒子所占有的宽度。（内容的宽+左右padding+左右border）

标准盒模型设置的宽：内容区域的宽。

设置IE盒模型的方法

box-sizing: border-box；
下雪不过冬天
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
网页里的两种盒子模型(W3C盒子模型、IE盒子模型)
09-22
IE盒子模型，又称怪异盒模型，是Internet Explorer早期版本（尤其是IE5和IE6）采用的模型。在这个模型中，元素的宽度(width)和高度(height)已经包含了内边距和边框，因此在计算总尺寸时，不需要额外加上这些值。这...
CSS盒子模型是什么
09-24
CSS盒子模型有两种主要类型：标准盒子模型和IE盒子模型。在标准盒子模型中，内容区域的宽度和高度不包括内填充和边框，而在IE盒子模型中，内容区域的大小包括了内填充和边框。为了避免浏览器兼容性问题，通常推荐...
【基础类】—CSS盒模型的全面认识
最新发布
m0_37616866的博客
08-04 794
全面理解盒模型以及BFC
CSS 选择器，一篇就够了
weixin_34192993的博客
02-27 144
摘自 MDN web docs 简介 选择器是 CSS 规则的一部分且位于 CSS 声明块前。 选择器可以被分为以下类别： 简单选择器（Simple selectors）：通过元素类型、class 或 id 匹配一个或多个元素。 属性选择器（Attribute selectors）：通过 属性 / 属性值 匹配一个或多个元素。 ...
什么是盒子模型？IE盒模型与Chrome盒模型的区别？box-sizing的用法
qq_36507046的博客
10-15 1101
什么是盒子模型？IE盒模型与Chrome盒模型的区别？box-sizing的用法
标准盒模型和IE盒模型
myboke1的博客
12-15 9191
盒模型的组成，由里向外分别是content，padding，border，margin 盒子模型在页面中占的实际宽度是：（margin+padding+border）*2 + width，高度同理。 盒模型有标准盒模型和ie盒模型，二者的区别是 标准盒模型的内容大小就是content的大小，而ie盒模型的大小则是content+padding+border总的大小。 通过设置 box-si...
标准盒子模型与IE盒子模型的区别
wzb的博客
12-15 725
标准盒模型又称为W3C盒子模型，盒子模型的宽度指的是content，标准盒子对应的css属性box-sizing: content-box;IE盒子模型的宽度包括content，padding，border；对应的css属性box-sizing: border-box;
IE盒子模型和标准W3C盒子模型
12-09
主要有两种盒子模型：**IE盒子模型**和**标准W3C盒子模型**。 **标准W3C盒子模型**遵循Web标准，它将每个HTML元素视为一个矩形盒子，包括四个部分：**内容(content)**、**内边距(padding)**、**边框(border)**和**...
IE6盒子模型没问题 详测双倍边距
09-25
在网页开发中，IE6（Internet Explorer 6）浏览器的盒子模型（Box Model）是一个重要的概念，它涉及到元素宽度、高度、内填充（padding）和边框（border）的计算方式。在W3C标准中，一个元素的总宽度等于其内容宽度...
标准盒子模型和IE盒子模型的区别
qq_27816595的博客
08-25 1940
标准盒子模型的 （height和width）只有content部分，而IE盒子模型则包括border + padding+ content
标准盒子模型和IE盒子模型
adobe1992
04-10 6811
盒子模型是css中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同，先来看看我们熟知的标准盒子模型： 从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。 　从上图可以看到 IE
CSS : W3C标准盒子模型和IE盒子模型
webEvelement的博客
07-30 2729
在写html与css的过程中，我们可以将每一个元素看做一个盒子，对于普通的浏览器以及IE浏览器，有两套不同的解析盒子的方法，第一种是W3C标准盒子模型，第二种是IE盒子模型，下面重点介绍这两个盒子模型的区别。 1.如何区分 在CSS中有一个属性叫做box-sizing,对于标准的盒子模型，属性值为border-box,d对于IE来说叫做content-box。 2.内容区，盒子大小，...
HTML的两种盒子模型
热门推荐
konghouy的博客
06-10 3万+
一、引入 在网站的制作中，一个复杂的页面，被划分为一个一个的小块。 通过这种划分，把网站的开发过程化整为零、化繁为简，以达到减少开发工作，减轻维护压力的目的。 在网页中，把这种划分后的小块形象的看成一个个的盒子。只有理解了盒子模型才能更好的排版，更好的编写网站界面 二、盒子的布局 把HTML中的元素看做是一个矩形的盒子（盛装内容的的容器），每个容器都是由元素内容、内边距（paddin...
介绍一下标准的CSS的盒子模型？低版本IE的盒子模型有什么不同的？
博客
03-01 5226
（1）有两种， IE 盒子模型、W3C 盒子模型； （2）盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)； （3）区  别： IE的content部分把 border 和 padding计算了进去; ...
盒模型
qq_44277429的博客
03-19 179
盒模型的浅显理解 一、盒子的分类 盒子的分类 不同的元素产生的盒子类型可能不同 一个元素，产生什么样的盒子，取决于它CSS dispaly属性 属性：dispaly 是否能继承：否 默认值：inline dispaly : none （空盒） dispaly : inline （行盒） dispaly : bolock （块盒） dispaly : 其他取值 二、盒子的组成 margin 外边距 控制与其他盒子之间的距离 boeder 边框 padding 内边距 边框与内容之间的距
ie的盒模型和标准模型
dhzp5170的博客
04-16 139
使用 box-sizing:content-box || border-box || inherit 原理图 计算 怪异模型|IE模型 div宽度（定死） = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度不会变化 标准模型 div宽度 = 内容宽度+border宽度+padding宽度 //改变border宽度，div宽度会变化 代码...
IE盒模型与W3C盒模型区别
weixin_30377461的博客
01-19 201
前两天被人问到，叫我解释一下标准盒模型与IE盒模型，额，当时只能说，知道一点，但是没有深入的去探讨过，所以下来之后就自己写了例子，亲自去验证并且查看了网上的一些资料，现将其整理如下： 一、css盒模型图解 1.W3C标准盒子模型 从上图可以看出，w3c盒子模型的范围包括margin、border、padding、content,并且content部分不包含其他部分。2.IE盒子模型 从...
介绍一下标准的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盒子模型。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值