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

1.标准盒模型
标准盒模型在这里插入图片描述
也称W3C盒模型，现在大部分浏览器都采用标准盒模型，
在标准模式下，一个元素所占的总宽度=width(content)+padding(左右)+margin(左右)，元素的高度同理也是一样的。

如图所示：

2.IE盒模型
标准盒模型也称怪异盒模型，IE6之前的浏览器默认采用怪异盒模型，
在怪异模式下，一个元素所占的总宽度=width+margin(左右)，（即width包含了border+padding+content）元素的高度同理也是一样的。

如图所示：

标准盒模型和IE盒模型，代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><style>#ieBox{width: 200px;height: 200px;padding: 20px;margin: 10px;border:5px solid rgb(0, 255, 234);box-sizing: border-box; /* 加上  box-sizing: border-box; 后可以将div盒模型设置为IE盒模型*/background: greenyellow;}#Box{width: 200px;height: 200px;padding: 20px;margin: 10px;border:5px solid rgb(0, 255, 234);box-sizing:content-box;/* 加上  box-sizing: border-box; 后可以将div盒模型设置为标准盒模型*/background: red;}</style>
</head>
<body><div id="ieBox">IE盒模型</div><div id="Box">标准盒模型</div>
</body>
</html>

标准盒模型与IE盒模型的区别相关推荐

盒子模型（标准盒模型、怪异盒模型）
一.盒子模型的组成部分: 内容区域: content 边框 : border 内边距: padding 外边距 margin ✳ 图中的蓝色部分即为content区域二.盒模型的分类: 1.W3C盒 ...
标准盒模型与怪异盒模型
盒模型 css 中盒模型有两种,分别是标准模式和怪异模式. 两种模式的区分使用document.compatMode将会得到"CSS1Compat"或"BackComp ...
盒子模型--标准盒模型和怪异盒模型
盒子模型由content(内容).margin(外边距).padding(内边距).border(边框)组成 <div style=" ...
CSS标准盒模型和怪异盒模型区别
盒模型都是由四个部分组成的,分别是margin.border.padding 和 content.即外边距,边框,内边距,内容. 一:标准盒模型 1. box-sizing: content-box ...
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
【CSS】标准盒模型和怪异盒模型
盒模型的组成: content(内容) padding(内边距) border(边框) margin(外边距) 那常见的盒子模型有哪些呢? 主要是两种:标准盒模型和怪异盒模型. 它俩有什么区别呢?区别 ...
标准盒模型和怪异盒模型的区别？
什么是怪异盒模型?今天我帮大家整理一篇详细的有关于标准盒模型和怪异盒模型的区别在哪里. 首先要知道,什么是盒模型? 盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系.css定义所有 ...
前端面试题 | 标准盒模型和IE盒模型的区别？
两者的区别在于content的不同,IE盒模型的content包含border,padding W3C盒子模型(又称之为标准盒模型)的范围包括margin.border.padding.content ...
【什么是盒模型】标准盒子模型、怪异盒子模型
一.上图标准盒子模型和IE盒子模型什么是盒子模型 CSS盒子模型(Box model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型.网页中所有元素都具备以下四个属性: 内容(cont ...
标准盒模型和 IE 盒模型
对于标准盒模型和 IE 盒模型你了解多少? 盒模型讲解我们今天只会提到标准盒模型,和 IE 盒模型,两种盒模型模式讲解.首先来看标准盒模型. 只要是盒模型都会有这四个属性 margin, bord ...

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

标准盒模型与IE盒模型的区别相关推荐

最新文章

热门文章