介绍CSS里 元素的宽度与高度到底由什么确定，有哪些实用方法，另外附上一些小技巧和概念理解。
目录
div的高度
每种字体的建议行高不同，有的是1.4倍，有的是1.3倍。都是字体设计师设计的。如图所示
你可以规定行高是多少，把行高限定死。
div里写空格要用转移字符。
当你要让文字对齐的时候用到的技巧：
1.让2个span元素line-height:justify属性，当时单行显示不出效果，只有多行才能对齐。
2.这时候你再后面追加一个伪元素，让他为inline-block属性。伪元素宽度为span的5em，多行时line-height:justify对齐。
只要是inline元素，两个之间只要不是连在一起，就会出现空格，如图
不用display：inline-block，用float：left，然后父元素清除浮动(clearfix)，就能实现没有空格的效果。
文字省略溢出
white-space:nowrap属性——不换行，超出部分往右显示。div宽度不会随文字变长。
overflow:hidden //超出部分省略
text-overflow:ellipsis //超出部分变成省略号
搜多行文本怎么省略
文字垂直居中
outline不占据空间，border占据空间
父元素不限定高度的时候怎么居中，就用padding！
不要用height和line-height！！！
不要用height和line-height！！！
不要用height和line-height！！！
margin合并
子元素的padding属性会影响父元素的高度，毋庸置疑。
子元素的margin属性会影响父元素高度吗？
答案是不一定！分情况！
1.当父元素有border属性时，子元素的margin会影响父元素高度（很好理解）
2.当父元素没有border属性时，父元素高度如图所示。左右间距受到padding属性影响，但是上下间距却纹丝不动。这是因为magIn合并了。
如果父元素没有东西挡住子元素margin，那么子元素的margin就会超出父元素高度。
这时候如果给父元素的父元素(如body)添加一个border，就会发现父元素和body之间存在子元素的margin间距
解决方法：
给父元素一个属性（只要能挡住margin，不让合并就行）如margin padding。就能取消margin合并
还有种方法 overflow:hidden，顾名思义：让溢出后的内容隐藏掉。（但是不推荐这么做）
因为你加了这个属性后所有内容都在写在父元素内，要做一些功能（如悬浮窗）就实现不了。
所以
overflow:hidden不到万不得已就不用！
overflow:hidden不到万不得已就不用！
overflow:hidden不到万不得已就不用！
加个padding就好了
总结
文档流
1.div高度是由内部文档流中元素的总和决定的。
2.文档流中每个div（块级元素）都会另起一行。内联元素从左到右，块级元素从上到下每一个都另起一行。
怎么让元素脱离文档流？很多方式。脱离文档流的意思是让父元素的高度不计算脱离文档流内容的高度。(算高度时候别叫上我)
注意：相对定位的子元素不脱离文档流。父元素算上其高度，其位置可以相对于父元素发生变化。不影响其他子元素的位置。
确定元素宽高
内联元素的宽高
内联元素的宽度受padding和margin影响，但是高度不受影响！！！
块级元素的宽高
div的宽度不要去改它，会自适应父元素宽度。
div的高度：如果div内是内联元素，就所有行高加起来；如果是块级元素，就把它的内容，border，padding,margin(看不合并)影响div高度。
总结：块级元素的高度由它内部文档流元素高度的总和决定的。
如何绝对居中（上下左右都居中）
1.父元素不限定高度的情况下：
让子元素添加padding,实现上下居中。让父元素margin左右自适应实现 子元素左右居中。
2.确定父元素的高度后怎么绝对居中？（只有一种情况下需要这么做，父元素是全屏显示body）
第一种办法：先让父元素变成box-sizing:border-box盒模型；然后子元素四个方向margin都auto（但是没用 CSS BUG,只能左右auto不能上下auto）,解决方法：设置为绝对定位。但是子元素必须设置height，不能确定子元素高度就不能用这种方法。
第二种办法：用flex布局，3句话绝对居中（IE不支持，用JS做）如果IE要支持，去搜CSS垂直居中的7种方法。
可以做出对话框效果
如何实现一个一比一的div
padding-top:100%;
分析：div高度是0，从下到上全是padding-top。padding-top:100%是让padding和宽度一样。
就实现了宽度自适应，高度为0。用padding-top实现高度定位。
