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. [ipsec][crypto] 什么是AEAD加密算法中的AAD 及aad length

    AAD 全称:Additianal Authenticated Data 翻译成中文就是附加的验证数据. 在理解AAD之前,需要理解什么是AEAD: AEAD,简单的来说就是一份数据在完成加密的时候同 ...

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

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

  3. bootstrap 自适应和响应式布局的区别

    自适应:  不管屏幕多大,都尽量不换行,而只是横向缩放. 响应式: 屏幕变小了之后,属于同一行的元素受到挤压后,行的右边元素自动换行显式: 屏幕大了后,本属于同一行的元素尽可能的排在同一行内: boo ...

  4. postman headers 请求参数和MD5加密签名

    postman 变量可以这样写:{{timestamp}} ,也可以用系统的,{{$timestamp}},这样就不用给自己赋值了,但在 pre-requestScript中是获取不到这个值的 所以我 ...

  5. mat-form-field must contain a MatFormFieldControl错误的解决方法

    下面的代码竟然出错了: <mat-form-field> <input matInput placeholder="输入名称"> </mat-form ...

  6. C#中方法、类等的默认访问修饰符~

    C# 方法默认访问级别 : private C# 类默认访问级别 : internal 1.命名空间下的元素的默认访问修饰符 public : 同一程序集的其他任何代码或引用该程序集的其他程序集都可以 ...

  7. Python多维数组切片

    1. array如果维度多了,就变成ndarray. 2. list切片类似C数组,多维度分别用”[]“索引,单维度切片用”:“,如: >>> a [[1, 2, 3], [4, 5 ...

  8. CentOS 7 安装samba服务

    STEP 1. 安装 #安装 [root@study ~]yum install smaba [root@study ~]systemctl start smb nmb STEP 2. 建立共享目录以 ...

  9. Unity3D 粒子系统 属性

  10. day19 python之re模块正则练习

    1.匹配标签 import re ret = re.search("<(?P<tag_name>\w+)>\w+</(?P=tag_name)>" ...