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. java script基本数据类型与数组

    基本数据类型 1.undefined  (var a;) 2.null   (var a=null); 3.String  (var a=" " or ' '); 4.boolea ...

  2. Oracle归档开启和更改

    运用 Xshell  客户端工具链接所在的  oracle  服务器 1.先进入数据库里面去 [root@DBSTANDBY ~]# su - oracle [oracle@DBSTANDBY ~]$ ...

  3. Elasticsearch学习笔记（十）批量查询mget、批量增删改bulk

    一.批量查询  mget             GET /_mget {   "docs":[       {         "_index":" ...

  4. Zookeeper节点增删改查与集群搭建（笔记）

    1.上传文件目录说明 上传的文件一般放在 /home/下 安装文件一般在 /usr/local/下 2. 安装zookeeper 2.1将zookeeper-3.4.11.tar.gz拷贝到/home ...

  5. log4j2配置ThresholdFilter，让info文件记录error日志

    日志级别: 是按严重(重要)程度来分的(如下6种): ALL < TRACE < DEBUG < INFO < WARN < ERROR < FATAL < ...

  6. LigerUI之Grid使用详解(一)——显示数据 --分页

    http://www.cnblogs.com/jerehedu/p/4218560.html 首先给大家介绍最常用的数据展示组件Grid,使用步骤如下: 1.页面中正确引入样式文件及相应组件 < ...

  7. linux----------yum一些安装命令汇总

    1.yum install -y psmisc        安装killall命令 2.yum install -y lrzsz        安装sz(下载)和rz(上传)命令 3.yum ins ...

  8. CentOS 7.5 安装 Python3.7

    1.安装开发者工具 yum -y groupinstall "Development Tools" 2.安装Python编译依赖包 yum -y install openssl-d ...

  9. OpenGL——外部读档+异常报错

    从外部读取shader文件: 先添加Shader类: 再创建vertexSource.txt和fragmentSource.txt两个文件: 如图填入shader: 在shader.h宣告: 在sha ...

  10. 记一次ORACLE无法启动登陆事故

    打开XSHELL 登陆ORACLE用户 1.sqlplus scott/scott 提示登陆失败 2.sqplus / as sysdba 启动数据库提示 3.查找日志 操作日志:$ORACLE_HO ...