首页 > 其他分享> 文章详细

css 行高

2022-09-12 23:32:41 阅读：163 来源： 互联网

标签：行框行内字体大小高度行高 background css

文本四线，从上到下分别是顶线，中线，基线，底线。

1. 行高：是指上下文本行的基线见的垂直距离，即途中两条红线间的垂直距离。（途中上下两条同色线间的垂直距离）

2. 行距：是指一行底线到下一行顶线的垂直距离。

3.半行距：行距的一半

1.内容区：

　　文本行中的每一个元素都会生成一个内容区，这个由字体的大小确定,但高度并不是字体大小，内容区比字体大小大。这个内容区则会生成一个行内框。

　　如果不存在其他因素，这个行内框就完全等于该元素的内容区。由line-height产生的行间距就是影响行内框高度的因素之一

2.行内框：行内框是一个浏览器渲染模型中的一个概念。无法显示出来。行内框默认等于内容区域。将line-height的计算值减去font-size的计算值，就是总行距。这个值可能是负值，任何将行间距/2 分别应用到内容区的顶部和底部，其结果就是该元素的行内框

3.行框：行框是指本行的一个虚拟的矩形框。是浏览器渲染模式中的一个概念，并没有实际显示。默认情况下行框高度等于本行内所有元素中行内框最大的值（一行上垂直对齐时以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。当有多行内容时，每行都会有自己的行框。

结论：感觉上面的概念不太符合实际情况。

个人总结

　　1.内容区大小由字体大小决定，但大于字体大小。默认情况下，行框就等于内容区的高度和位置,

　　2.如果指定了行高，如果行高大于字体大小，那么行框高度就等于行高高度，字体和行框中间对齐

　　　如果行高小于字体大小，那么行框高度会缩小，但不会等于行高，行框也不会和字体中间对齐。

　　　所以设置行高时，尽量让行高大于字体大小。

　　3.行框的高度决定父元素的高度（父元素未设置高度时）

　　4.行高是可以被继承的。只有因子值会被子元素继承换算前的因子，其他会继承换算后的像素

　　行高最常用的功能：单行文本垂直居中（设置行高为元素高度）

实例

<body >
    <div id="d1">
       <span id="s1">中文English</span>
    </div>
</body>

css代码1，未指定行高

#d1 {
    background: pink;
    width:300px;
    margin:100px auto;
}
#s1 {
    background: deeppink;
    font-size: 40px;
    /* line-height: 80px; */
}

css代码2，行高大于字体大小

#d1 {
    background: pink;
    width:300px;
    margin:100px auto;
}
#s1 {
    background: deeppink;
    font-size: 40px;
    line-height: 80px;
}

css代码3，行高小于字体大小(或许行框底部与底线对齐？)

#d1 {
    background: pink;
    width:300px;
    margin:100px auto;
}
#s1 {
    background: deeppink;
    font-size: 40px;
    line-height: 20px;
}

标签：行框,行内,字体大小,高度,行高,background,css
来源： https://www.cnblogs.com/gaoBlog/p/16687237.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

css 行高