深入line-height，中线，基线，底线，顶线

最新推荐文章于 2020-12-11 16:26:24 发布
最新推荐文章于 2020-12-11 16:26:24 发布
阅读量1.8k 收藏 1
点赞数
分类专栏： css 文章标签：  vertical-align line-height 中线 底线 基线
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zshsats/article/details/80151091
版权

中线，基线，底线，顶线

这里写图片描述

属性值 对齐方式
baseline    元素基线与父元素基线对齐，默认值
bottom  元素底部与父元素底部对齐
top 元素顶部与父元素顶部对齐
middle  元素中线与父元素中线对齐
top 与父元素顶部对齐
text-top    元素顶部与父元素文字顶部对齐
text-bottom 元素顶部与父元素文字顶部对齐
优资园
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
深入理解CSS中的line-height的使用
01-21
基线、底线、顶线、中线   注意： 基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。 不同字体的基线不尽相同。 行距、行高   line-height 与行内框盒子模型 所有内联元素的样式表现都与...
CSS行高——line-height
weixin_34216196的博客
08-04 1071
初入前端的时候觉得CSS知道display、position、float就可以在布局上游刃有余了，随着以后工作问题层出不穷，才逐渐了解到CSS并不是几个style属性那么简单，最近看了一些关于行高的知识，就此总结一下。 所谓行高是指文本行基线间的垂直距离。要想理解这句话首先得了解几个基本知识： 顶线、中线、基线、底线 <!DOCTYPE html> <html>...
line-height的底线、基线、中线、顶线
我是新手F1的专栏
03-28 5016
说明：粉色为顶线，蓝色为中线（和英语本有点差异），绿色为基线，红色为底线 1.vertical-align:top 2.vertical-align:middle 3.vertical-align:baseline 4.vertical-align:bottom 结论：顶线和底线是相对于中线来计算的，当line-height
vertical-align 和line-height 以及baseline的解析
weixin_30781107的博客
12-15 172
line-height是相对于font-size来计算的，vertical-align的百分比值是相对于line-height来计算的，vertical-align的默认是baseline; demo： font-size:14px; line-height:1.5; line-height的值其实就是1.2*20=21px; 如果想设置行高为25px;25/14=1.78571427,...
CSS 成长之路（六）顶线、中线、基线、底线与行距
koko_TT的博客
05-05 1863
示意图 行距定义 行距为上下两行基线与基线之间的距离。
文本行中的基线（baseline）、底线、顶线、中线、行高、行距、行内框
Dontla的博客
11-19 3792
参考文章：基线、底线、顶线、中线
CSS行高line-height的个人理解
01-19
————————顶线(top line)———————————————— ——————————中线(middle line)———————————— ————————————基线(base line)——————————— ————...
CSS中的line-height行高属性学习教程
01-21
图中两条红线之间的距离就是行高（line-height），上一行的底线和下一行的顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之间的关系...
深入理解-CSS-中的行高与基线1
08-08
2. 内容区内容区是指底线和顶线包裹的区域（行内元素display：inline可以通过background-color属性显示出来），实际中不一定看得到，但确
icwb2-data:该目录包含第二次国际汉语分词测试中使用的培训，测试和金标准数据。 还包括用于对烘烤参与者提交的结果进行评分的脚本以及用于生成基线和顶线数据的简单分段器
05-17
icwb2-data Source : SIGHAN是国际计算语言学会（ACL）中文语言处理小组的简称，其英文全称为“Special Interest Group for Chinese Language Processing of the Association for Computational Linguistics”，又...
深入理解css基线与行高
热门推荐
顛沛流離的小時光
01-25 1万+
基线、底线、顶线、中线 、行高
「前端早读君008」新手必踩坑之display: inline-block
weixin_34416754的博客
01-02 201
今日励志语 往日不可追，来日犹可期，祝大家2019年继往开来 迷之间隙 我们创建一个导航列表，并将其列表 item 设置为 inline-block，主要代码如下： <div class="nav"> <div class="nav-item"><a>我</a></div> ...
关于浮动依照relative父元素的基线是什么？
九日的博客
09-27 192
关于左右浮动依照relative父元素的基线是什么？是父元素的content，还是border? 我的right_span标签让它靠右，但必须要设置right：5px；效果如下： 要是设置right：0px;就会顶到border。 再者：为什么我的left_span设置为left：0px；，它却紧贴着content内容呢？ <!doctype html> <html> ...
深入理解css的行高与基线
BigChicken3的博客
12-11 387
1、基本概念 1.  基线、底线、顶线、中线 注意：基线（base line）并不是汉字文字的下端沿，而是英文字母“x”的下端沿。2. 内容区 内容区是指底线和顶线包裹的区域（行内元素display：inline可以通过background-color属性显示出来），实际中不一定看得到，但确实存在。内容区的大小依据font-size的值和字数进行变化。 3. 行距、行高 行高（line-height）：包括内容区与以内容区为基础对称拓展的空白区域，我们称之为行...
css中如何使图标的旋转
zshsats博客
10-21 1万+
css中如何使图标的旋转 例如： 使用的是阿里的icon &lt;i class="iconfont icon-xiangshangjiantou icon-select"&gt;&lt;/i&gt; //icon-xiangshangjiantou 向上的箭头 实现其旋转向下： 使用css3的transform属性 旋转180度 如下，是无效的： .icon-select{ trans...
CSS 文字样式,换行,省略
zshsats博客
09-01 1万+
常用的css : 字体: font-family: font-style:normal(正常)|italic(斜体)|oblique(倾斜) font-weight:normal(正常)|bold(粗体)|bolder(特粗体)|lighter(细体) 文本: word-spacing:normal | length 词与词之间的距离值,可以是负数 letter-spacing:no...
Html和Css中的空格
zshsats博客
09-04 3315
Html和Css中的空格 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css空格&lt;/title&gt; &lt;style&gt; .test1,.te
iview Select组件,文字没有居左的问题和Html空格问题
zshsats博客
07-06 3087
iview Select组件,文字没有居左的问题和Html,CSS空格问题 问题:文字没有在左边 原因:{{ item.label }}前有空格引起的 &amp;lt;Select v-model=&quot;seachdata.levelId&quot; filterable placeholder=&quot;选择级别&quot;&amp;gt; &amp;lt;Option v-for=&quot;item
顶线、中线、基线、底线
最新发布
10-18
- 顶线（top line）：指一行文字中最高的字符所在的水平线。 - 中线（midline）：指一行文字中大多数字符所在的水平线。 - 基线（baseline）：指一行文字底部对齐的水平线，大多数字符的底部都在这条线上。 - 底线...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值