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. ps去掉图片上的文字

    使用仿制图章工具去除文字这是比较常用的方法,具体的操作是,选取仿制图章工具,按住Alt键,在无文字区域点击相似的色彩名图案采样,然后在文字区域拖动鼠标复制以覆盖文字.要注意的是,采样点即为复制的起始点 ...

  2. python中的向上取整向下取整以及四舍五入的方法

    import math #向上取整print "math.ceil---"print "math.ceil(2.3) => ", math.ceil(2. ...

  3. Java基础语法入门01

    Java基础语法入门01 学习java你要先进行去了解JDK,JRE,JVM JDK Java开发工具包 JRE Java语言开发的运行环境 JVM Java虚拟机,用于Java语言的跨平台所用. 当 ...

  4. 解决fastDFS客户端连接超时问题

    1.修改storage.conf配置tracker_server的ip为外网ip 2.开放23000端口

  5. Objects First with Java 读书笔记 (1)

    umm...这学期被发了助教Java的任务,为了避免误人子弟从零开始现学.课是英语教学,就不逐字翻译了,方便记. 参考书目:Objects First with Java - A Practical ...

  6. java中使用JDBC的preparedStatement批处理数据的添加

    在项目中我们偶尔可能会遇到批量向数据库中导入数据,如果批处理的情况较多的情况下可以使用spring batch,如果只是一个导入功能的话可以考虑使用jdbc的preparedStatement处理. ...

  7. 【LeetCode每天一题】Simplify Path(简化路径)

    Given an absolute path for a file (Unix-style), simplify it. Or in other words, convert it to the ca ...

  8. vue中遇到的问题：Error: Cannot find module 'chalk'

    安装 npm install chalk 如果还缺其他很多模块,那就 npm install 暴力解决问题

  9. Matlab文件和数据的导入与导出

    ref: https://blog.csdn.net/zengzeyu/article/details/72530596 Matlab文件和数据的导入与导出 2017年05月19日 15:18:35  ...

  10. vue2.x入坑总结—回顾对比angularJS/React的一统

    从感性的角度讲,我是不屑于用VUE,觉得react套件用起来更顺手,但是vue现在越来火,所以也不得入vue(杂烩汤)的坑.vue/anguarJS/React,三者对关系现在就是: https:// ...