##CSS 盒子模型(Box Model)
所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。
盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：
###构成部分 每个盒子都由如下几部分构成：
-
Margin(外边距) 清除边框外的区域，外边距是透明的。
-
Border(边框) 围绕在内边距和内容外的边框。
-
Padding(内边距) 清除内容周围的区域，内边距是透明的。
-
Content(内容) 盒子的内容，显示文本和图像。
###盒模型相关的样式
-
display 设置元素的显示类型
-
none 元素不会在页面中显示，并且不会占据页面的位置
-
block 元素会作为块元素显示
-
inline 元素会作为内联元素显示
-
inline-block 既具有内联元素的特点也具有块元素的特点
-
-
visibility 设置元素是否在页面中显示
-
visible 默认值，元素在页面中正常显示
-
hidden 元素不在页面中显示，但是依然在页面中占据位置
-
-
overflow 设置元素如何处理溢出内容
-
visible 默认值，不会处理溢出的内容，在父元素以外的地方显示
-
hidden 溢出的内容会被隐藏不会显示
-
scroll 在父元素中同时添加水平和垂直方向的滚动条
-
auto 根据需要自动生成滚动条
-
###文档流 文档流是网页的基础，是网页的最底层，所有的元素默认都是在文档流中排列。元素在文档流中默认自左向右，自上向下排列（和我们的书写习惯一致）
-
块元素
1.块元素在文档流中自上向下排列
2.块元素在文档流中宽度默认是父元素的100%
3.块元素在文档流中高度默认被内容撑开
-
内联元素
1.内联元素在文档流中自左向右排列，如果一行中不足以容下所有的内联元素，则换到下一行，继续自左至右排列
2.内联元素在文档流中宽度和高度默认都被内容撑开
