怪异盒模型和标准盒模型

对怪异盒模型的介绍

怪异模式主要表现在IE内核的浏览器。

当不对doctype进行定义时，会触发怪异模式。
在标准模式下(box-sizing:content-box;)，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)

在怪异模式下(box-sizing:border-box;)，一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>怪异盒模型</title><style type="text/css">*{margin:0;padding: 0;}#test1{box-sizing:border-box;/*怪异盒模型 width（100px）=内容宽度+padding+border实际容器所占区域宽度 = width（100px）+ margin*/width: 100px;height:100px;margin: 10px;background-color: red;}#test2{box-sizing:content-box;/*标准盒模型 width（100px） = 内容宽度实际容器所占区域宽度 = width（100px）+ margin + padding + border*/width: 100px;height:100px;margin: 10px;padding: 10px;border: 10px solid black;background-color: red;}</style><script type="text/javascript"> window.onload = function(){var test1 = document.getElementById("test1");console.log(test1.offsetWidth);var test2 = document.getElementById("test2");console.log(test2.offsetWidth);}                   </script></head><body><div id="test1">怪异盒模型</div><div id="test2">标准盒模型</div></body>
</html>

两个div的width都设置为100px，但效果不同

怪异盒模型和标准盒模型相关推荐

什么是盒模型（标准盒模型，怪异盒模型）
盒模型:(内容(content),内边距(padding),边框(border),外边距(margin)) CSS中的盒子模型分为两种: W3C标准盒模型和IE怪异盒模型. 标准盒模型下: 一个块的宽 ...
css盒模型（css的两种盒模型：标准盒模型、怪异盒模型）和 css3指定盒子模型种类的box-sizing属性
所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用. CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin ...
盒模型（标准盒模型、怪异盒模型）
盒模型由由四部分组成,分别为: content ------------> 内容,元素的宽高 padding ------------> 内边距 border -- ...
盒子模型（标准盒模型、怪异盒模型）
一.盒子模型的组成部分: 内容区域: content 边框 : border 内边距: padding 外边距 margin ✳ 图中的蓝色部分即为content区域二.盒模型的分类: 1.W3C盒 ...
【什么是盒模型】标准盒子模型、怪异盒子模型
一.上图标准盒子模型和IE盒子模型什么是盒子模型 CSS盒子模型(Box model)就是在网页设计中经常用到的CSS技术所使用的一种思维模型.网页中所有元素都具备以下四个属性: 内容(cont ...
IE盒模型和标准盒模型
标准盒模型和ie盒模型(怪异盒模型) w3c标准盒模型 width和height不包括padding和border ie盒模型 width和height包含padding和border ie8以上都是 ...
IE盒模型和标准盒模型的区别
在以前IE5.5以及更早的IE浏览用的不是标准盒模型,我们称之为IE盒模型. 先说重要的区别: 两者的区别在于content的不同, IE盒模型:width=content+border+paddin ...
前端基础(八)_盒子模型（标准盒子模型和怪异盒子模型）
盒子模型什么是盒子模型网页设计中常听的属性名:内容(content).内边距(padding).边框(border).外边距(margin), CSS盒子模型都具备这些属性.这些属性我们可以用日常 ...
box-shadow属性四个值_重学前端：什么是盒子模型？标准盒子模型有哪些属性和尺寸计算？...
盒模型盒子模型是网页布局的基石.它有边框.外边距.内边距.内容组成. 盒子由上到下依次分为五层,它们自上而下的顺序是: border 边框 content + padding 内容与内边距 back ...

怪异盒模型和标准盒模型

怪异盒模型和标准盒模型相关推荐

最新文章

热门文章