基线、底线、顶线、中线

zxhaaa 发布于2019-04-23 13:33 / 3413人阅读

摘要：基线底线顶线中线顶线中文汉字的的上端沿中线横过英文字母的中间的线基线并不是汉字文字的下端沿，而是英文字母的下端沿底线中文汉字的下端沿内容区指底线和顶线包裹的区域行内元素可以通过属性显示出来，实际中不一定看得到，但确实存在。

基线、底线、顶线、中线、vertical-align 顶线：中文汉字的的上端沿；中线：横过英文字母x的中间的线；基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿；底线：中文汉字的下端沿；内容区：指底线和顶线包裹的区域（行内元素display：inline可以通过background-color属性显示出来），实际中不一定看得到，但确实存在。内容区的大小依据font-size的值和字数进行变化。行高（line-height）：包括内容区与以内容区为基础对称拓展的空白区域，我们称之为行高。一般情况下，也可以认为是相邻文本行基线间的距离。行距：指相邻文本行间上一个文本行底线和下一文本行顶线之间的距离。当然，我更愿意认为是（上文本行行高-内容区高度）/2+（下文本行行高-内容区高度）/2。行内框：是一个浏览器渲染模型中的一个概念，无法显示出来，但是它又确实存在，它的高度就是行高指定的高度。行框（line box）：同行内框类似的概念，行框是指本行的一个虚拟的矩形框，也是浏览器渲染模式中的一个概念。行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐，最终计算行框的高度）。 vertical-align 此处需要特别注意的是：垂直对齐属性只对文本有效（是指包含了#Text节点的元素节点才能正确地处理vertical-align属性）。同时，该属性不能继承。只有元素属于inline或是inline-block ，vertical-align属性才会起作用。基线对齐（vertical-align : baseline）使元素的基线同基准元素（取行高最高的作为基准）的基线对齐顶端对齐（vertical-align : top）是将元素的行内框的顶端与行框的顶端对齐底端对齐（vertical-align : bottom）与顶端对齐（vertical-align : top）相反中间对齐（vertical-align : middle）通常使用在图片上，将图片的垂直方向的中线与文本行的中线（文字元素的行内框中线）对齐。文本顶端对齐（vertical-align : text-top）是将元素行内框的顶端同行框的顶线对齐文本底端对齐（vertical-align : text-bottom）是将元素行内框的底端同行框的底线对齐上标（vertical-align:super）使元素的基线相对于基准元素的基线升高；下标（vertical-align:sub）使元素的基线降低，移动的幅度CSS规范中没有规定，由浏览器来决定。长度值和百分比值和上下标类似，可使元素的基线相对于基准元素的基线升高（正值）或者降低（负值）。 CSS 关键字 unset 是关键字 initial 和 inherit的组合。如果有继承父级样式，则将该属性重新设置为继承的值，如果没有继承父级样式，则将该属性重新设置为初始值。换句话说这个unset关键字会优先用inherit的样式，其次会应该用initial的样式。

服务器托管专线服务底线基线管理基线检查基线配置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2029.html

Vertical-Align: 你应该知道的事情

摘要：引言说起大家都知道他是用在对相邻的文字和内联元素上，比如常见的将一个图标和相邻的文字居中对齐。每个内联元素也有其自己的基线，顶线和底线。内联元素的基线位置低于行框的基线。内联元素的基线相对于行框基线移动相应于行高百分比的数值。平时遇到vertical-align时候会有各种抓狂的时刻，调来调去虽然也弄好了但是心里面一直很虚，因为一直没有透彻理解过这个属性，搜索时候发现了一篇很棒的文章...

yacheng 2019-08-30 15:54 评论0 收藏0
「前端早读君008」新手必踩坑之display: inline-block

摘要：中线基线顶线底线中线基线顶线底线是文本的几个基本线，其对应位置如下图基线小写英文字母的下端沿。中线小写英文字母的中间。将元素的基线与其父元素的下标基线对齐。将元素的基线对准给定长度高于其父元素的基线。今日励志语往日不可追，来日犹可期，祝大家2019年继往开来迷之间隙我们创建一个导航列表，并将其列表 item 设置为 inline-block，主要代码如下：我我 ...

sevi_stuo 2019-08-30 15:55 评论0 收藏0
CSS：理解行高 line-height

摘要：行高行距半行距从上到下四条线分别是顶线，中线，基线，底线。行高指文本行基线间的垂直距离。上图任意两条相同颜色的垂直距离也是行高。父元素不同的行高单位影响子元素的继承。行高、行距、半行距 showImg(https://segmentfault.com/img/bVAdEh); 从上到下四条线分别是顶线，中线，基线，底线。行高指文本行基线间的垂直距离。上图任意两条相同颜色的垂直距...

rickchen 2019-08-29 11:06 评论0 收藏0
【学习笔记】行高 line-height 的基本概念

摘要：整理一下关于行高的一些基本概念。行框的高度是这一行行内框的最高点到最低点的距离。所以在没有设置固定高度的元素中，高度是由这个元素中所有行框高度叠加而成的。提示有种说法是行框的高度等于这一行中行内框中最大的，这种说法是错误的。整理一下关于行高的一些基本概念。原文链接：http://www.zengkan.win/?p=84 1.定义每个文本行中可以看做有四条线：顶线，中线，基线和底线...

littleGrow 2019-08-30 13:19 评论0 收藏0