内联元素与流

圣经：块级元素负责结构

字母X-css世界中隐匿的举足轻重的角色

image.png

基线

1 .在各种内联相关模型中，凡是涉及垂直方向的排版或者对齐的，都和基线有关系。行高就是两基线的间距，vertical-align的默认值就是基线
2 .以上图为标准，基线就是x下方的线，看起来是倒数第二根线
3 .x-height概念：小写字母x的高度，看起来就是正数第2个框的高度.

1 .vertial-middle：他的位置就是基线往上1/2x-height的高度，可以看做是交叉点的位置
2 .vertial-align:middle并不是绝对的垂直居中，和字体有关系。

4 .字母x与css中的ex

1 .ex指的是x-height的高度，小写字母x的高度
2 .作用：内联元素的垂直居中对齐
3 .内联元素默认基于基线对齐，1ex就是一个x的高度，所以如果图标高度是1ex,同时背景居中，文字和图标就会天然居中
//可以实现不受字体和字号影响的文字右边图标对齐
.box{
            display: inline-block;
            width: 200px;
            height: 1ex;
            background:url('./baidu.jpg') no-repeat center;
          }