CSS篇－line-height计算方法（父子元素）

liukai90 发布于2019-08-30 15:52 / 1197人阅读

此处仅列举几种个人认为易模糊不清的情形。
html结构如下：


     
        测试行高

父元素为数字，子元素未设

.parent{
     font-size: 12px;
     ine-height: 1;
 }
.child{
    font-size: 16px;
 }

父元素parent为
子元素child为
表明子元素继承了父元素显示设置的数字值，与父元素自身font-size有关

父元素百分比，子元素未设

.parent{
    font-size: 12px;
    line-height: 100%;
}
.child{
    font-size: 16px;
}

父元素parent为
子元素child为
表明子元素继承了父元素根据百分比计算后的行高，与父元素自身font-size无关

相关

对于1、2情形，给子元素child增加line-height: inherit，衍生情形3、4，表现不变

GPU云服务器云服务器 css元素 java插入元素方法云计算系列服务器篇 line-height

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/116453.html

整理：子容器垂直居中于父容器的方案

摘要：子容器溢出时，父容器出现滚动条。父容器或很显然，子容器溢出时，被父容器截断的情形无法和父容器自适应于子容器共存。现在这个布局可以自动生成，详见林小志的小工具图片垂直居中。溢出子容器溢出时会变成顶对齐，原因同上。本文在evernote里有备份。如果evernote的阅读区域嫌窄了，那么可以把这个链接拖入书签并点击javascript:jQuery(#container).width(9...

youkede 2019-08-28 17:51 评论0 收藏0
CSS那些事

摘要：今天跟大家分享一下中一些比较重要和比较容易被忽略的东西，开始吧。当为时，块级元素的宽度会填满整个包含块。也就是说上下外边距的值也是以父元素的宽度为标准的。今天跟大家分享一下CSS中一些比较重要和比较容易被忽略的东西，开始吧。样式优先级当你在不同地方不同的选择器中对同一个元素属性添加了不同的样式的时候，该如何判断最后哪个样式会作用到元素上呢？判断的依据就是样式的优先级。样式优先...

LinkedME2016 2019-08-28 17:56 评论0 收藏0
前端学习笔记（CSS、JS基础篇）

摘要：搜索引擎中有一个爬虫模块，在页面中使用诸如等强调式的标签，有利于，说白了就是有利于被搜索到。定位相对定位不影响元素本身特性不使元素脱离文档流。定时器如果是由事件控制的，要先关再开，避免多次触发而混乱。 CSS篇注意：css注释使用/ /，而不是或者//，否则很容易导致不明错误！！！ div padding：内边距。盒子内容与盒子边框的距离设置，相当于给盒子加了厚度，使用此属性后会改...

caikeal 2019-08-19 17:57 评论0 收藏0
前端学习笔记（CSS、JS基础篇）

摘要：搜索引擎中有一个爬虫模块，在页面中使用诸如等强调式的标签，有利于，说白了就是有利于被搜索到。定位相对定位不影响元素本身特性不使元素脱离文档流。定时器如果是由事件控制的，要先关再开，避免多次触发而混乱。 CSS篇注意：css注释使用/ /，而不是或者//，否则很容易导致不明错误！！！ div padding：内边距。盒子内容与盒子边框的距离设置，相当于给盒子加了厚度，使用此属性后会改...

xietao3 2019-08-30 12:54 评论0 收藏0
深入理解BFC

摘要：最常见的有简称和简称。计算的高度时，浮动元素也参与计算。遇到这种情形，我们如何处理处理方法其实有很多，在元素中添加或者使其父元素形成一个也可以在元素中添加或是这些都可以有效解决父子元素重叠问题。解决这个问题，只需要把把父元素变成一个就行了。一、什么是BFC Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，...

legendmohe 2019-08-29 17:01 评论0 收藏0