`
魏祖清
  • 浏览: 176577 次
  • 性别: Icon_minigender_1
  • 来自: 福建
社区版块
存档分类
最新评论

关于line-height设置

    博客分类:
  • css
阅读更多
一个小小属性就有那么多的学问,我们来一起了解一下关于line-height设置

行高有五种设置方法inherit/normal/百分比/固定大小/纯数字

如果使用百分比的话,只会根据父元素font-size来计算的行高,且它的子元素仅仅继承父元素的行高,而不能根据自己的font-size来计算的行高

如果使用固定大小,那么父元素和子元素都使用这个大小


如果使用normal(约1.2倍)的话,父元素和子元素都会根据自己的字体的大小来计算行高(1.2 * font-size)

如果使用纯数字,父元素和子元素都会根据自己的字体的大小来计算行高(font-size * line-height)
分享到:
评论

相关推荐

    line-height全面解析

    line-height全面解析line-height全面解析li

    tinyMCE富文本编辑器line-height行高插件

    tinyMCE富文本编辑器line-height行高插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示

    tinyMCE 富文本编辑器 line-height 行高插件

    tinyMCE 富文本编辑器 line-height 行高插件。 tinyMCE富文本编辑器line-height行高插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示 tinyMCE line-height 行高插件

    关于css中line-height(行高)设置无效的问题的解决方法

    关于css中line-height(行高)设置无效的问题 我们先写下这一串代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style ...

    深入理解CSS行高line-height与文本垂直居中的原理

    前言在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中了,比如下面的例子: 复制代码代码如下:<!DOCTYPE ...

    ckeditor5-line-height-plugin:CKEditor5的创建插件,用于更改所选块的行高

    ckeditor5-line-height-plugin CKEditor5的创建插件,用于更改所选块的行高。 开始使用 首先,从npm安装构建: npm install --save ckeditor5-line-height-plugin 或使用纱线: yarn add ckeditor5-line-height-...

    css中height和line-height区别

    line-height:行高 设置文字间上下距离 height:高度 就是定义一个层 或某样东西的高度啦 也就是说line-height是特指单行高度,height可以为所有元素的高度 文字放大后边缘会重叠? line-height直白理解就是文字...

    CSS line-height行高上下居中垂直居中样式属性

    常常使用line-height设置内容(图片、文字)行高上下居中样式效果。 一、line-height行高语法 复制代码代码如下:line-height:22px.jb51div{line-height:22px}line-height:200%.jb51div{line-height:200%} line-...

    css属性行高line-height的用法详解

    偶然看到的一篇介绍line-height的文章,图文并茂很详细也很透彻,转过来学习。 什么是行间距? 古时候我们使用印刷机来出来文字。印刷出来的每个字,都位于独立的一个块中。 行间距,即传说中控制两行文字垂直距离...

    tinyMCE 富文本编辑器 line-height 行间距调整.zip

    tinyMCE 富文本编辑器 line-height 行高插件。 tinyMCE富文本编辑器line-height行高插件,下载后放在tinyMCE插件的plugins文件夹中,之后初始化中引入plugins,即可在toolbar中展示 tinyMCE line-height 行高插件

    解决IE6下,给图片加上line-height属性不起作用的解决方法

    在css设置中,我们一般用行高line-height来设定某一行的高度,这在ie7与firefox等浏览器都适用。但当行中有其他元素时(如图片,SPAN,li..)在IE6.0下line-height会不起效果,后来查了下资料,果然如此,资料如下: ...

    移动端android上line-height不居中的问题的解决

    现在越来越多的移动界面使用rem适配,遇到的坑也不尽其数,今天就移动端android上line-height不居中的问题提出自己的解决办法。 据分析得知原因: 1.字体大小不要使用奇数字号,带小数点的更不要提了。也就是说...

    overflow:hidden line-height clearfix:after使用方法介绍

    2.line-height指的是在DIV中的元素上下居中 比如用在里,则可以将line-height的高度和height的值相等,(height:30px; line-height:30px;)这样可以让文字在内相对于30px垂直居中。比如用在内,像这样成段落的,如果...

    使用不带单位的line-height

    line-height是可以继承的,所以子元素可以不用重复定义line-height。我们一般也会在后面带上单位(如:line-height:22px; 或是line-height:1.4em;),但line-height给人带来麻烦的地方也是这个继承和后面加的单位

    美工之路 网页设计视频教程CSS篇-16.文本:行高line-height.rar

    美工之路系列视频是为那些想从事网页前台设计的设计师们和网页设计爱好者量身定制的,本教程包含4个部分:HTML篇,CSS篇,Javascript篇和XML篇.不仅适用于网页设计的初学者,对中级以上水平的人员也有一定参考价值,使...

    CSS教程:行高line-height属性(1)

    相关文章:CSS教程:行高line-height属性(2) 行高的概念看上去很简单——文字行的高度,其实,行高所涉及到的基础知识,对于今后理解其它属性也很重要。 大片密密麻麻的文字往往会让人觉得乏味,因此适当地调整...

    line-height使文本居中的3像素bug问题

    虽然题目这么写,可是这真是bug吗?我觉得不算。...观察 FW先写个height、line-height都为30px,背景为红色的元素,设置文字为12px。然后量下,果然有3px的bug。同时增加或者减少height、line-height 1px

    text-align,vertical-align,line-height居中布局

    text-align,vertical-align,line-height居中布局笔记

Global site tag (gtag.js) - Google Analytics