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. C# Asp.net中简单操作MongoDB数据库（二）

    C# Asp.net中简单操作MongoDB数据库(一)    , mongodb数据库连接可以回顾上面的篇幅. 1.model类: public class BaseEntity { /// < ...

  2. 3n+1猜想——模拟

    package dxb.com; import java.util.Scanner; public class caixiang { public static void main(String[] ...

  3. P3803 【模板】多项式乘法（FFT）

    传送门: 参考博客 1:大佬  attack 参考博客 2:大佬  胡小兔 在这里再膜拜一下这两位大佬 Orz%%% #include<iostream> #include<cstd ...

  4. matlab——之class类（详细总结）

    https://blog.csdn.net/qinze5857/article/details/80545885 开篇:搜了一下网上介绍matlab的class类,信息不全,且总结不全面,于是单独he ...

  5. G面经Prepare: Print Zigzag Matrix

    For instance, give row = 4, col = 5, print matrix in zigzag order like: [1, 8, 9, 16, 17] [2, 7, 10, ...

  6. python小程序--one

    #!/usr/bin/env python # _*_ coding:utf8 _*_ import sys user_lock_file="user_lock.txt" # 用户 ...

  7. spark-shell的Scala的一些方法详解

    Tom,DataBase,80 Tom,Algorithm,50 Tom,DataStructure,60 Jim,DataBase,90 Jim,Algorithm,60 Jim,DataStruc ...

  8. 移动App专项测试

    移动App测试实战—专项测试 转自:http://www.51testing.com/html/58/n-3713758.html 我们在进行了手工的功能测试之后,也开发了一些自动化测试用例,并且做了 ...

  9. Lua 哑变量

    [1]哑变量 哑变量,又称为虚拟变量.名义变量. 还得理解汉语的博大精深,‘虚拟’.‘名义’.‘哑’等等,都是没有实际意义.所以,哑变量即没有现实意义的变量. 哑变量的应用示例如下: local fi ...

  10. spring-boot 2.1.2.RELEASE bug

    不打印映射地址日志: 改用 2.0.5 RELEASE 即可