为什么需要框模型？
为了给HTML中的元素布局，定位。（那用x，y坐标不就完了，为何提出框模型？）
css框模型是什么？
CSS框模型(Box Model)初学理解 - __Esc丶小晋的博客 - 博客频道 - CSDN.NET
这个解释是最容易理解的，把这个框模型类比成对东西的包装，比如你买个电脑，最里边的当然是content（电视机），第二层是泡沫，（padding）,接下来是纸箱，（border)，最后是margin
包装这么多干啥？
为了更精确的排版。
比如添加背景色。
举个例子
<style type="text/css">
li {
background: yellow;
border:1px solid black;
}
</style>
<p>see below</p>
<ul>
<li>part 1</li>
</ul>
结果如下，这个背景色填充的事实上是到padding界限，相当于是包装的泡沫板。这个border是纸箱子。
margin有何存在必要？
margin事实上是确定两个元素之间的距离的，距离太近就不爽嘛。想想行距。
<style type="text/css">
li {
background: yellow;
border:1px solid black;
margin:10px;
}
</style>
<p>see below</p>
<ul>
<li>part 1</li>
<li>part 2</li>
</ul>
上述代码让两个li元素直接有了10px的距离。结果如下
如果margin为0或者不设置margin，效果就是下面这样
有padding何没padding有何区别？
设置20pxpadding，效果如图
不设置padding，效果如图
CSS 内边距
当然了，也可以只设置一个方向的padding。
比如左和上边距
<style type="text/css">
li {
padding-left: 70px;
padding-top:70px;
border:1px solid black;
}
</style>
<p>see below</p>
<ul>
<li>part 1</li>
</ul>
结果如图
除了px，也可以用百分比来设置
比如padding=50%，这是什么意思呢？
<style type="text/css">
p {
padding-top: 50%;
border:1px solid black;
}
</style>
<div style="width:100px">
<p>see below</p>
</div>
结果如图。这个50%是相对于其父元素而言的。比如这个父元素100px。那么50%就是50px，也就是padding边框距离元素50px。
对于边框border我们关心什么?
当然是边框的样式
<style type="text/css">
p {
padding-top: 50%;
border:1px dotted red;
}
</style>
<div style="width:100px">
<p>see below</p>
</div>
结果如下，宽度，颜色，线�型都可以一次设置完毕
更多例子
CSS 边框
上述定位方式与对齐这些属性有何关系？
对齐这些属性都是在盒子内部发挥作用的。
比如你让一个段落居中对齐，那么是会相对于盒子的border的中间对齐，而不是整个页面。
举个例子
<style type="text/css">
p {
padding-top: 50%;
border:1px dotted red;
}
</style>
<div style="width:100px">
<p align="left">see left</p>
</div>
结果如图
<style type="text/css">
p {
padding-top: 50%;
border:1px dotted red;
}
</style>
<div style="width:100px">
<p align="center">see left</p>
</div>
结果如图
总结
盒子模型就是为了给元素定位的。对比一下word文档中怎么给元素定位，利用行间距，段落间距这些东西。或者是居中，这些东西。当然居中这些东西html也是有的，但是诸如行间距，段落间距就没有了。比如p，可以查一下
就这些属性
那么要设置段落间距，就只有利用盒子模型。或者说框模型，是同一个东西。
