所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
边框(border)
属性（值）
border-top-style边框样式；solid实线；dotted点线；dashed虚线。border-top-color边框颜色。border-top-width边框粗细。
注意：边框属性的连写的特点：没有顺序要求，线型为必写项。border-collapse:collapse边框合并 。<label for="one">账号：<input type="text" id="one"></label>- border-top|right|bottom|left 上右下左边框。
a标签的部分尽量用margin。
内边距
属性（值）
padding-top|right|bottom|left上右下左内边距。padding连写案例。padding: 20px;上右下左内边距都是20px。padding: 20px 30px;上下20px 左右30px。padding: 20px 30px 40px;上内边距为20px 左右内边距为30px 下内边距为40。padding: 20px 30px 40px 50px;上20px 右30px 下40px 左 50px。
注意：
- padding没有负值。
- 内边距影响盒子的宽度。
- 边框影响盒子的宽度。
- 盒子的宽度=定义的宽度+边框宽度+左右内边距。
- 继承的盒子一般不会被撑大：包含（嵌套）的盒子，如果子盒子没有定义宽度，给子盒子设置左右内边距，一般不会撑大盒子。
- 盒子的撑开与撑破，有高度会被撑破，没有高度会被撑开。
外边距
属性（值）
margin-top|right|bottom|left上右下左外边距。margin连写案例。margin: 20px;上右下左内边距都是20px。margin: 20px 30px;上下20px 左右30px。margin: 20px 30px 40px;上内边距为20px 左右内边距为30px 下内边距为40。margin: 20px 30px 40px 50px;上20px 右30px 下40px 左 50px。
**注意：
- 垂直方向外边距合并**
两个盒子垂直一个设置上外边距，一个设置下外边距，取的设置较大的值。 - 嵌套的盒子外边距塌陷
解决方法: 1 给父盒子设置边框，2 给父盒子overflow:hidden; （推荐使用）。
注意：
- 行内元素可以定义左右的内外边距，上下会被忽略掉，并且行内块可以定义内外边距。
- 行内块可以定义内外边距。
- 浏览器默认文字大小16px。
盒子稳定性
- 只给宽高的盒子（宽/高度剩余法）最稳定。
- 给padding的盒子其次。
- 给margin的盒子一般。
盒子的隐藏问题
overflow：hidden;隐藏盒子超出的部分。display: none;隐藏盒子，而且不占位置。(用的最多)visibility: hidden;隐藏盒子，而且占位置。opacity: 0;隐藏盒子，而且占位置。
-position/top/left/...-999px隐藏盒子，而且占位置。margin也可以隐藏盒子。
