div高度的探讨
div高度由其内部文档流元素的高度总和决定；
文档流：文档内元素的流动方向；（内联元素从左往右流动，如果遇到宽度不够自动换行；块级元素从上往下流动；）
如果div里只有内联元素，则div的高度内联元素的行高决定的,默认的行高由字体设计师决定，不同字体有不同的行高。如果font-size是200px，手动设置line-height为20px，则div的行高就是20px。
内联元素(inline、inline-block)之间的多个空格或换行都用一个空格代替，如果要加空格用 (no break space),内联元素之外的空格省略,用浮动可以解决空隙问题。
关于中文对齐的一个套路：
内联元素一行放不下时存在响应式，即自动换行。很长的数字或单词浏览器会默认成一个字所以不会自动截断，除非加分隔符合-或者word-break，这是就是文档流（Normal Flow）。
文字垂直居中：别把父元素高度写死，上下padding相等即可
div内包含div，则父元素div的高度（content的高度）由子元素div的（content+padding+border + margin ）的高度决定，其中margin包不包含在父元素div的高度中要分情况而定。当子元素和父元素发生外边距合并时，子元素的margin不包含在父元素的高度内，当子元素与父元素不发生外边距合并时则包含在内，父元素加padding或border都可以阻止和子元素的外边距合并，只要父元素有东西(border、padding)挡着子元素的margin就会阻止外边距合并。
div内既包含块级元素又包含内联元素,则div的高度由两者的高度之和决定。（下图可见文字也可以阻止外边距合并）
DIV的高度由它内部文档流中元素的高度的总和决定。文档流中内联元素从左到右依次排列，如果空间不够自动换行；文档流中的块级元素从上到下依次排列，每一个块级元素都会另起一行。
所以只要元素脱离了文档流，则父元素在计算高度时就会忽略该元素（float浮动、position: absolute、position: fixed都可以脱离文档流）。
注意相对定位不脱离文档流，不管它移动到什么位置，父元素在计算高度时都会按照该元素原来的位置计算高度
理解了DIV的高度后，水平居中和垂直居中的方法就水到渠成。
内联元素的宽度由内容、padding、margin、border决定，内联元素的高度由行高决定。
一个小trick，制作宽高1:1的div
