盒子
盒子分为4个部分，内容区域（content），边框区域（border），内边距区域（padding），外边距（margin）。
width和height决定了内容边框的大小。
border边框粗细border-width（数字+px），边框样式border-style（实线solid，虚线dashed，点线dotted），边框颜色border-color（颜色取值）。border会把盒子撑大，增加量=边框宽度X2。根据需求可能需要把内容区减少完成盒子大小的整数设计（手动内减）
padding内边距是border和content中间的区域，默认是不存在的，用出是控制content内容的位置。速写规则，content+4种模式，1，宽度px。2，上px 下px。3，上px 左右px 下px。4，上px 右px 下px 左px【顺时针】。padding也会把盒子撑大，也需要手动内减。
box-sizing：content-box\border-box用于固定其中一个项目完成自动內减 只有在有内边距和边框区域和内容时才能使用
margin外边距用于控制盒子和网页的距离，设置方法和padding一模一样。
很多标签拥有默认的margin和padding，比如body，p，ul......。根据情况可能需要自己设置清除。{margin：0回车padding：0}。特殊应用margin 0 auto使背景居中。
margin的特殊情况，块级元素两个盒子的margin会重合，两个盒子之间设置一个盒子就好。
margin塌陷现象，父元素和子元素过度重合导致子元素添加margin后带着父元素一起移动。解决方法：1,设置border-top或者padding-top。2，设置overflow：hidden。3，设置display：inline-block。
给行内元素设置margin和padding时。水平方向的margin和padding布局中有效！ 垂直方向的margin和padding布局中无效！
不设置宽度的块级元素不会撑大盒子
