在html文档中，每个渲染在页面中的标签都是一个个盒子模型。
盒子模型又分为 ： W3C标准的盒子模型 和 IE标准的盒子模型。
由于目前大部分主流的浏览器支持的是W3C标准盒模型（标准盒模型），也有保留对怪异盒子样式的解析，当然IE沿用的是自己标准的盒模型（怪异盒子模型）
用两个简单的例子分别介绍下这两个盒子模型：
标准盒模型：
<!--html-->
<div class="box1">
<div class="box2"></div>
</div>
<!--css-->
.box1{
width: 200px;
height: 200px;
background-color: aqua;
padding: 30px;
}
.box2{
width: 200px;
height: 200px;
background-color: red;
}
这里外层盒子的width和height都是：30 + 200 + 30 = 260px。
怪异盒模型
<!--css中加入box-sizing属性-->
<!--box-sizing属性：border-box(怪异盒子模型)，content-box(标准盒模型)-->
.box1{
width: 200px;
height: 200px;
background-color: aqua;
padding: 30px;
box-sizing: border-box;
}
.box2{
width: 200px;
height: 200px;
background-color: red;
}
这里外层盒子的width和height都是：30 + 140+ 30 = 200px。
这里得出一个结论：
标准盒模型，一个块的总宽度 = width（content的宽度） + margin（左右）+ padding（左右）+ border（左右）
怪异盒模型，一个块的总宽度 = width（content + border + padding）+ margin(左右)
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
:not 伪类选择器可以筛选不符合表达式的元素 例子 table tbody tr:not(:first-ch...
CSS中定位介绍 position 属性在英文单词中表示 位置 的意思，在 CSS 中主要作用...
送大家以下java学习资料，文末有领取方式 前言 ReentrantLock和synchronized一样...
基本概念 绝对定位(absolute)：设置为绝对定位的元素框从文档流完全删除，并相对...
随着线上业务的快速发展，越来越多的站长和企业购买站群服务器。其中最火的当属...
由于项目需要，所以打算好好学习下bootstrap框架，之前了解一点，框架总体不难，...
GitHub 新产品 Copilot 来了！这款产品由 GitHub 与 OpenAI 联合开发，目前已上...
前言 最近在实现两个需求，由于两者之间并没有依赖关系，所以想利用队列进行解耦...
前言 2021 年中国共产党将迎来建党 100 周年。百年来中国社会发生了沧桑巨变。从...
TOP云 （west.cn）11月5日消息，上周国外投资人在推特上曝料称，英文组合 域名 w...
