大家好，我是IT修真院深圳分院第12期学员，一枚正直善良的WEB程序员。
今天给大家分享一下，修真院官网CSS任务1中，如何理解盒模型及其content、padding、border、margin？
一、背景介绍
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
二.知识剖析
MARGIN:围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”
PADDING:元素的内边距(填充)，在边框和内容区之间。控制该区域最简单的属性是 PADDING 属性.
BORDER(边框) : 围绕在内边距和内容外的边框。
CONTENT(内容) : 盒子的内容，显示文本和图像。
Margin的使用方法:
han {margin: 10px 20px 10px 20px;}
上、右、下、左
han {margin: 10px 20px;}
上、下、左、右
han {margin: 10px 20px 30px;}
等价于 10px 20px 30px 20px
三.常见问题
1、padding和marin分别什么时候用？？？
2、几种方式到底有何区别,官网说json-taglib简单,那么到底简单在哪里?
四.解决方案
答：
margin始终是透明的；margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。
1.margin用于布局,分开元素,使元素与元素互不相干；padding用于元素与内容之间的间隔， 让内容（文字）与（包裹）元素之间有一段距离。
2.margin:需要在border外侧添加空白时，且空白处不需要背景（色）时。
padding：需要在border内测添加空白时。 空白处需要背景（色）时。
五。编码实战
七、参考文献
百度，知乎，CSDN
八.更多讨论
1、div的边距合并，如果不想合并怎么办？
两种方法，只给一个值，比如只给top或者bottom；一个是修改属性：overflow:hidden。触发BFC机制。
2.宽100，magin是20，padding是30，那么最后有背景色的是多少？
答：160.100+30+30.
总占宽是200.
3.rem和px已经em有什么区别？
答：px是像素，1em宽度不确定，会继承父级宽度，比如父级字体是20px，子级1em就是20px；
rem是根据html根元素来的。一般设置一个font-size=62.5%。这样1rem=10px。方便计算。
感谢大家观看
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧~
我的邀请码：19214843，
或者你可以直接点击此链接：http://www.jnshu.com/login/1/19214843