height属性可以继承吗(CSS中height:100%和height:inherit的异同 00 张鑫旭)

:暂无数据 2026-09-04 07:30:07 0

height属性可以继承吗(CSS中height:100%和height:inherit的异同 00 张鑫旭)

大家好,关于height属性可以继承吗很多朋友都还不太明白,不过没关系,因为今天小编就来为大家分享关于CSS中height:100%和height:inherit的异同 00 张鑫旭的知识点,相信应该可以解决大家的一些困惑和问题,如果碰巧可以解决您的问题,还望关注下本站哦,希望对各位有所帮助!

本文目录

CSS中height:100%和height:inherit的异同 00 张鑫旭

height:100%;是占父级元素高度的100%;
height:inherit;是继承父级元素的高度设置;
同:都和父级元素有关系;
异:设置100%时自己和父级元素的高度是相同的;设置inherit值时,自己和父级元素值有可能是不同的!比如父级是20%,父级相对于祖父级是20%.那自己也是20%,自己是相对于父级的20%;

line-height 3种设置方式的区别

前言 :平常写CSS习惯性的写 line-height: 1.5em ,也见过类似 line-height: 1.5 , line-height: 150% 这种写法,但是从来没有想过这三者有什么区别,最近突然看到有人提到这个问题,很感兴趣,于是查资料自己尝试了一下。

首先有一点要明确的是,line-height是具有继承性的,如果直接在某个元素上使用line-height,那么这三种写法是没有区别的,比如给所有的p标签添加行高属性:

最后的效果是一样的。

这三种方式的区别在于,给父元素设置行高的时候子元素的继承方式。

假如我们有一个父div类名为parent1,另一个父div类名为parent2,均包含了一个类名为child的子div,HTML结构如下:

CSS如下:

此时的页面如下截图:

可以看到,当设置 line-height: 1.5em 时,很明显子div的文字已经超出自己的行高范围了,设置 line-height: 1.5 时子div的文字没有超出自己的行高。

这是由于CSS继承时的计算方式区别造成的,如示例,当我们给类名为parent1的父div设置 line-height:1.5em 时,该div的 font-size 为14,此时经过计算父div的 line-height 为14px*1.5=21px,然后子div的 line-height 就会继承21px这个值,而子div的 font-size 为26px,自然会超出自己的行高范围。

而当我们给类名为parent2的父div设置 line-height:1.5 时,子div会直接继承 line-height:1.5 ,然后计算26px*1.5=39px,不会超出自己的行高范围。

经过测试 line-height: 150% 和 line-height: 1.5em 相同,都是先计算然后把固定的行高继承给子元素,所以我们可以总结一下, 继承line-height的时候,带单位的先计算再继承,不带单位的直接继承

以上就是我对line-height这个属性一点浅显的认识。

参考资料:***隐藏网址***

下列选项中,不具有继承性的属性的有()

下列选项中,不具有继承性的属性的有()

A.padding
B.background
C.height
D.border-top
正确答案:ABCD

inherit属性无效,求解

根本就不需要设置main的height的啊,如果main没有随内部的内容自动调整高度的话,看下main中的元素,是否有用float的属性。
一般影响这个的也就是使用浮动样式的时候会是外部不会随着内部的内容增加而改变大小。
你可以在main的样式中添加overflow:hidden来清除浮动就好,试下

关于height属性可以继承吗和CSS中height:100%和height:inherit的异同 00 张鑫旭的介绍到此就结束了,不知道你从中找到你需要的信息了吗 ?如果你还想了解更多这方面的信息,记得收藏关注本站。

height属性可以继承吗(CSS中height:100%和height:inherit的异同 00 张鑫旭)

本文编辑:admin

更多文章:


send out用法及例句(send out是什么意思)

send out用法及例句(send out是什么意思)

各位老铁们好,相信很多人对send out用法及例句都不是特别的了解,因此呢,今天就来为大家分享下关于send out用法及例句以及send out是什么意思的问题知识,还望可以帮助大家,解决大家的一些困惑,下面一起来看看吧!

2026年9月7日 20:30

