1. 什么是盒模型
html中的每个元素，我们都可以看做是一个盒子，在开发工具中可以很直接的看出来，比如我先写一段代码，来看看在开发工具中怎样显示的盒模型：
<style>/* 给div加上宽度，高度和背景色，页面就能显示 */div {width: 300px;height: 300px;background-color: red;margin: 10px;border: 3px solid black;}</style><body><!-- div中我先不写任何东西，没加样式前，在页面中什么都看不到 --><div></div><div></div></body>
在开发工具中可以看到右边一个这样的盒子 ：
这样就比较好理解了，这个div在开发工具中显示出来的样子就像是一个盒子，而这个盒子呢，有以下几个非常重要的属性：
padding:内边距，即内容到边框的间距border:边框，可以设置边框线的粗细，样式和颜色margin:外边距，即边框与其他盒子之间的间距
每个属性还可以细分为上右下左，比如：
margin-top：上外边距margin-right：右外边距margin-bottom：下外边距margin-left：左外边距
padding和border的用法与margin是一样的，就不做举例了。在属性margin中，有一点必须要了解的是外边距折叠这种情况，举例如下：
<style>/* 给div加上宽度，高度和背景色，页面就能显示 */div:first-of-type {width: 300px;height: 300px;background-color: red;/* 把第一个盒子的下边距设置为30px */margin-bottom: 30px;border: 3px solid black;}div:last-of-type {width: 300px;height: 300px;background-color: red;/* 把第二个盒子的上边距设置为50px */margin-top: 50px;border: 3px solid black;}</style><body><div></div><div></div></body>
通过上面图例，发现两个盒子间的距离并不是50px+30px=80px，而且50px，这就是外边距合并，当遇到这种情况时，外边距会取值为较大者。
接着看看padding是一个什么样的效果，举例如下：
通过上面案例，可以知道padding内边距属性是一个什么效果了。
2. 盒模型大小计算方式
在上面的案例中，我们已经知道盒模型是一个什么样子了，是一个矩形的形状。那么它的大小如下：
盒子的可视宽度=内容区宽度（width）+左右边框（border-left + border-right）+左右内边距（padding-left + padding-right）
盒子的可视高度=内容区高度（height）+上下边框（border-top + border-bottom）+上下内边距（padding-top + padding-bottom）
但是，刚才知道一个问题，就是当我们修改padding的时候，盒子被撑开，盒子的宽度和高度会发生自动变化，在实际开发中布局会受到影响，所以常常会用到一个属性box-sizing,来解决这个问题，重新计算大小，先看看此属性的两个常用取值：
content-box:默认取值，盒子大小只覆盖到内容区，内容区的高宽始终不变，那么设置padding肯定会影响其大小，影响布局border-box：盒子大小覆盖到边框线，这样就把padding包裹在里面了，无论你怎么变，盒子大小都不受其影响
我们着重的看下boder-box这个属性值，举例如下：
<style>div {margin: 20px;width: 250px;height: 250px;border: 2px solid black;}div:first-of-type {background-color: red;background-clip: content-box;box-sizing: border-box;padding: 0;}div:last-of-type {background-color: green;background-clip: content-box;box-sizing: content-box;padding: 0;}</style><body><div></div><div></div></body>
上面案例中，我把第一个盒子大小设为border-box，第二个设为content-box,然后我们在开发工具中修改padding的值，看看有什么变化：
通过上面，可以看出，当box-sizing:border-box;时，修改padding对它的大小是不受影响的，盒子会自动修改内容区的值，你想让盒子多大，它就多大，这对布局是非常重要的！这个属性会经常用到初始化代码块中，以保证实际开发中盒子的固定大小值。
3. 定位元素的对齐方式
对于块级元素，肯定不能用text-align,vertical-align这样的方式来水平垂直居中，要掌握好margin:auto的用法。
- 水平居中：
水平居中就是让元素的左外边距为auto，右外边距也为auto，以这样的方式把元素硬挤到中间去，举例如下：
<style>.container {width: 400px;height: 400px;border: 1px solid black;background-color: red;}.container div {width: 100px;height: 100px;background-color: blue;/* 设置左右外边距为auto *//*margin-left: auto;margin-right: auto;*//* 简写方式(上下外边距默认为0) */margin: auto;}</style><body><div class="container"><div></div></div></body>
- 水平垂直居中：
通过绝对定位来实现，让当前元素绝对定位的上下文充满整个容器，从左上角开始，右下角结束，然后使用margin:auto，举例如下：
<style>.container {width: 400px;height: 400px;border: 1px solid black;background-color: red;/* 父容器变为定位元素 */position: relative;}.container div {width: 100px;height: 100px;background-color: blue;/* 设置绝对定位 */position: absolute;/* 左上角 */left: 0;top: 0;/* 右下角 */right: 0;bottom: 0;margin: auto;}</style><body><div class="container"><div></div></div></body>
如果页面中只有一个盒子需要垂直水平居中，就不需要找父容器，会默认以body定位，比如会经常应用到一个简单的登陆页面，举例如下：
<style>div{width: 300px;height: 300px;background-color: cadetblue;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}/* 知道是这么个用法就行，表单里面的细节就不再写了 */</style><body><div><form action=""><button>登陆</button></form></div></div></body>
4. 总结：
掌握了盒模型的属性，大小计算方式以及box-sizing的用法，还有块级元素的对齐方式技术，特别是垂直对齐，以现有的知识，需要用绝对定位来实现，当然后面学了弹性布局和网格布局，就会更简单了！