css盒模型
所有HTML元素可以看作盒子，在CSS中，" box model "这一术语是用来设计和布局时使用。
CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距(margin)，边框(border)，填充(padding)、实际内容(content)。
盒模型允许我们在 其它元素和周围元素 边框之间的空间 放置元素。
下面的图片说明了盒子模型(Box Model)：
不同部分的说明：
- Margin(外边距) —— 清除边框外的区域，外边距是透明的
- Border(边框) —— 围绕在内边距和内容外的边框
- Padding(内边距/填充) —— 清除内容周围的区域，内边距是透明的
- Content(内容) —— 盒子的内容，显示文本和图像
注意：
当您指定一个 CSS 元素的宽度和高度属性时，你只是设置内容区域的宽度和高度，要知道，完整大小的元素，你还必须添加内边距，边框和边距。
元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
元素的总高度计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距
设置了 box-sizing 参考： 重学前端 样式(text-align)/ 详解表格table（重点：继承/ border-spacing/collapse/ empty-cells/ box-sizing/ 合并行列 ）（第四天）
css边框
CSS边框属性允许你指定一个元素边框的样式和颜色。
border-style
border-style属性设置一个元素的四个边框的样式，此属性可以有一到四个值。
实例：
border-style:dotted solid double dashed;
- 上边框是点状
- 右边框是实线
- 下边框是双线
- 左边框是虚线
border-style:dotted solid double;
- 上边框是点状
- 右边框和左边框是实线
- 下边框是双线
border-style:dotted solid;
- 上边框和下边框是点状
- 右边框和左边框是实线
border-style:dotted;
- 所有4个边框都是点状
既然border有四边，那么其自然就可以分开设置，分别为：
- border-bottom-style
- border-left-style
- border-right-style
- border-top-style
注意：
其它可以设置4个值的（eg：border、border-color、margin...），都是该规律，后面将不再重复！
值对应的效果：(这里使用浅色更容易看出后面几个的区别，而且得把边框调宽)
还有关于border的一点干货，见：
重学前端 概括元素和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css（font-weight）] / 详解分割线hr标签 / 初见border / 详解auto（第二天）
border-width
border-width属性设置一个元素的四个边框的宽度。
注意：
经菜鸟测试（goole、Firefox）：thin=1px、thick=5px、medium=3px
注意：
CSS 没有定义 3 个关键字的具体宽度，所以一个用户可能把 thick 、medium 和 thin 分别设置为等于 5px、3px 和 2px，而另一个用户则分别设置为 3px、2px 和 1px。 (菜鸟不清楚其它浏览器是不是这样，望有其它浏览器的读者试试，并留言，菜鸟会积极收录！！！)
默认为什么是3px？
详情见： 重学前端 概括元素和属性 / 大小写不敏感 / 详解标题标签 [em和px、源css（font-weight）] / 详解分割线hr标签 / 初见border / 详解auto（第二天）
border-color
border-color属性设置一个元素的四个边框颜色。
注意：
请始终把 border-style 属性声明到 border-color 属性之前，元素必须在您改变其颜色之前获得边框。
一般border-style、border-width、border-color 前后关系错误，也没什么问题，但还是按照标准比较好，最先写border-style，后面两个随意！
color取值见： 详解文本格式（Text）[第二天]
注意：
这里transparent，并不是默认边框颜色为transparent，默认边框颜色是黑色！（这里写一个默认，菜鸟也不明白为什么）
transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
border
缩写边框属性设置在一个声明中所有的边框属性。可以设置的属性分别（按顺序）：border-width、border-style 和 border-color。
注意：
上述属性值缺少一个没有关系，但千万不要缺boeder-style，不然就默认为none(没有边框)，设置其他的也没有意义！