全球新冠肺炎疫情背景下航运发展(盐田港复苏日志:半年历劫从“低谷”到“爆仓” 疫情之后巨轮如何越洋航行)

全球新冠肺炎疫情背景下航运发展(盐田港复苏日志:半年历劫从“低谷”到“爆仓” 疫情之后巨轮如何越洋航行)

大家好,关于全球新冠肺炎疫情背景下航运发展很多朋友都还不太明白,不过没关系,因为今天小编就来为大家分享关于盐田港复苏日志:半年历劫从“低谷”到“爆仓” 疫情之后巨轮如何越洋航行的知识点,相信应该可以解决大家的一些困惑和问题,如果碰巧可以解决

2026年9月7日 17:10

matlab求解带字母参数方程组(我想matlab求一个关于x,y的方程组 ab c d f e h m n 都是参数)

matlab求解带字母参数方程组(我想matlab求一个关于x,y的方程组 ab c d f e h m n 都是参数)

大家好,关于matlab求解带字母参数方程组很多朋友都还不太明白,不过没关系,因为今天小编就来为大家分享关于我想matlab求一个关于x,y的方程组 ab c d f e h m n 都是参数的知识点,相信应该可以解决大家的一些困惑和问题,

2026年9月7日 16:30

oracle中的循环语句(下面哪个不是oracle程序设计中的循环语句 a for)

oracle中的循环语句(下面哪个不是oracle程序设计中的循环语句 a for)

本篇文章给大家谈谈oracle中的循环语句,以及下面哪个不是oracle程序设计中的循环语句 a for对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

2026年9月7日 15:30

多表查询怎么做(Excel技巧:如何多表同步筛选)

多表查询怎么做(Excel技巧:如何多表同步筛选)

各位老铁们好,相信很多人对多表查询怎么做都不是特别的了解,因此呢,今天就来为大家分享下关于多表查询怎么做以及Excel技巧:如何多表同步筛选的问题知识,还望可以帮助大家,解决大家的一些困惑,下面一起来看看吧!

2026年9月7日 15:10

服装店网站网页设计(服装网站建设目标设计要看甲方)

服装店网站网页设计(服装网站建设目标设计要看甲方)

“服装店网站网页设计”相关信息最新大全有哪些,这是大家都非常关心的,接下来就一起看看服装店网站网页设计(服装网站建设目标设计要看甲方)!

2026年9月7日 14:10

电脑里2个系统怎么删除一个(电脑开机显示有两个系统,如何删除一个)

电脑里2个系统怎么删除一个(电脑开机显示有两个系统,如何删除一个)

大家好,电脑里2个系统怎么删除一个相信很多的网友都不是很明白,包括电脑开机显示有两个系统,如何删除一个也是一样,不过没有关系,接下来就来为大家分享关于电脑里2个系统怎么删除一个和电脑开机显示有两个系统,如何删除一个的一些知识点,大家可以关注

2026年9月7日 12:20

苹果手机代码大全(恢复更新固件iOS未知错误代码解决大全)

苹果手机代码大全(恢复更新固件iOS未知错误代码解决大全)

大家好,今天小编来为大家解答以下的问题,关于苹果手机代码大全,恢复更新固件iOS未知错误代码解决大全这个很多人还不知道,现在让我们一起来看看吧!

2026年9月7日 10:20

scrollthrough意思(“scroll”是什么意思)

scrollthrough意思(“scroll”是什么意思)

今天给各位分享“scroll”是什么意思的知识,其中也会对“scroll”是什么意思进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!

2026年9月7日 08:00

怎么激活keygen(注册机如何激活cad2008一个简单激活cad2008的方法)

怎么激活keygen(注册机如何激活cad2008一个简单激活cad2008的方法)

本篇文章给大家谈谈怎么激活keygen,以及注册机如何激活cad2008一个简单激活cad2008的方法对应的知识点,文章可能有点长,但是希望大家可以阅读完,增长自己的知识,最重要的是希望对各位有所帮助,可以解决了您的问题,不要忘了收藏本站

2026年9月7日 06:30

最近更新

热门文章

dessert(dessert是什么意思)
2026-05-03 12:45:03 浏览:7
标签列表