整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
源 | https://juejin.im/post/59ef72f5f265da4320026f76
.box{ width:200px; height:200px; background-color:pink;}.box{ width:200px; height:200px; background-color:pink; padding:20px;}.box{ width:200px; height:200px; background-color:pink; padding:20px; border:10px solid black;}.box{ width:200px; height:200px; background-color:pink; padding:20px; border:10px solid black; margin-bottom:10px;}.box1{ width: 100px; height: 100px; background: green;}.box{ width:200px; height:200px; background-color:pink; box-sizing:border-box; padding:20px;}言
在前端面试的过程中，CSS盒模型是一道问的频率非常高的问题。目前网上也有很多解释CSS盒模型的文章，看了之后自己也总结了下相关知识点，大家一起来看看吧。
感兴趣的同学可以加下我自己维护的群624-576-634。
CSS
CSS盒模型-What？
我们首先要了解的一个内容就是，什么是CSS盒模型呢？
简单点说我们可以把一个HTML页面看做一个大的方块，在这个大的方块里会嵌套很多小方块（DOM元素），然后小方块又会嵌套其他的小方块，这样一层层的嵌套着就构成了一个盒模型。
既然页面的结构都是由一系列HTML标签构成，为什么还会有不同的盒模型呢？
想当年微软的IE浏览器占据超过80%市场份额的时候，觉得自己财大气粗(是不是有点黑-_-!)，想自己独立制定一套浏览器标准，其中就包括IE的盒模型，但是其他诸如Mozilla，Google等公司不同意IE的做法，他们遵循的是W3C的标准来定制浏览器，也就是W3C标准盒模型，因此就造成了现在浏览器不同的CSS盒模型了。
接下来我们具体看看IE盒模型和W3C盒模型有什么具体的不同吧。
对比
W3C标准盒模型
元素的width和height属性只包含内容content部分，不包含内边距padding和边框border部分。
IE标准盒模型
元素的width和height属性同时包含内容content，内边距padding和边框border部分，即：
width = content + padding + border
使用
那么我们该如何切换两种盒模型的展示呢？
在IE8及以下的浏览器中只支持IE盒模型，在IE8+及其他主流浏览器中，通过CSS新增的box-sizing属性可以设置浏览器的盒模型。box-sizing属性的默认值是content-box，即W3C标准盒模型；而将box-sizing值设置为border-box时，则会更改为IE盒模型。
接下来我们通过代码和界面效果来看看两种盒模型的差异。
效果展示
以下测试都在Chrome浏览器中进行。
W3C盒模型
首先定义一个div，有如下CSS属性。
定义一个div
如上所讲，在不设置box-sizing属性的情况下会采用W3C标准盒模型，在页面呈现的结果如下所示。
页面效果
左侧是HTML页面的效果，右侧是通过查看浏览器的style效果。从中可以看出内容宽度(浅蓝色部分)为100px，横向实际占据的空间为content+padding+border，也就是100px+20px*2+10px*2=160px，乘以2是因为有左右两个方向。
IE盒模型
同样的元素我们再看看在IE盒模型下是什么样的展示。只需要添加box-sizing: border-box;属性即可。
css样式
其呈现的效果如下图所示。
页面效果
从图中可以看出，width设为100px，其占据的宽度也就是100px，其中实际内容的宽度只有40px大小(浅蓝色部分)，padding-left和padding-right各占20px，border-left和border-right各占10px，因此是40+20*2+10*2=100px。
由以上的例子就可以很明显的看出IE盒模型和W3C标准盒模型的区别了。
关于margin
不管是在IE盒模型还是W3C标准盒模型中，margin产生的效果是一样的，都是会占用实际的空间，但是不改变盒子大小。
我们在上面例子的CSS属性中再加入margin: 30px;
首先看看在IE盒模型下效果图如下。
IE盒模型
通过上图可以看出盒子需要占据的空间宽度为100+30*2=160px，而盒子实际宽度仍然为100px。
然后看看在W3C标准和模型下的效果。
W3C盒模型
通过上图可以看出盒子需要占据的空间宽度为100+20*2+10*2+30*2=220px，而盒子的实际宽度为100+20*2+10*2=160px。
总结
今天这篇文章通过图例和代码讲解了CSS中两种不同的盒模型，分别是IE盒模型和W3C标准盒模型，大家都学会了吗？
解盒模型：CSS3 中的盒模型有以下两种：标准盒模型、IE盒子模型(怪异盒模型)，盒模型是由4个部分组成，由内向外分别是content(下图蓝色部分)、padding、border、margin盒模型有5个属性：
一张图来理解盒模型的5个属性
父子间间距，通过给父元素设置padding来实现
兄弟间间距，通过给元素设置margin来实现
标准盒模型和 IE盒模型的区别在于设置 width 和 height 属性时，所对应的范围不同：
案例展示
<style>
.box {
width: 100px;
height: 150px;
padding: 20px;
border: 10px;
margin: 50px;
box-sizing: border-box;/*怪异地盒子模型*/
}
</style>
<body>
<div class="box"></div>
</body>以上代码，在未添加box-sizing: border-box;和添加后，两者渲染后的效果如下
标准盒模型
标准盒模型下的width:100px;height:150px;只包含了content部分,所以content的宽高为100px和150px;
怪异盒模型
width:100px;height:150px;包含了border、padding、content三部分，则通过计算得出content内容区的高为: 150px-20px*2-10px*2=90px宽为：100px -20px*2 -10px*2=40px
盒模型转换
可以通过修改元素的 box-sizing 属性来改变元素的盒模型：
你学会了吗？
为帮助到一部分同学不走弯路，真正达到一线互联网大厂前端项目研发要求，首次实力宠粉，打造了《30天挑战学习计划》，内容如下：
HTML/HTML5，CSS/CSS3，JavaScript，真实企业项目开发，云服务器部署上线，从入门到精通
共4大完整的项目开发 ！一行一行代码带领实践开发，实际企业开发怎么做我们就是怎么做。从学习一开始就进入工作状态，省得浪费时间。
从学习一开始就同步使用 Git 进行项目代码的版本的管理，Markdown 记录学习笔记，包括真实大厂项目的开发标准和设计规范，命名规范，项目代码规范，SEO优化规范
从蓝湖UI设计稿 到 PC端，移动端，多端响应式开发项目开发
这些内容在《30天挑战学习计划》中每一个细节都有讲到，包含视频+图文教程+项目资料素材等。只为实力宠粉，真正一次掌握企业项目开发必备技能，不走弯路 ！
过程中【不涉及】任何费用和利益，非诚勿扰 。
如果你没有添加助理老师微信，可以添加下方微信，说明要参加30天挑战学习计划，来自头条号！老师会邀请你进入学习，并给你发放相关资料
30 天挑战学习计划 Web 前端从入门到实战 | arry老师的博客-艾编程
*请认真填写需求信息，我们会在24小时内与您取得联系。
