[toc] ## pre-notify content-area和行高、line-height:normal值并**没有**关系（比如你将html的line-height统一设置为一个数值，包裹文字的纯span的高度并不会发生变化），只和字体和字号有关 只有包裹文字的块元素的高度才和行高、line-height：normal有关。 ## font-size决定span宽度 ### font-size和文字选中的背景色区域和字体 微软雅黑  文字选中的背景色区域的**宽度**刚好为font-size大小 宋体SimSun  **不仅**文字选中的背景色区域的**宽度**刚好为font-size大小 ，在chrome下文字选中的背景区域的**高度** -**也**刚好为font-size大小(火狐中不是)，这意味着纯span的高度也为一个font-size大小 但需要注意的是，span的高度并不等于行高，行高等于`font-size*line-height:normal`，而宋体的normal值为1.1几，  微软雅黑字体下，文字的最大**可视**宽度(非选中时的背景区域)刚好和文字选中的背景色区域的**宽度**相等  SimSun下，文字的最大**可视**宽度可以发现是略小于文字选中的背景色区域的 >结论: > >font-size的大小一定和文字选中的背景色区域的**宽度**一样大 >如果是SimSun(且为谷歌)，那么文字选中的背景色区域的**高度**也和font-size一样大 > >==== ==== === > >除此之外，文字实际占的宽度(**视觉宽度**)并不一定等于font-size， >微软雅黑是等于的，SimSun则是略小于 > >但其实这并没有问题，因为css布局看的是font-size，一个span的宽度是由 `font-size*[字体个数]` 决定的 > ## lineHeight决定父容器高度 ### line-height:normal line-height默认值为`normal`，意思是根据字体的不同，line-height就会取不同的值， 如微软雅黑，line-height就为`1.32`多一点(这个值不大对？)， 而宋体为`1.14`多一点 >[danger] 如果在html中重置line-height为某个特定值，那么会覆盖不同字体的所独有的line-height值 > > 浏览器不同，字体的normal值也是不同的，可能会多一位小数或则最后一位小数的值不同 ### span的高度并不一定等于行高 不改变字体自带的`line-height:normal;` 微软雅黑下，chrome下是等于的，firefox下不等于  **且**，一旦字体本身的`line-height:normal`的值被改变，那么span的高度就 **一定不** 等于行高 (但如果不是span，内在盒子是块级盒子就不会)  span的高度依然由content-area(只受字号、字体，和行高**无关**)决定 可以借由`display:inline-block;`"修正" ### 文字选中背景区域的高度和内联盒子的高度以及父容器高度 >微软雅黑 >  chrome中 文本选中的区域的**高度**刚好和内联盒子一样大  firefox中，微软雅黑字体时，文本选中区域的**高度**是大于内联盒子高度的 这是为什么呢？ 内联盒子的高度不应该就是content-area（文字选中背景区域）的高度吗？ 有两种可能 ，第一种，内联盒子的高度确实是content-area的高度，但文字选中的背景区域在某些字体下并不等于content-area的高度，在某系字体下才等于 ，第二种，内联盒子的高度并不一定等于content-area的高度（此时依然把文字选中时的背景区域看做是content-area的高度），这样就能很好理解为什么蓝色背景区域会超出span So两种假设，个人倾向于第一种，即文字选中的背景区域在某些情况下并不等于content-area的高度，这样理解的好处在于，span的高度我们可以看做是由content-area决定的（只受字号和字体影响） So，接下来我们说到content-area，请把它理解为一个纯span的高度（只受字号和字体影响） --- 由于span在不同浏览器下，即使为同一种字体同一个字号，高度也可能是不同的，并且这个span和它的容器元素的高度也不相等（等于该浏览器下这款字体的content-area大小），So，为了便于开发，为了规范浏览器表现的一致性 我们通常会将将这个普通的行级盒子变成行内块  此时这个span的高度会统一像它的容器元素一样由`行高`决定（原本由content-area决定） 但此时仍然有个问题，chrome和firefox内联盒子的父级的高度呈现依然是不一样的  (firefox) 可以发现firefox大于19px，而chrome刚好等于19px(文字选中背景色区域的高度)，这是因为firefox微软雅黑字体的line-height:normarl值更大一点的原因。 So，我们可以统一的设置一个`line-height`数值，这样最终我们就能得到一个一致的高度 >SimSun > 上面我们看了字体为微软雅黑时，行内盒子、父容、文字选中背景区的关于高度的表现情况，下面是字体为宋体时的表现  可以发现这次不论是chrome还是firefox，文本选中的背景色区域的高度和内联盒子的高度都是一样大的 但父容的高度和span还是不一样大，且差距比上一次（微软雅黑）还大 >结论: > >文字选中背景区域的高度和span的高度是一样大的（除了在微软雅黑这种字体下，firefox的选中区域的高度会大于span的高度，可用inline-block修复） > >不同浏览器下，即使字体、font-size、line-height都相同，父容器高度因此也相同，**但**span（外在内在盒子都为inline）的高度也可能是不一样的， >但，只要设将span设置为inline-block，高度就会保持一样（等于行高） > >So，一行布局时，要让行级元素在不同浏览器下表现一致，需要： >1. 对行级元素：display:inline-block(解决span和文本选中背景区域高度、父容不等高的情况) >2. 父容器line-height使用固定数值 >因为一行的默认高度等于行高，但不同浏览器下line-height是不一样的，因为自带的字体不一样，并且同一种字体的line-height虽然都使用的关键字值`normal`，但不同浏览器下字体内置的的line-height:normal值是存在一些差距的 ### display:inline-block解决span在不同浏览器下高度的不一致 ## 元素box-sizing与line-height越界 box-sizing为 content-box的时候 即使line-height大于元素高度设定的值，文字也会居中显示  但一旦，box-sizing改为border-box ``` <C css='background:pink;padding:2px 5px;box-sizing:border-box;height:16px;' > Mly </C> ``` chrome  firefox  可以发现文字不再居中显示了，而只是让line-height的(line-box)上边和元素的content-box的上边对齐 ## 关于英文 宋体下，英文字符占据的宽度是中文字符的一半，且`M`和`i`占据的宽度是一样的  微软雅黑下,M占据的宽度为1个font-size，而其它字母依据它们本身的宽度大小的不同占据的宽度也是不同的， 另外m和M的宽度也是不同的  ### monospace monospace是等宽字体簇（宋体算是其中一种？），但并不代表每个英文字母从而就会变为1个font-size大小，它们只是每个英文字母变得一样宽了，至于这个宽度是多少，是不一定的，可能1/2 font-size、1/3font-size... ### text-indent `text-indent:2em` 对于中文比较适用，如果是英文的话，介于上面所述，会出现参差不齐的情况 因为此时1个英文字母的宽度不一定等于1em， #### 1em 1em是一个`M字母宽度`的意思，它一般情况下等于1个大写字母`M`的宽度，但也存在不等于的情况(一定等于一个中文字符的宽度) >text-indent:2em > 微软雅黑字体下  simsun字体下  monaspcae字体簇下  ### 文字选中背景区域的等于span的大小 simsun  微软雅黑  ---