Box Model盒子模型，是初学者在学习HTMl5时会学到的一个重要的模型，也有一些人称它为框模型，因为盒子是属于3维，而框是平面的。称之为盒子模型，是因为其结构和盒子十分相似，其最外面是margin，然后border，里面是padding，三者包围了content.
margin: 20px;/*上右下左用同一个数据*/
margin: 20px 30px;/*上下 左右分别用2个数据*/
margin: 20px 30px 40px/*上 左右 下*/
margin: 5px 10px 20px 30px;/*顺时针顺序 上 右 下 左*/
overflow属性规定了内容溢出盒子时如何处理
visible:内容不会被修剪，会呈现在元素框外
auto:如果内容被修剪，
hidden:隐藏
scroll:滚动条
border-radius为元素添加圆角边框。
box-shadow是给元素块添加周边阴影效果。
1:X方向的偏移
2：Y方向的偏移
3：阴影模糊程度，值越大越模糊
4：阴影模糊半径
5：阴影阴影颜色
超链接样式的四种状态
未访问状态（a:link）
已访问样式(a:visited)
鼠标移上状态(a:hover)
激活选定状态(a:active)（鼠标点击未取消）
设置超链接样式的步骤：
确定页面所有链接样式是否相同，否则分开定义
先定义四个状态共有样式，再分别定义其他状态
margin border padding都会影响页面布局，content不变
实际宽度：在content的基础上加上margin，border或padding
变态盒模型 border-box 添加padding或者border不会影响页面布局，只会
挤压页面内容content
盒子的摆放模式
标准流模式
块级盒子(div)从上自下排列，宽度自动伸展占据整个浏览器，自动换行
行级盒子(span)从上自下排列，从左到右，空间是内容所占据的空间，自动换行
非标准流模式——浮动与定位
float属性使元素脱离了常规文档流而表现为向右或向左浮动
float属性的取值
right
left
none
1.浮动盒子的宽度不会自动伸展，宽度以内容和margin、padding属性为准
2.标准流中其他盒子将视浮动盒子不存在而占据浮动盒子的位置，但内容会受到浮动盒子宽度的影响
3.可以设置clear属性使标 准流中其他盒子不受之前盒子的浮动影响
4.父级盒子中的所有盒子都采用浮动形式，若父级盒子未指定高度则父级盒子的高度为0，
因为所有盒子都是浮动已脱离标准流。解决办法增加一个标准流的盒子
清除浮动方式一
在父元素中添加一个新的元素
为新元素设置clear:both
清除浮动方式二
.clearfix:after
{
content:" ";
diplay:table;
clear;both;
}
outline(轮廓)是绘制于元素周围的一条线，位于边框边缘的外围，
可起到突出元素的作用，轮廓线不会占据空间
语法：outline:<'outline-width'>||<'outline-style'>||<'outline-color'>
outline:2px solid red