盒尺寸中的4个盒子 content box、padding box、border box 和 margin box 分别对应 css 中的 content 、padding、border 和 margin 属性。
1.content
2.温和的padding属性
2.1 padding对元素尺寸的影响
css默认的box-sizing是content-box，所以padding会增加元素尺寸。可以使用box-sizing为border-box处理，或者使用无宽度或宽度分离原则。
对内联元素， padding的效果感觉在水平方向上生效，在垂直方向上不生效。
其实，垂直方向的padding是存在的，只是因为内联元素没有可视宽度和可视宽度，其在垂直方向的行为完全受line-height和vertical-align的影响，所以表现不出来。
应用：我们可以利用内联元素的padding增加元素的点击区域。
2.2 padding的百分比值
对于块级元素：
padding的默认值是0，padding百分比值无论水平方向还是垂直方向都是基于元素自身宽度计算的。
padding不支持负值，而margin可以。padding垂直方向百分比值基于宽度计算，而height基于父元素的height计算。
应用：基于padding垂直方向也是相对宽度计算的特点，我们可以实现固定比例的图形，比如正方形、长方形或固定比例的banner图。
/*正方形*/ div{padding:50%} /*宽高2:1的矩形*/ div{padding:25% 50%}
对于内联元素：
1.同样相对于宽度计算；
2.默认的高度和宽度有差异；
3.padding会断行；
代码如下，渲染效果难以理解，建议买书好好看看。
.box{ border:2px dashed #cd0000; } span{ padding:50%; background-color:gray; } <span>内有文字若干</span>
几个理解点，①内联元素padding是作用在行框盒子上的，如果元素内有多行，padding就会随着换行而断行，即就是padding在每行都会独立渲染；
②虽然同样基于宽度计算，但内联元素有幽灵空白节点，所以同样的padding作用下，垂直方向会大一些；
③被基于计算的宽度，是父容器宽度和内容宽度之和，而块级元素是自身宽度。
3.激进的margin
padding性格温和，负责内间距；margin比较激进，负责外间距。虽然都是间距，差别较大，尤其是margin，特异之处甚多。 默认值为0
3.1 元素尺寸的相关概念
元素尺寸：就是元素的border box的尺寸，也叫“元素偏移尺寸”。outerwidth，outerheight。
元素内部尺寸：就是元素的padding box的尺寸，也叫“元素可视尺寸”。innerwidth、innerheight。
元素外部尺寸：就是元素margin box的尺寸。
3.2 margin对元素内部尺寸的影响
如果元素设置了宽度（块级元素）或者宽度保持包裹性（内联元素），只有padding会改变元素的可视尺寸。
如果元素处于“充分利用可用空间”，即表现为流特性时，margin也会改变元素可视尺寸。块级元素和格式化块级元素都具有流特性。
应用：基于margin具有流特性下改变尺寸的特性，可以方便地实现很多流体布局效果，本人建议大量使用。
1. 一侧定宽的两栏自适应布局。利用块级元素p的流特性，让p元素的宽度始终为变化的容器的宽度减去margin的宽度。
.box{overflow:hidden} .box>img{float:left} .box>p{margin-left:140px} <div class="box"> <img src="1.png"> <p>文字内容...</P> </div>
2.反之，右侧固定，左侧自适应，也很好实现。
3.3 margin与元素的外部尺寸
对块级元素
对于普通块状元素，margin只能改变左右方向的内部尺寸，垂直方向无法改变。而对于外部尺寸，只要是块状元素，无论有没有设置width、height，margin对外部尺寸都实实在在会产生影响。
利用margin负值实现两列等高布局：
.column-box{ overflow:hidden; } .column-left,.column-right{ margin-bottom:-9999px; padding-bottom:9999px; }
margin百分比值：
margin的百分比值和padding一样无论水平还是垂直方向都是相对于宽度计算的。不过，margin百分比值不常用。
margin设置auto值
margin：auto的自动填充规则如下：
①如果一侧定制，一侧auto，则auto为剩余空间大小。
②如果两侧均是auto，则评分剩余空间。
因此，利用auto可以实现如下效果：
右对齐效果，因为margin初始值为0。
.son{ width:200px; marign-left:auto; }
居中效果：
.son{ width:200px; margin-right:auto; margin-left:auto; }
触发margin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的，即该方向上有流特性才可以自动计算。
因此可利用绝对定位元素格式化尺寸实现元素垂直水平居中：
.son{ position:absolute; top:0;right:0;bottom:0;left:0; width:200px;height:100px; margin:auto; }
内联元素
对于非替换内联元素，margin在垂直方向上无效，对应替换内联元素，垂直方向有效，并且没有margin合并问题。
margin无效的情况:
.box{ width:100px; } .child{ width:80px; margin-right:100px; }
此时，margin-right 100px对元素定位没有任何影响，实际是右侧有maigin效果，会影响后面元素和父元素，只是没有对元素定位产生影响。
原因在于，若想让margin属性改变自身位置，必须是和当前元素定位方向一样的margin属性才可以，默认文档流下，当前元素定位方向是左侧和上方。