CSS继承特性之行高继承
我们知道在CSS中子元素会继承父元素的一些样式，如颜色，字号等
如下示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{
font-size: 40px;
color:skyblue
}
</style>
</head>
<body>
<div>我会继承父元素的样式</div>
</body>
</html>
对应这种普通的继承我们不难理解，但子元素在继承行高上会有特殊情况
首先一般情况父元素直接规定行高为多少像素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{
font-size: 40px;
color:skyblue;
line-height: 90px;
}
</style>
</head>
<body>
<div>我会继承父元素的样式</div>
<div>我会继承父元素的样式</div>
<div>我会继承父元素的样式</div>
<div>我会继承父元素的样式</div>
</body>
</html>这个时候子元素会正常继承父元素的行高
第二种情况父元素不指定具体行高而是以倍数的形式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style>
body{
font-size: 40px;
color:skyblue;
line-height: 10
//或者 font-size:14px/10指定字体大小和行高
}
div{
font-size: 9px;
}
</style>
</head>
<body>
<div>我会继承父元素的样式</div>
<div>我会继承父元素的样式</div>
<div>我会继承父元素的样式</div>
<div>我会继承父元素的样式</div>
</body>
</html>这个时候子元素的行高就是 当前元素的字体大小的多少倍，line-height=10，子元素的行号就是字体大小的10倍 如下图字体大小为9px 行高为90px
在知乎在看到一句话：
只依赖框架和套路做业务很快就会遇到瓶颈无法提升，只有扎实的基础和持续学习才能不断提升自己水平的天花板。
这句话挺适合现在的我，现在的我只知道高级，追求新技术，却忽略了最基础的东西，有时候突然问自己
CSS3动画咋写？——忘了….
Flex布局？——忘了….
如何快速实现拖拽div?—-想想…
轮播图咋写？—-忘了…就算会写可能要好长时间
js闭包及适用场景？—-忘了…
说清楚js原型链？—-迷迷糊糊…
可是这些东西我之前都学过，至少当时是会的，现在确说不出个所以然.... 我深知，如果这种情况出去找工作可能面试官随便一个问题都会把我问倒(ノへ￣、) 所以接下来的时间我会每天都花时间补前面的基础，至少现在还不晚，奥力给吧
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020-08-03 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
