CSS 基础框盒模型 - CSS（层叠样式表） | MDN (opens new window)
CSS 基础框盒模型介绍 - CSS（层叠样式表） | MDN (opens new window)
盒模型 - 学习 Web 开发 | MDN (opens new window)
CSS盒子模型：规定了元素框处理元素内容（ content ）、内边距（ padding ）、边框（ border ） 和外边距（ margin ） 的方式。
# 外边距（margin）
外边距（margin）：就是围绕在元素边框的空白区域，设置外边距会在元素外创建额外的“空白” 设置外边距的最简单的方法就是使用 margin 属性，这个属性接受任何长度单位、百分数值甚至负值。
系统默认外边距为8px。
属性
margin-top : 设置上方外边距。
margin-left : 设置左方外边距。
margin-right : 设置右方外边距。
margin-bottom : 设置下方外边距。
margin 外边距简写
{a} ： 只有一个值的时候，为 上下左右外边距都为a值。
{a b} : 只有两个值的时候 为上下外边距为a值 左右外边距为b值。
{a b c} : 只有三个值的时候 为上外边距为a值 左右外边距为b值 下外边距为c值。
{a b c d} ：只有四个值时候 为上外边距为a值 右外边距为b值 下外边距为c值 左外边距为d值 （口诀：顺时针，上右下左）。
.wrapper { margin-top:10px; margin-right:40px; margin-bottom:20px; margin-left:30px; }
/* 等同于 */
.wrapper { margin: 10px 40px 20px 30px; }
# 内边距（padding）
内边距（padding）：就是在边框和内容区之间设置内边距的最简单的方法就是使用 padding 属性，这个属性接受任何长度单位、百分数值。
内边距的大小，属于元素大小的一部分。(会撑大元素的大小)
属性
padding-top : 设置上方内边距。
padding-left : 设置左方内边距。
padding-right : 设置右方内边距。
padding-bottom : 设置下方内边距。
padding 内边距简写：
{a} ： 只有一个值的时候，为 上下左右内边距都为a值。
{a b} : 只有两个值的时候 为上下内边距为a值 左右内边距为b值。
{a b c} : 只有三个值的时候 为上内边距为a值 左右内边距为b值 下内边距为c值。
{a b c d} ：只有四个值时候 为上内边距为a值 右内边距为b值 下内边距为c值 左内边距为d值 （口诀：顺时针，上右下左）。
.wrapper { padding-top:10px; padding-right:40px; padding-bottom:20px; padding-left:30px; }
/* 等同于 */
.wrapper { padding: 10px 40px 20px 30px; }
# 边框（border）
边框（border）：就是围绕元素内容和内边距的一条或多条线，设置边框的最简单的方法就是使用border 属性，允许规定元素边框的样式、宽度和颜色。
属性
border-width : 设置边框的宽度。
border-style : 设置边框的样式。
border-color : 设置边框的颜色。
border 边框的简写：
{width style color}定义宽度为width，样式为style，颜色为color的边框。
.wrapper { border-width: 1px; border-style: solid; border-color: red; }
/* 等同于 */
.wrapper { border: 1px solid red; }
# 盒子的真实尺寸
盒子的width和height值固定时，如果盒子增加border和padding，盒子整体的尺寸会变大，所以盒子的真实尺寸为
盒子宽度 = width + padding左右 + border左右
盒子高度 = height + padding上下 + border上下
# display 属性
display属性: 设置元素如何显示。
- 属性值
inline ：(不独占一行，宽高由内容决定) 默认值。此元素会被显示为内联元素，元素前后没有换行符，内联元素所占具的空间就是他的标签所定义的大小（不能设置width和height）。
inline-block ：(不独占一行，但能识别宽高) 设置元素为行内块状元素，所有的块级元素开始于新的一行，延展到其容器的宽度（能设置width和height）。
none : 设置元素不显示不占空间，元素与其子元素从普通文档流中移除。这时文档的渲染就像元素从来没有存在过一样，也就是说它所占据的空间被折叠了。
block : (独占一行，能识别宽高)设置元素为块状元素（能设置width和height）。
示例：
.hide { display: none; }
.show { display: block; }