30.html-IE标准盒模型

最新推荐文章于 2023-02-03 13:57:08 发布

yy小栗子

最新推荐文章于 2023-02-03 13:57:08 发布

阅读量159

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/weixin_50913764/article/details/123885574

版权

本文探讨了CSS布局中IE与标准浏览器的盒模型差异。在IE盒模型（box-sizing:border-box）中，元素的宽度和高度包括了padding和border，而标准盒模型（content-box）则将它们独立计算。理解这一差异对于跨浏览器的网页布局至关重要，确保在不同环境下样式的一致性。

摘要由CSDN通过智能技术生成

IE: 会压缩内容部分达到设置padding border的时候不会增大盒子的宽高的我们设置的width height属性就是实际的宽高
标准：默认值盒子实际宽高在设置的width height的属性之上还要加上 padding border
色盒子只包含了content内容部分

标准：---IE box-sizing：border-box
IE：---标准 box-sizing：content-box

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yy小栗子

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

html盒子标准模型,CSS标准盒模型与IE盒子模型以及弹性盒模型

weixin_29268385的博客

06-07

530

CSS2.1中提出了盒模型的概念，盒模型高度提炼了所有元素的基本特征，即标准盒模型，CSS3中进一步扩展，提出了弹性盒模型的概念什么是盒模型，我们可以先直观的看一个东西打开Chrome浏览器，F12打开开发者工具我们能看到这个东西margin,padding,border，平常我们在设置这些属性的时候就是盒模型的一个应用~盗一张图来说明Margin(外边距) - 清除边框外的区域，外边距是透明...

html 盒子 w3c,IE盒子模型和标准W3C盒子模型

weixin_33308579的博客

06-24

216

IE盒子模型和标准W3C盒子模型互联网发布时间：2009-04-02 19:33:52 作者：佚名我要评论网页制作Webjx文章简介：盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型有两种，分别是 IE 盒子模型和标准 W3C 盒子模型。盒子模型是CSS中一个重要的概念，理解了盒子模型才能更好的排版。其实盒子模型是CSS中一个重要的概念，理解了盒子模型...

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

html 盒模型ie,W3C 标准盒模型和 IE 模型

weixin_36155754的博客

06-09

105

CSS 中有两种盒模型，分别是 IE 盒模型 和 W3C 标准盒模型。从上图可以看到标准 W3C 盒模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒模型不同的是：IE 盒模型的 content 部分包含了 b...

html 盒模型ie,标准盒模型与IE盒模型之间的转换

weixin_39926639的博客

06-09

381

首先上图，这两张很明显可以看出IE盒模型和标准盒模型之间的差别。当然今天不是去细细追究两种模型具体是怎么去计算布局的，那个很多文章已经已经有过了，不再重复。以前刚开始学习盒模型的时候，就学到的是IE的盒模型不规范，不符合标准的盒模型，要加文档申明把IE的转换为标准的。要给文档头部加上 DOCTYPE 声明。让所有浏览器中都可以显示“标准 W3C 盒子模型”。为了让网页能兼容各个浏览器。殊不知，真正...

WEB入门.六盒子模型

热门推荐

张晨光老师的播客

02-16

1万+

学习内容ØCSS盒子模型Ø盒子之间的关系Ø页面元素定位能力目标Ø理解盒子模型Ø理解内容与表现分离的优点Ø理解并掌握盒子之间的关系Ø理解并掌握绝对定位与相对定位的用法本章简介上一章节中已经讲解了页面布局的基础知识，了解了设计一个标准的 XHTML页面需要遵循的规范，例如：标签需要关闭、使用

css标准盒子模型与IE盒子模型

卡卡西：一个擅长拷贝的前端程序员

10-14

1535

CSS中的盒子模型包括IE盒子模型（IE6以下）和标准的W3C盒子模型。这两种盒子模型都包含有内容（content）、填充（padding）、边框（border）、边界（margin）这四个组成部分，这四个部分都包含有top/right/bottom/left四个组成部分。如图可见，标准w3c盒子模型的宽度width不包含元素的边距padding和边框宽度border;下边再来看IE盒

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

12-09

主要有两种盒子模型：**IE盒子模型**和**标准W3C盒子模型**。 **标准W3C盒子模型**遵循Web标准，它将每个HTML元素视为一个矩形盒子，包括四个部分：**内容(content)**、**内边距(padding)**、**边框(border)**和**...

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

12-30

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

IE6盒子模型没问题详测双倍边距

12-10

2010-8-18 去腾讯面试，问IE6。...结论：标准模式时，IE6浏览器采用W3C盒子模型，此时IE6、Firefox表现一致。代码：复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional

HTML/CSS 默认盒模型和ie盒模型的区别？

最新发布

m0_74744119的博客

02-03

两者的区别在于content的不同，IE盒模型的content包含border，padding。

盒子模型：css盒子和IE盒子

weixin_44713688的博客

07-14

683

html（8）盒子模型 css盒子 Margin(外边距) - 清除边框外的区域，外边距是透明的。 Border(边框) - 围绕在内边距和内容外的边框。 Padding(内边距) - 清除内容周围的区域，内边距是透明的。 Content(内容) - 盒子的内容，显示文本和图像。最终元素的总宽度计算公式是这样的：总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距元素的总高度最终计算公式是这样的：总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距

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

qq_42816270的博客

01-31

1332

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

标准盒模型和IE盒模型

GJM_Memory的博客

07-21

227

可以通过box-sizing设置盒模型（默认值content-box标准盒模型）设置的盒子宽度=border+padding+内容宽度。设置的盒子宽度=内容宽度。

CSS(一) CSS背景

weixin_33728268的博客

06-08

205

为什么80%的码农都做不了架构师？>>> ...

html盒子模型

m4587的博客

07-18

2697

根据W3C的规范，元素内容占据的空间是由width/height属性设置的，而内容周围的padding和border值是另外计算的；在HTML文档中每个元素都被处理成一个矩形“盒子”，并且这个盒子由4部分构成，分别是content（内容区域）、padding（内边距）、border（边框）、margin（外边距）。4、外边距，相邻盒子间的空白区域，通过margin进行设置，可分别设置4个方向的外边距。3、边框，元素边框，通过border进行设置，可分别设置4个边框。即在怪异模式下的盒模型，...

IE盒模型和标准盒模型

weixin_57153112的博客

07-21

2729

IE盒模型和标准盒模型

标准盒模型和IE盒模型的区别及转换

qq_38233172的博客

06-06

2733

标准盒模型是w3c 标准的盒模型，其包含：盒子占用宽度：margin2 + border2 + padding2 + width 实际宽度： border2 + padding2 + width IE盒模型，在IE中content的宽度包括padding和border这两个属性，所以盒子占用宽度：margin2 + width 实际宽度：width = padding + border +...

CSS3 box-sizing属性和IE盒模型

Muge

03-17

8257

盒模型是CSS中很重要的概念，但很多人不知道的是IE5.5及更早的IE浏览器采用的不是标准盒模型，我们称之为IE盒模型。标准盒模型的组成部分有：margin + border + padding + content，content部分的width height不包含border和padding。而在IE盒模型中，块级元素的width, height包含了border和padding。这里截取网上的两

IE6盒子模型解析：标准模式下的双倍边距测试

总结来说，本文通过实际的代码测试证实了IE6在标准模式下的盒子模型行为与W3C标准相符，并澄清了IE5/Win盒子模型的误区。这提醒开发者在处理IE6兼容性问题时，需要明确不同版本浏览器的差异，特别是在测试和开发过程...