CSS 之关于高度

1. 文字的高度由什么决定？

(1) 对于文字，字是基于基线对齐；
(2) 不同的字体的话字体设计师可能会给出不同的建议行高（默认行高）；
(3) 文字的高度由字体大小和默认行高决定。

2. div 的高度由什么决定？

(1) 当在 div 里只有内联元素时，div 的高度由文字的行高决定，与文字大小无关

• 单行文字，div 的高度由文字的行高决定；
• 多行文字，div 的高度由每行文字行高相加；

(2) 当 div 内既有内联元素又有块级元素时，div 的高度由其内部文档流中元素高度总和决定。

3. 文档流

(1) 内联元素从左到右依次排列，空间不够则换行继续从左到右排列；
(2) 块级元素从上到下依次排列，每个块级元素占一行；
(3) 脱离文档流，元素脱离文档流之后，将不再在文档流中占据空间，算高度时无需计算上。以下方法会造成脱离文档流

float // 其他盒子会无视这个元素，但盒子内的文本依然会为这个元素让出位置，环绕在该元素的周围；
position: absolute; // 相对于该元素的父元素进行定位；
position: fixed; // 完全脱离文档流，相对于浏览器窗口进行定位。
position: relative; // 半（未）脱离文档流，相对于自身本来位置移动，但是仍在自身位置占位。

4. 不同字数的中文对齐

(1) 如何让 姓名 与 联系方式 对齐---使用伪元素

<span>姓名</span>
<span>联系方式</span>
span{
    border: 1px solid red;
    width: 5em;
    display: inline-block;
    text-align: justify; // 在多行文本时，可使每行文本左右对齐
    line-height: 20px;
    overflow: hidden;
    height: 20px;
}
span::after{
    content: '';
    display: inline-block;
    width: 100%;
    border: 1px solid yellow;
}
// 用伪元素将 span 撑到相同宽度以后再将伪元素隐藏

5. 文字溢出省略

(1) 单行文本

div {
  border: 1px solid red; // border 调试大法
  white-space: nowrap; // 控制 div 内文本不分行，超出部分往右显示，div 宽度不会变
  overflow: hidden; // 将超出部分隐藏
  text-overflow: ellipsis; // 将隐藏部分变为 ...
}

(2) 多行文本--- 谷歌 css multi line text ellipsis

div{
  border: 1px solid red;
display: -webkit-box;
-webkit-line-clamp: 2; // 第二行 ...
-webkit-box-orient: vertical;
overflow: hidden;
}
// webkit 支持大量的 CSS 扩展，这种 CSS属性前缀为 -wekit- （试验性属性）

6.margin 合并

(1) 若 parent 没有 border，则 child 的上下 margin 会被合并，左右还是会把 parent 撑开。加 border、padding、overflow: hidden;(不推荐)、outline等可以阻止 margin 合并

<div class="parent">
  <div class="child">111</div>
</div>

(2) span 元素，margin 和 padding 只有左右有效。