===================================================================
一个盒子的组成部分：内容(content)、内填充(padding)、边框(border)、外边距(margin)。
一个盒子包含以下几种属性：
这里放一张关于盒子模型的图片：
大体上样式就是图片那样，其实和正常的CSS，html差不多。
疑问：一个盒子的总宽度，总高度如何计算呢？
答：
1.一个盒子的总宽度=盒子里面内容的宽度+左右两边的填充+左右两边的边框线。
2.一个盒子的总高度=盒子里面内容的高度+左右两边的填充+左右两边的边框线。
注意：一个盒子的高度一般情况下是不用设置的，因为一个盒子的高度它应该是由其内容来决定的。
===========================================================================
四种属性非常常用：
padding-top:上内填充。
padding-right:右内填充。
padding-bottom:下内填充。
padding-left:左内填充。
padding简写属性：
padding简写时，是按照上、右、下、左。（从布局上来看，就是顺时针的方向。）
padding只有一个值时，例如：padding:20px;这表示上右下左这四个方向的内填充都是20;
padding有两个值时，例如：padding:10px 20px;这表示上下是10px,左右是20px。
padding有是三个值时，例如：padding:10px 20px 30px;这表示上为10px，左右为20px，下为30px。
padding有四个值时，就按照上、右、下、左，来执行了。
========================================================================
margin主要是指盒子与盒子之间的距离。
margin的四个属性：
margin-top：上外边距
margin-right：右外边距
margin-bottom：下外边距
margin-left：左外边距
margin简写属性：
margin的简写顺序和padding一样，上、右、下、左。
并且和padding一样，数值也是一样的。
=========================================================================
什么是margin塌陷现象？
答：
**1.在标准文档流中，竖直方向的margin值不会叠加，它会取较大的值。
2.横着方向是没有margin的塌陷现象的。
3浮动元素是没有margin的塌陷现象的。**
下面是一个标准文档流的案例，这里的margin就是取得40px，也就是最大值：
=======================================================================
margin的值可以是auto，当左外边距与右外边距的值都是auto时，那么这个盒子就会水平居中。
注意：
1.使用margin来实现水平居中时。一定要 有固定的宽度(给这个盒子设定一个宽度) 只有块元素可以实现水平居中，行内元素是是不能实现居中的。
-
不设置宽度，默认是100%，就体现不出居中的效果了。
-
这里顺带提一下行内元素，行内元素就是默认情况下只占自己内容的宽容和高度的空间，无法改变它的高度或者宽度，只能转成块级元素后方可改变宽度和高度。也就是说行内元素无法设置自己的宽高。
2.只有 ** 标准文档流中的盒子 ** 才可以使用margin来实现水平居中 。
3.margin属性是用来实现盒子的水平居中，而不是文本的水平居中。
====================================================================================
结尾
学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
