div {
width: 100px;
margin-left: auto;
}
为什么上述代码会使div靠近浏览器的右侧？
w3c 规定：
常规流中的块级非置换元素需要满足下面的等式：
'margin-left' + 'border-left-width' + padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
若等式左边恰好只有一个值被指定为‘auto’，则该值可以由等式求出，代码中除了
width跟margin-left有值，其余值都为0。margin-left = width of containing block - 100px。所以div会靠近包含块的右边。
置换元素：浏览器根据元素的标签和属性，来决定元素的具体显示内容。
<img> <input> <select> <textarea> < object> <iframe><canvas>
例如：浏览器根据<img>标签的src属性显示图片。<input>根据标签的type属性决定显示输入框还是按钮。
置换元素在其显示中生成了框，这也就是有的内联元素能够设置宽高的原因。
