行高

行高是文字占有的实际高度，可以通过line-height来设置高度。
line-height:
行高可以直接指定一个大小（px em)
也可以直接设置成一个整数
如果是一个整数的话，行高将会是字体的指定的倍数
默认行高是字体大小的1.33倍。

eg：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><style>div{border:1px brown solid;}</style>
</head>
<body><div>哈哈哈，吃了吗？</div>
</body>
</html>

默认行高：

设置：

    div{border:1px brown solid;line-height: 3;}

行高的应用：

当行高和容器的高度一样的话，单行文字就会垂直居中。
行间距 = 行高 - 字体大小
eg：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><style>div{border:1px brown solid;line-height: 2;font-size: 50px;}</style>
</head>
<body><div>哈哈哈，吃了吗？Grab copies of Font Awesome, examples, templates, and other goodies to use in your projects and playtime.</div>
</body>
</html>

字体框

字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度。

有一个隐藏的字体框

行高会在字体框的上下平均分配

eg：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><style>div{border:1px brown solid;line-height: 3;font-size: 50px;}</style>
</head>
<body><div>哈哈哈，吃了吗？</div>
</body>
</html>

输出：

即使行高 < 字体框

    div{border:1px brown solid;line-height: 0.5;font-size: 50px;}

输出：

行高、字体框——CSS相关推荐

html css行高距离算法,CSS行高——line-height 行间距
初入前端的时候觉得CSS知道display.position.float就可以在布局上游刃有余了,随着以后工作问题层出不穷,才逐渐了解到CSS并不是几个style属性那么简单,最近看了一些关于行高的知 ...
html里面行高的原理,CSS行高（line-height）及文本垂直居中原理
在CS多现业讲进行效通近年有务这行定果过近年有S中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中 ...
html中高与行高的区别,CSS中line-height与height有什么区别
line-height--行高属性,设置文本模式上下距中伤隔. height--高度属性,设置装备摆设对象高度剖析图从上图我们就能够形象中的line-height与height判别: 1.违抗分歧 ...
css字行高怎么设,css文本行高怎么设置-电脑自学网
css文本行高的设置方法:首先新建文件,使用div标签创建一行文字:然后编写样式,设置div标签的class属性为mybkkd:最后通过div标签的class属性mybkkd设置文字上下的行高. 本教 ...
百度富文本编辑器设置默认参数行高字体字号字体颜色
var ue = UE.getEditor('editor1'); ue.ready(function(){ue.execCommand('fontfamily','微软雅黑'); //字体ue.ex ...
【CSS】字体、行高、文本对齐
一.字体字体相关的样式 color font-size font-size相关单位 em相对于当前元素的font-size rem相对于根元素的font-size font-face可以直接将服务器 ...
字体、图标字体、行高、文本样式（css）
字体.图标字体.行高.文本样式(css) 字体相关的样式 color 用来设置字体颜色 font-size (字体大小) 相关单位 em 相当于当前元素的一个font-size rem 相当于根元素的 ...
CSS——行高、字体、文本的样式
一.行高行高(line height)行高指的是文字占有的实际高度可以通过line-height来设置行高行高可以直接指定一个大小(ex pm)也可以设置一个整数如果是一个整数行高将会是字体的指定的 ...
html字体加粗字号为2,【css】文字基本样式（颜色、倾斜、加粗、字号、行高、字体）...
一.字体基本样式首先我们先放置一些文字,基本所有的标签都可以设置字体样式的,这里就使用标签和来做示范啦. O泡时间到! 给我O泡给我O泡,O泡果奶OOO! 图1 基本文字效果注意,文字属性都是 ...

行高、字体框——CSS

文章目录

行高

行高的应用：

字体框

行高会在字体框的上下平均分配

行高、字体框——CSS相关推荐

最新文章

热门文章