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决定，内联元素的高度由行高决定。

屏幕快照 2018-12-20 上午11.25.23.png

知识点九

一个小trick，制作宽高1:1的div

补充

1. 文字省略溢出