CSS 宽度与高度

高度与字体（内联元素）

• 字体之间通过基线对齐
• 当div包含一个内联元素，他的高度由字体的行高确定
• 默认行高是设计师设计字体时的建议行高。

空格（内联元素之间）
&nbsp no break space
两个inline元素之间有任何回车，tab，换行或其他任意字符，都会变成空格。
因而导航栏li元素横排不要使用inline-block方法，用float+清除浮动。

中文的对齐方式技巧

文字垂直居中
用line-height加padding，不要用height = line-height，因为height = line-height只能居中一行。

margin上下合并
父元素有padding或border，上下margin就不会合并。

div垂直水平居中

<style>
    .child{
      border: 5px solid orangered;    
      text-align: center;
      width: 150px;
      margin: 0 auto; ///
    }
    .parent{
      outline: 3px solid green;
      padding: 100px 0;  /
    }
  </style>

用flex布局

.parent{
    justify-content: center;
    align-items: center;
}

文字溢出省略

white-space:nowrap
overflow:hidden
text-overflow:ellipsis

总结：
DIV的高度是由它内部文档流的总和决定的