盒模子型
在写这篇文章之前，我也阅读了其他文章，但我有个习惯：总想自己测试一遍，并记下笔记，从而更好的理解。也就是在这个过程中，我发现网上大部分博客阐述内容有一些问题，与实际测试并不相复合，下面我将详解这个过程。
什么是盒子模型？
展示在页面上的每一个元素都可以视为一个盒模型，且本质上都是一个矩形盒子，盒模型总共分为两种，分别为：W3C标准盒模型、IE盒模型。
之所以分为两类，是因为二者在性质上有些不同，具体来说是在计算宽高时的差异。
页面中的矩形盒子宽高可以通过width、heitht属性进行配置，但这只是设置了content内容部分的宽高，除此之外，盒子宽高还受padding、border两个属性的影响。
W3C标准盒模型、IE盒模型两种盒子类型，也就是因为对padding、border两个属性处理的形式不同，从而划分为两类的。
W3C标准盒模型
W3C标准盒模型在计算盒子宽高时，为width/height、padding、border四个属性相加。
实际也就是 content+padding+border，因为我们通过css设置width/height属性就是用来定义盒子内容宽高的。
实际操作：
<style>
article {
width: 100%;
background-color: #16a085;
}
.box {
width: 100px;
height: 100px;
padding: 10px;
border: 10px solid black;
margin: 5px;
background-color: #f39c12;
color: white;
}
</style>
<body>
<article>
<div class="box W3CBox">
<span>W3CBox</span>
</div>
</article>
</body>
我们通过控制台工具，看看盒子宽高到底是不是上文讲的那样： content+padding+border
现在来分析一下：
- content：content= width/height = 100 * 100 (px)
- padding：在content的基础上设置padding为10px
- 此时盒子宽度 width+paddingLeft/Right =100 + 20 (px)
- 此时盒子高度 width+paddingTop/Bottom =100 + 20 (px)
- border：在上面的基础上又对盒子宽高产生了影响
- 此时盒子宽度 width+paddingLeft/Right + borderLeft/Right =100 + 20 + 20(px)
- 此时盒子高度 width+paddingTop/Bottom + borderTop/Bottom =100 + 20 + 20(px)
整体计算下来，盒子宽高为 140 *140 (px)，完全符合上述结论。
值得注意的是：网上好多博客文章都将margin算入了盒子的宽高，虽然在视觉上，盒子最外层的确有了间隙，但这只是影响了布局，并没有影响盒子本身的尺寸，若盒子尺寸包含了margin，那最后得到的盒子尺寸应为 150 * 150 (px)，但事实并不是这样。
IE盒模型
IE盒模型在计算盒子宽高时，只包含width/height即内容content部分。但值得注意的是，这content包含了padding、border两个属性。
也即是说，盒子最终的宽高，就是我们设置的width/height,若我们又设置了padding、border两个属性，则这两个属性不会对宽高造成影响，而是包含在了设置的width/height中。
实际操作：
.IEBox { box-sizing: border-box; }
<div class="box IEBox"> <span>IEBox</span> </div>
可以发现，其他配置相同，只是改变了盒子模型，但尺寸却差了好多，我们通过控制台工具，看看盒子宽高到底为多少？
通过结果来看，完全符合上述结论，盒子的尺寸只包含content部分，也就是我们定义的 width/height属性。之后定义的padding、border都会被包含到content中。
box-sizing
上面两个例子已经让我们清晰的发现两种盒模型的差异，那我们怎么切换两种盒子模型呢，其实上文已经使用过了，也就是box-sizing属性。
语法
box-sizing: content-box|border-box|inherit;
- content-box
- 默认值，设置为W3C标准盒模型
- border-box
- 设置为IE盒模型
- inherit
- 继承父级盒子类型
总结
W3C标准盒模型在计算盒子宽高时，为width/height、padding、border四个属性相加。IE盒模型在计算盒子宽高时，只包含width/height即内容content部分，且content包含了padding、border。margin并不会影响盒子的尺寸，该属性影响的是布局。- 可通过
box-sizing改变盒子类型。
最后
盒子模型虽然非常基础，但也包含一些细节，导致我们认知模糊，这篇文章希望能帮到读者。
本文到此结束，希望对你有所帮助，我是 Ashun ，在校大学生，立志成为资深前端工程师，欢迎大家一起交流、学习。后续更新更多文章，请持续关注哦~
原创文章，文笔有限，才疏学浅，文中若有不正之处，速速告知。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！