对CSS中高度和宽度的理解

div 的高度：

当我们写font-size=20px，但是在开发者工具里面会随着字体的不同，字体的大小也不同，这是因为随着字体的设计不同，行高不同。当然可以使用line-height来固定行高。因此在一个div里面的字体的大小，不是由font-size决定的，而是由字体本身的行高决定。
空格：  全拼：no break space。切记，不能使用空格来进行对齐，因此每种字体的空格宽度不一样。
1.块级元素高度由其内部文档流元素的高度总和决定的。
2. 文档流是文档内元素的流动方向，内敛元素从左往右，块级元素从上往下。
脱离文档流的意思就是计算高度的时候别算上我。可以使用float:left, position:absolute, position:fixed 这三种方法脱离文档流。
position:relative是不会脱离文档流的。相对于之前的位置定位，同时占据的位置还是原来的位置，也就是在文档流中的位置不变。也不会把下面的元素挤下去，而去盖住了。也就是父元素算高度的时候还是要算上我。

margin合并：

如果一个div（父）里面还有一个div（子），那么这个父div的高度就是由里面div的高度加padding，border,加margin决定的。但是会出现父div和子div的margin合并的现象,当父div没有border,pading
当父元素没什么挡住（如padding和border）子元素的margin，那么子元素的margin就会和父元素margin合并起来（上下合并，左右不合并）。
解决方法：
父元素上加border-top(bottom),或者padding-top(bottom),
overfolw:hidden;也是可以的，不推荐使用。

内联元素:

内联元素的宽是由它里面的字数个数确定的，可以加padding，也可以加margin,但是高度是不受加padding和margin的影响。也就是说内联元素的宽度受padding和margin的影响，但是高度不受padding和margin的影响。span的告诉是由行高决定的。
div的宽度尽量不要改，因为它会默认去适应它爸爸的宽度。
outline：轮廓，宽高不影响。
border：会影响宽高。

一比一的div
padding-top: 100%
效果：padding-top 为100%就是和宽度一样。这样就实现了一个宽度自适应，宽度和它爸爸一样宽，高度为0，用padding-top来实现的高度的撑起来，因为高度使受padding影响的