这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【 如何理解盒模型及其 content、padding、border、margin？】
【修真院 web（职业）小课堂】如何理解盒模型及其 content、padding、border、margin？
开场语：
大家好，我是 IT 修真院 郑州分院第 14 期的学员 王亚龙，今天给大家分享一下，修真院官网 css深度思考中的知识点——如何理解盒模型及其 content、padding、border、margin？
（1）背景介绍：
盒子模型简单点理解就是外边距 (margin)+ 边框 (border)+ 内边距 (padding)+ 内容 (content)，页面所呈现的效果其实就是一个个盒子堆叠而成的。每一个元素其实是包含了一个 “外在盒子” 和一个 “内在盒子”，其中 “外在盒子” 负责元素是一行显示还是换行显示，而 “内在盒子” 则负责宽高、内容展现。
（2）知识剖析：
在标准盒模型中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。盒子占位 width = 2margin + 2padding + 2*border, 高度与之一样。
-
width(包括 min-width, max-width)：宽
-
height(包括 min-height, max-height)：高
-
padding：内边距
-
border：边框
-
margin：外边距
上面五大属性，除了 width 和 height 以外，padding、border 和 margin 属性都是由四边组成的，每边都可以设置自己的单独值，还可以简写。这里以 margin 为例具体讲解下简写的取值模式。
在讲解之前，我们先说下盒模型的四边，方向分别为上、下、左、右，而 CSS 中表示就分别是 top、bottom、left、right
-
margin-top：top 方向单个值
-
margin-right：right 方向单个值
-
margin-bottom：bottom 方向单个值
-
margin-left：left 方向单个值
-
margin：总的，四个方向的值
/* 简写之前 */ .box {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
} /* 简写之后 */ .
box {
margin: 10px 20px 30px 40px; /* 注意顺序以top开始，顺时针方向 */
}
margin: 10px;，表示四个方向的值都是 10px
margin: 10px 20px;，表示 top 和 bottom 方向是 10px，left 和 right 方向是 20px
这种取值模式其实并不是 margin 所独有的，同样 padding 也是按照这个模式来的。而且是一模一样的。另外的话在写html的还要注意，页面默认的话有8个像素的外边距，可以在body里面用 margin=0。来声明。
内边距影响盒子的尺寸，会将盒子撑大。宽和高都会将增加 padding 设置的值。所以我们在做页面的时要注意，所以要保证盒子原来的大小，在宽度和高度上要做相应的减少。
而 border 相对来说还要更复杂点，border 的简写，其简写模式为：border: 1px solid #ccc;
border 的简写其实是由 border-width，border-style，border-color 三个属性组合而成的。1px 就是 border-width，solid 就是 border-style，#ccc 就是 border-color。
而这三个属性，它们如果单独来写，其取值模式就和 margin 是一样的了，都可以设置 1-4 个值，如：
.box {
border-color: #f00 #ccc #ccc; /* top left和right bottom */
border-width: 2px 1px; /* top和bottom left和right*/
border-style: solid; /* all */
}
除此之外，border 当然也有表示方向的属性，如border-left: 1px solid #f00;，则表示左边框为 1px 红色的实线。同样还有 border-top，border-right，border-bottom
（3）常见问题：
1，什么时候使用内边距，什么时候使用外边距，
2.设置边距borde的时候，高度或者说宽度发生改变
（4）解决方案：
1,什么时候使用内边距，什么时候使用外边距，
对于一个 “块”（比如说 div）要设置他与外部 “块” 间的距离用 margin，要设置他与内部内容间的距离用 padding
2.设置边距borde的时候，高度或者说宽度发生改变
这方面大家可以往前看一下，盒子的宽度或者高度是由content+padding+border+margin组成的，在具体设置过程中，这一部分大家要把这一部分算进去。
（5）编码实战：
内容：content
.{
: }
.{
: }
上面的话主要演示的是一个盒子，其中内容背景是黄色的，边框是蓝色，中间空白部分就是padding内边距，而外面比较大的空白部分就是外边距。可以仔细思考下看下
（6）拓展思考：
外边距重叠
外边距重叠是指两个垂直相邻的块级元素，当上下两个边距相遇时，起外边距会产生重叠现象，且重叠后的外边距，等于其中较大者。
防止外边距重叠解决方案：
虽然外边距的重叠有其一定的意义，但有时候我们在设计上却不想让元素之间产生重叠，那么可以有如下几个建议可供参考：
外层元素 padding 代替
内层元素透明边框 border:1px solid transparent;
外层元素 overflow:hidden;
内层元素 加 float:left; 或 display:inline-block;
内层元素 padding:1px;
（7）参考文献：
1,http://www.hujuntao.com/web/css/css-margin-overlap.html
2, 菜鸟教程
（8）更多讨论：
Q1：问题1：垂直居中又几种办法？
A1：我：这里列举几个最常见的
1，line-height居中
2，flex布局居中
align-items: center;
3.利用绝对定位或者是相对定位来居中
Q2：问题2：导航栏定高和不定高的区别
A2：我：定高的话内容不会随着导航栏内容的增多而增加，会造成一部分内容显示不出来，不定高可以随着内容的增加而变化
Q1：问题1：box-sizing 属性
A1：我： box-sizing，属性值常用又连两个
content-box：默认值，让元素维持 W3C 的标准盒模型。Height = border+padding+content width/height
border-box：让元素维持 IE6 及以下版本盒模型，Width/Height =width /height-border-padding
（9）鸣谢：
感谢韩筠宜师姐 ，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地