line-height

定义：

　　即行高，两行文字基线之间的距离

三问：

　　什么是基线？

　　　　形象可理解为字母x的下边缘

　　为什么是基线？

　　　　在css中基线乃各种线的基础

　　需要两行吗？

实例：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

  .head{line-height:300px;background:gray;text-align: center;}

  /* 此时默认的font-size为浏览器的默认值，因为这个数值偏小，似乎是居中，

  当拉大这个数值时，就会显示出问题，只有font-size为0时，才是真正的居中 */

  .img{height: 200px;vertical-align: middle}

</style>

</head>

<body>

  <div class="head">

    <img src="123.jpg" class="img">

  </div>

</body>

</html>

所有内联元素的样式表现都与行内框盒子模型有关！

行内盒子模型：

　　1.内容区域：内容区域的大小与font-size大小有关（表现形式为选中文字区域）

　　2.内联盒子：指不会让内容成块显示，而是排成一行。如果外部含inline水平的标签（span,a,em等），属于"内联盒子"

如果是光秃秃的文字，外面没有包裹标签，属于"匿名内联盒子"

3.行框盒子：每一行就是一个"行框盒子"，每个"行框盒子"又由一个一个"内联盒子"组成

4.包含盒子：此盒子由一行一行的"行框盒子"组成

内容区域高度+行间距=行高

1.内容区域高度只与字号以及字体有关，与line-height没有任何关系

2.在simsun字体下，内容区域高度等于文字大小值

line-height的定义的更多相关文章

  1. 深入了解css的行高Line Height属性

    什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. ...

  2. How to Take Control of Your Line Height in Outlook.com

    Reference to: http://www.emailonacid.com/blog/details/C13/line_height_and_outlook.com

  3. line-height系列——定义和工作原理总结

    一.line-height的定义和工作原理总结 line-height的属性值: normal    默认  设置合理的行间距. number  设置数字,此数字会与当前的字体尺寸相乘来设置行间距li ...

  4. Android-自定义View前传-View的三大流程-Layout

    Android-自定义View前传-View的三大流程-Layout 参考 <Android开发艺术探索> https://github.com/hongyangAndroid/FlowL ...

  5. CSS基础学习（一） 之 line-height 与 height 属性区别

    官方定义: height:定义了了元素的高度.默认情况下,该属性订了 content area(内容区域) 的高度.如果box-sizing属性设置为 border-box,那么height就表示bo ...

  6. android 自己定义ViewGroup实现可记载并呈现选择的ListView

    转载请注明出处:王亟亟的大牛之路 之前也做过一些用TextView之类的记录ListView选项的东西.可是总认为好难看.发现个不错的实现就贴给大家. 项目文件夹 执行效果: 自己定义视图: @Tar ...

  7. height与line-height

    1.网页的所有元素可以分为块元素和行元素.一行文字所在的一个逻辑区域是行元素,其他的元素就都是块元素line-height只针对行元素,height针对其他所有元素 2. width,height对于 ...

  8. 如何让 height:100%; 起作用

    当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果.你知道为什么height:100%不起作用吗? 按常理,当我们用 ...

  9. 关于后缀数组的倍增算法和height数组

    自己看着大牛的论文学了一下后缀数组,看了好久好久,想了好久好久才懂了一点点皮毛TAT 然后就去刷传说中的后缀数组神题,poj3693是进化版的,需要那个相同情况下字典序最小,搞这个搞了超久的说. 先简 ...

  10. [转载]css菜鸟之HTML 中块级元素设置 height:100% 的实现

    HTML 中块级元素设置 height:100% 的实现 当你设置一个页面元素的高度(height)为100%时,期望这样元素能撑满整个浏览器窗口的高度,但大多数情况下,这样的做法没有任何效果. 为什 ...

随机推荐

  1. Android字符串,颜色,尺寸资源的使用

    字符串.颜色.尺寸资源文件这三种文件位于res文件夹的values文件夹中,名称分别为strings.xml , colors.xml , dimens.xml下面是例子,首先来看字符串资源文件str ...

  2. 监听器 Listener

    监听器:监听某个对象状态的变化 被监听的对象:request.session.servletContext 监听对象的创建和销毁/对象属性的变化 ServletContext HttpSession ...

  3. VUE-011-通过 v-if 和 v-for 实现特定值的列表循环匹配，并显示满足匹配条件的值

    前端页面开发过程中,经常遇到服务端返回的数据中,存在一些需要转义的表单项.比如,员工信息中的学历,假设研究生学历的代码是101(或10001),则数据库中对应字段存放的是 101(或10001),而非 ...

  4. python练习题-day26

    #bim(property) class People: def __init__(self,name,weight,height): self.name=name self.weight=weigh ...

  5. Python 进阶 异步async/await

    一,前言 本文将会讲述Python 3.5之后出现的async/await的使用方法,我从上看到一篇不错的博客,自己对其进行了梳理.该文章原地址https://www.cnblogs.com/dhcn ...

  6. c#子类序列化与父类序列化（Serializable）的区别

    今天码代码,遇到了一个很奇怪的问题.就是子类继承了Serializable,父类没有,最后面,子类的数据转为byte[],并存储到数据库,再从数据库出来转为子类对象,发现,父类的变量,值为空! 最后调 ...

  7. 常用SQL语法

    1.替換A表中B字段中第二个字符 ,), 2.根据 Score 字段 排序 并分页 * from (select row_number() over(order by Score DESC) as r ...

  8. PeopleSoft 单点登录

    第一次会以guest 用户进来,code 为空 第二次也以guest 进来code 从ssoAP获取到code,根据code 获取token,根据token 获取用户id.

  9. vue组件弹窗

    定义弹窗组件 先写一个普通的vue组件,其显示的内容就是弹窗的内容. 文件的位置 /src/views/toast/toast.vue <template> <div class=& ...

  10. 记一个神奇的Bug

    多年以后,当Abraham凝视着一行行新时代的代码在屏幕上川流不息的时候,他会想起2019年4月17日那个不平凡夜晚,以及在那个夜晚他发现的那个不可思议的Bug. 虽然像无数个普普通通的夜晚一样,我在 ...