line-height和height
1. 行高(line-height)、行距、font-size分别是什么。
行高(line-height)是指文本行基线间的垂直距离。 基线(base line)并不是汉字文字的下端沿,而是英文字母“x”的下端沿。下图中两条红线之间的距离就是行高,上行的底线和下一行顶线之间的距离就是行距,而同一行顶线和底线之间的距离是font-size。
line-height=行距+font-size
2. line-height和height的关系
在没有设置div的height属性时,div的高度根据line-height的大小而变化,且文字垂直居中。
CSS:
.test2{font-size:1px; text-align:center;line-height:20px; border:1px solid black; background:red;}
html:
<div class="test2">测试</div>
(1)height = line-height时
(2)height>line-height时
(3)height<line-height时
3. lineheight 总结
四种盒子:inline box
、line box
、content area
、containing box
inline box (行内框) 每个行内元素会生成一个行内框,行内框是一个浏览器渲染模型中的一个概念,无法显示出来,行内框的高度等于
font-size
,设定line-height
时,行内框的高度不变,改变的是行距。line box (行框) 行框是指本行的一个虚拟的矩形框,由该行中行内框组成。行框也是浏览器渲染模式中的一个概念,无法显示出来。行框高度等于本行中所有行内框高度的最大值。当有多行内容时,每一行都有自己的行框。
content area (内容区) 内容区是围绕着文字的一种box,无法显示出来,其高度取决于
font-size
和padding
。个人觉得:内容区的高度 = font-size + padding-top + padding-bottom,有待查证,也期待小伙伴们给出答案~containing box containing box 是包裹着上述三种box的box,有点绕哈~看图
浏览器默认的line-height为1.2, line-height
的大小与font-size
息息相关,除了指定line-height
为多少px
,剩下的设置方式都是基于font-size算出来的。
设置方式 | line-height | 计算后的line-height | 子元素继承的line-height |
---|---|---|---|
inherit | 父元素的line-height值 | 不用计算 | 父元素的line-height值 |
length | 20px | 不用计算 | 20px |
% | 120% | 自身font-size (16px) * 120% = 19.2px | 继承父元素计算后的line-height值 19.2px,而不是120% |
normal | 1.2 | 自身font-size (16px) * 1.2 = 19.2px | 继承1.2,line-height = 自身font-size(32px) * 1.2 = 38.4px |
纯数字 | 1.5 | 自身font-size (16px) * 1.2 = 19.2px | 继承1.5,line-height = 自身font-size(32px) * 1.5 = 48px |
纯数字方式与 normal 唯一的不同,就是数值的大小,纯数字可以自己随意设定,而 normal 的值是浏览器决定的。
line-height和height的更多相关文章
- 拉动滚动条追加内容,无限延伸document高度 $(window).scroll(function(){if($(window).scrollTop() + $(window).height() == $(document).height()) { $("body").append(html) } })
$(document).ready(function() { // endless scrolling $(window).scroll(function() { if($(window).scrol ...
- js不需要知道图片宽高的懒加载方法(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)
js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...
- $(window).scrollTop() == $(document).height() - $(window).height()(底端)
jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...
- 锋利的jQuery-3--css("height")和.height()的区别
$("p").css("height") : 获取的高度值与样式的设置有关,可能会得到“auto”, 也可能是字符串“10px”之类的.设置值时如果是数值形式默 ...
- obj.offsetHeight与obj.style.height $(obj).height()与$(obj).css('height')
相同:都可以获取obj的高度区别:(1)obj.offsetHeight可以获取外部.内嵌和内联中定义的高,而obj.style.height只能获取内联中定义的高:(2)obj.offsetHeig ...
- jQuery,javascript获得网页的高度和宽度$(document).height / $(window).height
一.javascript 网页可见区域宽: document.body.clientWidth 网页可见区域高: document.body.clientHeight 网页可见区域宽: documen ...
- [WPF系列]- Style - Specify width/height as resource in WPF
<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:sys=" ...
- jQuery中animate的height的自适应
可以用 animate() 方法几乎可以操作大部分CSS 属性,但其属性的值不能为字符串,很多人都遇到过这个问题. 例如:获取一个元素自适应时的高,但el.animate({height:‘aut ...
- (document).height()、$(document).scrollTop()
(document).height().$(document).scrollTop(),有需要的朋友可以参考下. jQuery(window).height()代表了当前可见区域的大小,而jQuery ...
- (document).height()与$(window).height()
jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...
随机推荐
- Python爬虫实例:爬取豆瓣Top250
入门第一个爬虫一般都是爬这个,实在是太简单.用了 requests 和 bs4 库. 1.检查网页元素,提取所需要的信息并保存.这个用 bs4 就可以,前面的文章中已经有详细的用法阐述. 2.找到下一 ...
- IDEA使用总结
IDEA常用设置 在我们第一眼看见IDEA是这个样子的: 显示工具条 我们要显示工具条!,两个按钮哦 黑色主体 我们要黑色的主题,白色的太low了! 调整字体大小 现在的字体太小了,我要鼠标滑轮+cr ...
- 使用 curl 进行 ssl 认证
目录 SSL 认证 认证实现 问题解决 curl不支持 https SSL certificate problem, verify that the CA cert is OK curl: (60) ...
- [解决方案]SystemError: Parent module '' not loaded, cannot perform relative import的解决方案
缺陷:__mian__不能使用相对导入 PEP 328 Relative Imports and __name__ 中说明: Relative imports use a module's __nam ...
- Docker系列10—容器编排工具Docker Compose详解
本文收录在容器技术学习系列文章总目录 1.Docker Compose 概述 Compose是一个用于定义和运行多容器Docker应用程序的工具.使用Compose,您可以使用Compose文件来配置 ...
- spring源码分析之spring-jdbc模块详解
0 概述 Spring将替我们完成所有使用JDBC API进行开发的单调乏味的.底层细节处理工作.下表描述了哪些是spring帮助我们做好的,哪些是我们要做的. Action Spring You ...
- 原生JS forEach()和map()遍历的区别以及兼容写法
一.原生JS forEach()和map()遍历 共同点: 1.都是循环遍历数组中的每一项. 2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前 ...
- webpack4.0各个击破(5)—— Module篇
webpack4.0各个击破(5)-- Module篇 webpack作为前端最火的构建工具,是前端自动化工具链最重要的部分,使用门槛较高.本系列是笔者自己的学习记录,比较基础,希望通过问题 + 解决 ...
- 第1章 背景 - Identity Server 4 中文文档(v1.0.0)
大多数现代应用程序或多或少看起来像这样: 最常见的互动是: 浏览器与Web应用程序通信 Web应用程序与Web API进行通信(Web应用程序自身 或 代表用户 与 Web API 通信) 基于浏览器 ...
- [MySQL] explain中的using where和using index
1. 查看表中的所有索引 show index from modify_passwd_log; 有两个 一个是id的主键索引 , 一个是email_id的普通索引 2. using index表示 ...