javascript - 关于css的继承属性问题-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

javascript - 关于css的继承属性问题

ringa_lee 2017-04-11 10:32:23

[JavaScript讨论组]

540

问题：在css里面，怎么避免写重复的 line-height~~

http://www.zhangxinxu.com/wor... 网上一篇文章关于行高的介绍

问题：在css里面，怎么避免写重复的 line-height（有继承属性，单行文字ok，多行设置line-height就继承了）~~

ringa_lee

全部回复(3)

阿神2017-04-11 10:34:23 3楼

首先，line-height并不是有时候是继承的，而是所有时候都是继承的，这个属性就是继承性的；
其次，line-height会因为设置不同的值类型，会有不同的表现。

line-height的语法：

line-height: normal | <number> | <length> | <percentage> | inherit

normal :默认值，根据浏览器不同表现值在1.0~1.2之间；
number :数字相对值，例如：1.2，2，1.75，计算后的实际行高值是：数值*该元素的font-size
length：带单位的绝对值，例如：2em, 1rem, 20px。根据单位计算出来的绝对值。
percentage: 百分比值，计算行高值是 百分比*该元素计算后的font-size值

如果不对一个元素设置line-height值，这个元素并不会就没有line-height值，而是会从最近的有line-height属性值的父元素继承，并且继承的是计算后的line-height值。

比如，p>p结构
(1)p：line-height:2,font-size:15px, 
   p:font-size:30px;
当p继承了p的line-height:2;当line-height值为数字时，实际的p的行高值会乘以font-size, 此时p高是30px, p的高是60px

(2)p：line-height:200%,font-size:15px, 
   p:font-size:30px;
百分比是一个绝对值，p实际计算行高是200%*15=30px，p继承p的行高也是30px

(3)p：line-height:30px/3em,font-size:15px, 
   p:font-size:30px;
行高是这种带单位的绝对值时，p继承的也是一个绝对值，p行高是30px或者3*15px=45px;
p也是相应的30px或者45px;

(4）如果你给p设置了一个行高，那p的行高大小和p就没太大关系了，只跟p的行高值类型相关。
p：line-height:200%,font-size:15px, 
p:font-size:30px;

p line-height:20px ==> 20px
p line-height:1.5em ==> 1.5*30px =45px
p line-height:1.5 ==> 1.5*30px = 45px;
p line-heigth:200% ==> 200%*30px =60px;
p line-height:1.2rem ==> 1.5*16px(html) = 19.2px;
因为rem的值是相对于根元素的font-size，默认的<html>的font-size是16px；

至于什么时候用什么，则就根据需求了。

赞 +0

添加回复

怪我咯2017-04-11 10:34:23 2楼

添加一个公用的类名规范行高比如

.line_height{
line-height: .8rem;
}

想用在哪个元素上加上类名就可以了

赞 +0

添加回复

迷茫2017-04-11 10:34:23 1楼

首先你要知道排版。网页对文字的排版，line-height就是行高，主要对文字上下的间隔进行调整。
而继承，大部分和文字相关的属性都集成，比方说： color,font-size,font-family等等。
CSS中还有一个属性值是inherit，如果将属性设置成inherit就会从父元素中继承该父元素的属性。

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>