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来清除浮动就好,试下

更多文章:
全球新冠肺炎疫情背景下航运发展(盐田港复苏日志:半年历劫从“低谷”到“爆仓” 疫情之后巨轮如何越洋航行)
2026年9月7日 17:10
matlab求解带字母参数方程组(我想matlab求一个关于x,y的方程组 ab c d f e h m n 都是参数)
2026年9月7日 16:30
oracle中的循环语句(下面哪个不是oracle程序设计中的循环语句 a for)
2026年9月7日 15:30
电脑里2个系统怎么删除一个(电脑开机显示有两个系统,如何删除一个)
2026年9月7日 12:20
scrollthrough意思(“scroll”是什么意思)
2026年9月7日 08:00
怎么激活keygen(注册机如何激活cad2008一个简单激活cad2008的方法)
2026年9月7日 06:30





