前言
css把所有html标签都当做各种不同类型的盒子。css就是一套操作盒子的摆放和样式的规则。规则多到css的开发人员都记不全，把核心概念掌握之后来什么撸什么就好了。
盒子的类型
1，块元素（block）
页面正常流中的默认行为：1，从上到下。 2，前后生成换行符。 3，默认继承父节点的宽度。 4，可以显式的设置宽高。
2，行内元素（inline）
默认行为：宽高由内容撑开，宽度超过父节点宽度时才会折行（英文不会折行）。
3，行内块（inline-block）
默认行为：支持宽高，前后不会生成换行符，
注意：源码中line-block之间有空格的话，在浏览器的显示中会出现蜜汁间隙。
css3部分的flex等新类型需要单独研究。这里只列出2部分的三种盒子。css3是拓展于css2的，没有更改之前的规则。
盒子属性
所有的盒子都有这些属性。 只有一点需要注意。行内元素（inline）不支持主动设置宽高。
padding：内边距，border以内。
margin：外边距，border以外。
border：盒子的边框。
width：内区域的宽度。
盒子的宽度（width+padding+margin+border）
指定宽度时的行为
1，width属性设置的宽度只是盒子内容的宽度。
2，为设定了width属性值的盒子添加水平的边框和内外边距会撑大盒子。
不指定宽度的行为
css中对所有盒子的所有属性都有默认设置。没有指定width属性的盒子的width值是auto。一下是width:auto的默认行为。
block：1，始终拓展到与父元素宽度相同。2，添加内外边距会使元素内容区域，也就是width宽度减少。减少量=水平边框+水平内外边距；
inline-block：与block行为相同。
inline：由内容撑开。
