块状元素的宽高如何确定
块状元素的宽度很好确定，就是父级的宽度，那父级的宽度了，如果没有设置 width，那么就是浏览器的窗口的宽度了。如果是 float 或者定位或者 flex 元素，就是内部容所占的宽度。那高度了，高度的情况复杂点，比如如果块状元素内部是文本。
内部是单行文本
单行文字高度由字体的行高决定。字体设计师会在字体文件里写一个建议行高，所以如果开发者没有设置 line-height，则这个块状元素内部的元素行高就是字体设计师定的建议行高。
因为 HTML 会把文本之间的空格，包括 enter 回车（不是<br />），多个 space 空格都合并显示为 一个空格。所以 HTML 回车实现的换行文本其实就是单行文本。这时候的高度同上，也是由字体的行高决定的。
多个空格会被合并成一个空格，在 HTML 里面，我们实现多个空格用 全称 no break space 来实现。虽然可以用 来实现多个空格，但是它是用来排版的，不要用来它来实现布局。
比如，咱们常见的表单<label>内的文本两端对齐布局。因为空格的宽度也是由字体的设计师们定义的，有的字体可能是对应 2 个字符，这个时候咱们可能可以通过 来实现对齐，可是有的字体可能是 2.2 个字符，那就无法用 实现了。
这种需求咱们可以这样实现对齐：
See the Pen 两行不同个数字体左右对齐 by dsphoebe (@dsphoebe) on CodePen.
如果给元素定义 display:inline-block; 或者 display:inline; 那么该元素之间的所有形式的空格都也只会显示为一个空格。
内嵌文本之间的空格会被合并成一个空格，而内嵌文本的之外的空格会直接被 HTML 忽略。
内部是多行文本
如果内联文本很多时，文本就会出现到第二行。整个文本显示为从左到右，从上到下的排列方式。这种流动的方式就称为文档流，英文 Normal Flow。
如果在文档流中遇到太长的字符时，会因为过长而另启一行，而且可能太长而导致超出块状元素的宽度。限制它超出可以在合适的位置加上连字符 -，或者定义它的样式为 word-break: break-all;，意思为按照块状元素的宽度切断字符。
如果文本过多，文本会溢出，经常的需求是截断文本并用省略号结尾显示。
单行文本溢出时切断并省略号结尾：
See the Pen 单行文本溢出 by dsphoebe (@dsphoebe) on CodePen.
实现多行文本溢出切断并省略号结尾：
See the Pen 多行文本超出部分变成省略号 by dsphoebe (@dsphoebe) on CodePen.
内部文本垂直居中
设置相同的 padding-top 和 padding-bottom 值来撑开块状元素的高度，实现多行和单行文本都能自适应垂直居中。前提是块状元素的高度不是固定的。
内部是块状元素
如果内部块状元素设置了 margin-top 或 margin-bottom，他们会被合并到外部元素的 margin-top，margin-bottom。如果没有给外部块状元素设置 padding-top，padding-bottom，border-top，border-bottom，overflow 等。
总结
如果内部是文本，则高度等于内部文本行高总和；如果内部是块状元素，则由所有内部块状元素的高度 加上所有内部块状元素的 padding-top，padding-bottom，border-top，border-bottom，以及他们没被合并到父级块状元素的 margin-top 和 margin-bottom的总和。