display
inline/inline-block/block -->> 牛奶/果冻/坚果
inline: img, span, strong, em, i, em, a...
inline-block: input, button, ...（table-cell元素）
block: p, div, ...(元素只要应用了float, position就会变成block元素)
table
flex
table
table-row (tr)
table-cell (td)
table-row-group (tbody)
table-header-group (thead)
table-footer-group (tfooter)
table-caption (caption)
table-column (col)
table-column-group (colgroup)
display:table-cell下，垂直居中，等高特性
table表格中的同一行列表元素都等高。 display:table-cell属性的元素对margin不敏感，也就是margin作用在上面不work的。
最适用场景
列表个数不固定，但是无论列表几个，都平分容器空间
父级设置display:table，同时宽度为容器宽度，或是直接width:100%, 此时display:table-cell子元素就会自动等分。
flex flex-direciton | flex-wrap (flex container)
.container { display: flex | inline-flex; }
.container { flex-direction: row | row-reverse | column | column-reverse; }
.container { flex-wrap: nowrap | wrap | wrap-reverse; }
.container { flex-flow: <"flex-direction"> | <"flex-wrap"> }
justify-content | align-items | align-content (flex container) justify-content定义了item在主轴上的对齐方式
.item { justify-content: flex-start | flex-end | center | space-between （两端对齐，item之间的间隔都相等）| space-around(最边缘item与边框的间隔相等，item之间的间隔比item与边框的间隔大一倍); }
align-items定义了item在交叉轴（侧轴）上的对齐方式
.item { align-items: flex-start | flex-end | center | baseline | stretch (default); }
align-content定义了多根轴线的对齐方式。如果item只有一根轴线(当只有一行，无换行时)，该属性不起作用
.item { align-content: flex-start | flex-end | center | space-between | space-around | stretch (default); }
order定义了item的排列顺序，数值越小，数列越靠前，default: 0 (flex items)
.item { order: ; }
flex-grow | flex-shrink | flex-basis (flex items)
flex(default: 0 1 auto)
auto(1 1 auto) none(0 0 auto).item { flex: none | [<"flex-grow"> <"flex-shrink"> <"flex-basis">]; }
flex-grow(default: 0)索取父容器剩余的空间
flex-basis(default: auto)是width的替代品，在分配空间之前，它会先跟父容器预约这么多空间，然后剩余的才归置到剩余空间，父容器再把剩余空间分配给设置了flex-grow的容器，若同时设置了flex-basis和width，width会被覆盖，即优先级flex-basis > width。但是如若flex-basis，width其中有auto, 则另外的非auto属性优先级会更高。
flex-shrink(default: 1)定义一个子容器的压缩比例。
</>复制代码
width:300
width:160
width:120
.container { display: flex; width: 500px; height: 150px; background-color: #eee; } .B { height: 100px; } .B1{ background-color:rgba(255,255,0,.5); width: 300px; flex-grow:1; flex-shrink:2; } .B2{ background-color:rgba(255,0,255,.5); width: 160px; } .B3{ background-color:rgba(0,255,255,.5); width: 120px; }x2 = 2 * x1500 = 300 * x2 + 160 * x1 + 120 * x1
summary:
剩余空间＝父容器空间－(子容器1.flex-basis/width) - (子容器2.flex-basis/width) - …
如果父容器空间不够，就走压缩flex-shrink，否则走扩张flex-grow；
如果你不希望某个容器在任何时候都不被压缩，那设置flex-shrink:0；
如果子容器的的flex-basis设置为0(width也可以，不过flex-basis更符合语义)，那么计算剩余空间的时候将不会为子容器预留空间。
如果子容器的的flex-basis设置为auto(width也可以，不过flex-basis更符合语义)，那么计算剩余空间的时候将会根据子容器内容的多少来预留空间。
如果父级的空间足够：flex-grow有效，flex-shrink无效。 如果父级的空间不够：flex-shrink 有效，flex-grow无效。
align-self允许单个item有与其他item不一样的对齐方式，可覆盖align-items属性 (flex-items)
.item { align-self: auto（default，表示继承父元素的align-items属性，若无父元素，equal stretch） | flex-start | flex-end | center | baseline | stretch; }
flexBox css tricks: css-tricks.com/snippe...
padding
不支持任何的负值, margin, letter-spacing, word-spacing, vertical-align支持负值
background-clip
border-box
padding-box
content-box
margin
普通元素的百分比margin都是相对于父级容器的宽度来计算的
绝对定位圆度的百分比margin是相对于第一个定位祖先元素（relative|absolute|fixed）的宽度计算的
margin重叠计算规则：
正正取大值
正负值相加
负负最负值
margin无效的情况：
inline水平元素(非替换元素，button标签；正常书写)垂直margin无效
margin重叠了
display:table-cell/table-row等声明的margin无效，但是替换元素们例外（firefox: table-cell类型是inline-block渲染；IE：table-call类型是table-cell渲染）
绝对定位的margin值其实是一直有效的，只是不像普通元素那样，能让兄弟元素移动（因为绝对元素是脱离文档流的）
相对float元素设置margin，它不是相对于该浮动元素，而是外部容器
inline元素导致的margin失效
