有关line-height的见解

line-height:简单的说就是行高,是两行文字之间基线的距离。基线是指在英语的书写的4线3格中,从上往下数的第三条线

1.line-height与行内框盒子模型

  所有内联元素的样式表现都与行内框盒子模型有关,例如图片的文字环绕效果。

  以下面这段代码为例:

<p>一段普通的文本<em>em</em></p>

  在这一段中,总共有4种盒子:一是内容区域(contant area),是环绕文字看不见的盒子,它的大小与font-size有关。二是内联盒子(inline boxs),也就是例子中排成一行的所有文字,如果外面有inline标签包含的叫内联盒子,没有标签包含的叫匿名内联盒子。三是行框(line boxs),每一行都是一个行框,而每个行框都是由一个个行内框(内联盒子)组成.四是包含盒子,包含盒子是由一个个行框组成,例子中的p标签的所有内容就是一个包含盒子.

  

根据上的显示可以得知,这段文本的高度是18px,那这个高度是怎么计算来的呢?

其实是由line-height决定的,而不是字体大小.现在我们把font-size设置为0;

可以看到,即使将font-size设置为0,但line-height仍然为18,得到的内容高度仍然是18。相反,此时我们将字体设置为18px,line-height设置为0

。显然,虽然能看到文字,但此时它的高度为0

所以,可以看出来,文本的高度是由line-height决定的,而非字体大小。说明:1.行高由于继承性,影响无处不在,即使是单行文本也不例外。2.行高并不能引起文字的高度的变化,高度的表现也不是行高,而是内容区域和行间距。不过,内容区域+行间距正好与行高值相等。内容区域则与字体的大小和字号有关。

需要特别说明的是,在simsun(宋体)字体下,字体大小与内容区域高度一致,也就是说font-size+行间距=line-height;

所以说,行高决定内联盒子高度。即内联盒子高度是由半行间距+内容区域高度+半行间距组成

时间: 2024-10-12 14:47:35

有关line-height的见解的相关文章

line height 与 vertical align

一.line height 其中代表inline box(包含上下间距,若height==line-height,则行间距=line-height - font-size/2),big代表content area. 注: 若line-height < content area ,则line box要取line-height的值,这也是为什么会重叠的原因. line-height属性取值: 1. % 若自身没有设置line-height,则line-height = 父元素的font-size *

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

来源:http://www.cnblogs.com/fengzheng126/archive/2012/05/18/2507632.html 什么是行间距? 古时候我们使用印刷机来出来文字.印刷出来的每个字,都位于独立的一个块中. 行间距,即传说中控制两行文字垂直距离的东东.在CSS中,line-height被用来控制行与行之间垂直距离. 不过,行间距与半行间距,还是取决于CSS中的line-height.那么,如何来使用line-height呢? 默认状态,浏览器使用1.0-1.2 line-

html样式初始化

/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */ /** * 1. Change the default font family in all browsers (opinionated). * 2. Prevent adjustments of font size after orientation changes in IE and iOS. */ html { font-family:

CSS3黑色时钟

一个朋友写的,收藏之 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .divBox { width:600px; height: 600px; position: absolute; top: 0px; bottom: 0px; left: 0p

Designing CSS Layouts With Flexbox Is As Easy As Pie

This article is an updated excerpt of the chapter "Restyle, Recode, Reimagine With CSS3″ from our Smashing Book #3, written by Lea Verou and David Storey. - Ed. Flexible box layout (or flexbox) is a new box model optimized for UI layout. As one of th

normalize.css可以对css初始化,不同浏览器可以统一初始样式

/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font

【学习笔记】前端开发调试工具与PS切图技巧

[学习过程遇到疑问和延伸阅读] 1.Sublime Text 安装插件的方式 一开始以为直接安装.原来在安装丰富的插件之前,Sublime Text需要通过Package Control这个插件来管理.作为基础插件来管理其他的插件.安装成功之后在菜单栏Preferences下才会有Package Control. "Sublime Text 2 也拥有良好的扩展功能,这就是安装包(Package):通过 Sublime Package Control,安装.升级和卸载 Package 也变得轻松

模仿东京首页banner轮播,京东新闻上下滚动动画实现(动画实现)

接着上篇 微信小程序-阅读小程序demo写:http://www.cnblogs.com/muyixiaoguang/p/5917986.html 首页banner动画实现 京东新闻上下动画实现 想着模仿京东首页呢,结果也没赶得及写完,轮播图让我搞了好长时间.也好,那就国庆8天好好的写一下,这里写了一半,先放着.先介绍一下这一半的内容.       还是老规矩,先放个图吧,虽然才一点点了 上线的banner大图和京东头条都是可以滚动的,抄写微信小程序社区官方qq群:390289365里 Nige

富文本中的段落属性

// NSParagraphStyleAttributeName 段落的风格(设置首行,行间距,对齐方式什么的)看自己需要什么属性,写什么 NSMutableParagraphStyle *paragraphStyle = [[NSMutableParagraphStyle alloc] init]; paragraphStyle.lineSpacing = 10;// 字体的行间距 paragraphStyle.firstLineHeadIndent = 20.0f;//首行缩进 paragr

转:Generating PDFs from Web Pages on the Fly with jsPDF

The Portable Document Format has been one the major innovations in the fields of desktop publishing and office automations. It’s widely used in web publishing too, but unfortunately very often in wrong ways – like using it to replace contents that sh