4.4.6
Border 等高布局技术CSS 中，border 属性可以用于实现等高布局，这是通过给父元素添加边框来让其高度与子元素的高度保持一致。
缺点：
不支持百分比宽度的 border，因此适用于至少有一栏是固定宽度的布局。
适用于 2～3 栏布局，更多的列会受到边框数量的限制。
5.1 字母 x——CSS 中隐匿的举足轻重的角色字母 x 在 CSS 中起着重要作用，尤其在排版和对齐方面：
字母 x 与基线（baseline）：
在 CSS 排版中，所有垂直对齐操作（如 vertical-align）都涉及到基线的概念，而基线的定义就是字母 x 的下边缘。
这种基线的概念用于对齐字符、行高、图片等元素。
x-height：
x-height 是字母 x 的高度，通常指小写字母 x 从基线到等分线（或中线）之间的距离。
在 CSS 中，vertical-align: middle 并不是绝对的垂直居中，而是相对于基线向上半个 x-height 的位置对齐。
ex 单位：
ex 是 CSS 中的一个相对单位，指的是小写字母 x 的高度。它可以用来进行垂直对齐，特别是当需要对齐内联元素时，可以通过 ex 来实现与文本垂直居中。
ex 单位的应用场景主要在于图标、背景图等元素与文本之间的垂直对齐。
5.2 内联元素的基石：line-heightline-height 是影响内联元素高度的关键属性，决定了行高，即行间的垂直间距。其对内联元素、块级元素以及替换元素的影响有所不同：
内联元素的高度：
对于纯内联元素（如文本），line-height 决定了其高度。即使没有 padding 或 border，line-height 也能直接影响其显示的高度
在 CSS 中，行距（line-height）是一个很重要的概念，它表示两行文本之间的垂直距离。
“半行距”（half line height）指的是行高的一半，它影响着每行文本的上下间距
块级元素中的 line-height：
对于块级元素（如 <p>），line-height 不会直接影响其自身的高度，但会影响其中的内联元素（如文本、图片）的高度，从而间接影响块级元素的布局。
总结
Border 等高布局：利用元素的边框（如 border-left）来实现等高布局，适合用于 2-3 栏的布局，不支持百分比宽度的 border，但不容易受到布局问题影响。
字母 x 与基线：x-height 和基线（baseline）是排版对齐的核心概念，vertical-align: middle 和 ex 单位的应用都基于这一原理。
line-height：影响内联元素的高度，尤其是文本的垂直间距。对于内联元素，line-height 决定了行高；对于替换元素和块级元素，line-height 的影响则间接体现在内联元素上。通过理解行距和半行距，可以精确调整元素的排版。
这些知识在实际开发中非常重要，帮助开发者理解和掌握元素的对齐、间距以及排版布局的细节。