2.2.24 CSS文本样式属性(九)行间距：line-height
css常用的网页布局样式属性
网页布局常用的样式属性一、PositionPosition有以下几个值:static，relative，absolute，fixed。
Static：静态定位。
如果你没有设置position属性，那么缺省就是static.top，left，bottom，right等属性，在static的情况下是无效的，要使用这些属性,必须把position设置为其他三个值之一。
Relative：相对定位。
元素将按照静态定位时的位置进行调整，在静态定位中分配给元素的空间仍然会分配给它，它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走.Absolute：绝对定位。
元素将按照包含它的元素的位置进行调整，比如它嵌套在另一个绝对定位的元素中，那么就相对于那个元素定位.Fixed：固定定位。
元素将被设置在浏览器上一个固定位置上，不会随其他元素滚动.形象点说，上下拉动滚动条的时候，fixed的元素在屏幕上的位置不变。
需要注意的是IE6并不支持此属性。
注意：很多网页都是居中的，这样，当对元素进行绝对定位的时候，在不同的分辨率下显示会有偏差，这时，我们可以通过类似下面的方法来处理：〈div style="position： relative;"><div style="position： absolute; top： 10px；left: 10px;”></div></div><div style=”position： Fixed； top： 10px；left: 10px;”〉</div〉</div> //元素位置固定浏览器位置不变二、Floatfloat 是css 的定位属性, fload属性有四个可用的值：Left 和Right 分别浮动元素到各自的方向，None （默认的）使元素不浮动，Inherit 将会从父级元素获取float值。
前端学习--Css--行间距
前端学习--Css--⾏间距在CSS并没有为我们提供⼀个直接设置⾏间距的⽅式，我们只能通过设置⾏⾼来间接的设置⾏间距，⾏⾼越⼤⾏间距越⼤。
使⽤line-height来设置⾏⾼。
⾏⾼类似于我们上学单线本，单线本是⼀⾏⼀⾏，线与线之间的距离就是⾏⾼，⽹页中的⽂字实际上也是写在⼀个看不见的线中的，⽽⽂字会默认在⾏⾼中垂直居中显⽰。
⾏间距 = ⾏⾼ - 字体⼤⼩。
通过设置line-height可以间接的设置⾏⾼，可以接收的值：1.直接就收⼀个⼤⼩；2.可以指定⼀个百分数，则会相对于字体去计算⾏⾼；3.可以直接传⼀个数值，则⾏⾼会设置字体⼤⼩相应的倍数。
对于单⾏⽂本来说，可以将⾏⾼设置为和⽗元素的⾼度⼀致，这样可以是单⾏⽂本在⽗元素中垂直居中。
在font中也可以指定⾏⾼在字体⼤⼩后可以添加/⾏⾼，来指定⾏⾼，该值是可选的，如果不指定则会使⽤默认值。
⽰例demo:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">/*** line-height如果是证书,值越⼤,间距越⼤*/.p1 {font-size: 35px;line-height: 2;}.box {width: 200px;height: 200px;background-color: #bfa;/** 设置“我是⼀个超链”接居中对齐*/line-height: 200px;}.p2 {/*font: 30px "微软雅⿊";line-height: 50px;*/font:30px/50px "微软雅⿊";}</style></head><body><p class="p2">⼈⽣若只如初见，何事秋风悲画扇。
line-height的用法（一）
line-height的⽤法（⼀）⾏⾼”顾名思意指⼀⾏⽂字的⾼度。
具体来说是指两⾏⽂字间基线之间的距离。
从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。
尤其记得基线不是最下⾯的线，最下⾯的是底线。
⾏⾼是指上下⽂本⾏的基线间的垂直距离，即图中两条红线间垂直距离。
⾏距是指⼀⾏底线到下⼀⾏顶线的垂直距离，即第⼀⾏粉线和第⼆⾏绿线间的垂直距离。
半⾏距是⾏距的⼀半，即区域3垂直距离/2，区域1，2，3，4的距离之和为⾏⾼，⽽区域1，2，4距离之和为字体size，所以半⾏距也可以这么算：（⾏⾼-字体size）/2。
默认状态，浏览器使⽤1.0-1.2 line-height, 这是⼀个初始值。
你可以定义line-height属性来覆盖初始值：p｛line-height:140%｝你可以有5种⽅式来定义line-height。
1.line-height可以被定义为：body{line-height:normal;}2.line-height可以被定义为：body{line-height:inherit;}3.line-height可以使⽤⼀个百分⽐的值body{line-height:120%;}4.line-height可以被定义为⼀个长度值(px,em等) body{line-height:25px;}5.line-height也可以被定义为纯数字， body{line-height:1.2}在实践中，碰到⼀个题型，可以拿来参考学习下：1<style type="text/css">2 *{margin:0;padding:0;font-size: 12px;}3 .lh1{line-height: 2em;font-size: 20px;background: red;}4 .lh2{font-size: 20px;line-height: 2;background: green;}5 .lh3{font-size: 20px;line-height: 200%;background: blue;}6</style>7</head>8<body>9<div class="lh1"><p>⾏⾼1</p></div>10<div class="lh2"><p>⾏⾼2</p></div>11<div class="lh3"><p>⾏⾼3</p></div>显⽰效果如下图：可以知道：<!--⾏⾼1、⾏⾼3都是带单位的em和%，他们继承是先计算好⾼度，再让⼦元素继承，所以20*2=40⾏⾼2没带单位，它会先把⾏⾼继承下来，再根据⼦元素当前字体的⼤⼩来计算，所以12*2=241.font-size虽然lh1 和 lh2的font-size都设置了20px。
html调整行间距的代码
html调整行间距的代码
在HTML中，可以使用CSS样式来调整行间距。
以下是一些常用的代码：
1. 使用line-height属性设置行间距：
```css
p {
line-height: 1.5; /* 设置行高为文本大小的1.5倍 */
}
```
2. 使用margin属性设置段落的上下边距：
```css
p {
margin-top: 10px; /* 设置段落顶部边距为10像素 */
margin-bottom: 10px; /* 设置段落底部边距为10像素 */ }
```
3. 使用padding属性设置段落内部的上下边距：
```css
p {
padding-top: 10px; /* 设置段落上内边距为10像素 */
padding-bottom: 10px; /* 设置段落下内边距为10像素 */ }
```
4. 使用border属性设置段落的边框和边距：
```css
p {
border: 1px solid black; /* 设置段落边框为1像素黑色实线*/
padding: 10px; /* 设置段落内部边距为10像素 */
}
```
以上是一些常见的调整行间距的方法。
需要根据具体情况选择合适的方法来设置行间距。
CSS中的line-height行高属性的教程
CSS中的line-height行高属性的教程CSS中的line-height行高属性的教程基本概念1.行高、行距行高是指文本行基线间的垂直距离。
那什么是基线呢？记不记得vertical-align属性有个baseline值，这个baseline就是基线。
看张“盗图”（选自下面的参考文章），其实我也修改了一下啦~ 注意：倒数第二根是基线哦，最下面那根是底线，不是基线。
图中两条红线之间的距离就是行高（line-height），上一行的底线和下一行的顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之间的关系看图片的右下角就一目了然了~半行距 = （line-height - font-size）/2当然，半行距也可能为负值（当line-height < font-size），这时候两行之间就会重叠，如下图所示：2.四种box要说的4种盒子分别是inline box、line box、content area、containing box ~1.inline box (行内框)：每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，行内框的高度等于font-size，设定line-height时，行内框的高度不变，改变的是行距。
2.line box （行框）：行框是指本行的一个虚拟的矩形框，由该行中行内框组成。
行框也是浏览器渲染模式中的一个概念，无法显示出来。
行框高度等于本行中所有行内框高度的最大值。
当有多行内容时，每一行都有自己的行框。
3.content area （内容区）：内容区是围绕着文字的一种box，无法显示出来，其高度取决于font-size和padding。
个人觉得：内容区的高度 = font-size + padding-top + padding-bottom，有待查证.4.containing box containing box：是包裹着上述三种box的box，原谅我画图水平有限，不过仔细辨认还是能看出来的~ ^_^二、取值一般情况下，浏览器默认的line-height为1.2。
CSS文本属性的知识点
CSS文本属性的知识点CSS文本属性是用来控制和美化网页文本内容的一系列样式属性。
掌握这些知识点可以帮助我们在网页设计中更加灵活地处理文本的排版、字体样式、对齐方式以及文字效果等。
下面将介绍一些常用的CSS文本属性的知识点。
1. 字体属性（font-family）字体属性可以设置网页中的文本所使用的字体样式。
我们可以通过指定具体的字体名称或字体族名称来呈现不同的字体风格。
例如，使用"微软雅黑"字体可以使用以下代码来设置：```cssfont-family: "微软雅黑", sans-serif;```这里的`sans-serif`是一个通用字体族，如果用户计算机中没有安装"微软雅黑"字体，就会使用默认的sans-serif字体显示文本。
2. 字号属性（font-size）字号属性用来设置网页文本的大小。
我们可以使用绝对或相对单位来定义字号大小。
以下是一些常见的使用方式：```cssfont-size: 16px; /* 使用像素为单位 */font-size: 1.2em; /* 使用相对单位em */font-size: small; /* 使用相对关键词 */```3. 字体样式属性（font-style）字体样式属性用来设置文本的样式，如斜体、正常等。
可以使用以下代码给文本设置斜体样式：```cssfont-style: italic;```4. 字体粗细属性（font-weight）字体粗细属性可以设置文本的字重。
常用的值有`normal`（正常）、`bold`（粗体）等。
例如：```cssfont-weight: bold;```5. 行高属性（line-height）行高属性用于控制文本行与行之间的距离。
可以使用具体数值或相对单位来定义行高。
以下是一些使用方式：```cssline-height: 1.5; /* 使用数值 */line-height: 150%; /* 使用百分比 */```6. 文本颜色属性（color）文本颜色属性可以设置文本的颜色。
CSS 行高和对齐
文本垂直对齐行高line-height属性是制定文本行基线之间的距离，而不是字体的大小，它确定了将各个元素框的高度增加或减少多少。
line-height控制了行间距，这是文本行之间超出字体大小的额外空间。
换句话说，line-height值和字体大小之差就是行间距。
在应用到块级元素时，line-height定义了元素中文本基线之间的最小距离。
注意它定义的是最小距离，而不是一个绝对数值，文本基线拉开的距离可能比line-height值更大。
line-height并不影响替换元素布局，不过确实可以应用到替换元素。
构造文本行行内框文本行中的每个元素都会生成一个内容区，这由字体的大小确定。
这个内容则会生成一个行内框(inline box),如果不存在其他因素，这个行内框就完全等于该元素的内容区。
由line-height产生的行间距就是增加或减少各行内框高度的因素之一。
要确定一个给定元素的行间距，只需要将line-height的计算值减去font-size的计算值。
这个值就是总的行间距。
行间距可能为负。
行间距再除以2，将间距的一半分别应用到内容区的顶部和底部。
其结果就是该元素的行内框。
行框一旦给定内容行已经生成了所有行内框，接下来在行框的构造中就会考虑这些行内框。
行框的高度恰好足以包含最高行内框的顶端和最低行内框的底端。
指定line-height值line-height如果取默认值normal，用户代理必须计算行间的垂直空间。
不同的用户代理计算出的值可能不同，不过通常都是字体大小的 1.2倍，这使得行框要高于给定元素的font-size值。
行高和继承当一个块级元素从另一个元素继承line-height时，问题会变得更为复杂。
line-height值从父元素继承时，要从父元素计算而不是在子元素计算。
body {font-size:10px;}div {line-height:1em;}p {font-size : 18px}<div><p>这段文字从div继承了line-height，div的字体大小时10，所以计算出来的大小是10px。
css文字基准线的定义 -回复
css文字基准线的定义-回复CSS文字基准线的定义可以简单理解为所谓文字在一个行高（line-height）区域内所占据的相对位置。
在CSS中，我们可以通过一系列属性和值来控制和调整文字的基准线。
首先，我们需要了解一些基本的概念。
在CSS中，文本的基准线是指文本字符（glyph）底端的水平线，用于对齐字符上下方向的排列。
基准线可以视为字符的“底部”，而文本字符的显示比例和排列方式通常基于这个基准线。
然而，由于不同字体和字号的字符形状差异，不同的字符底部并不总是对齐在同一水平线上。
为了解决这个问题，文本字符的基准线被定义为字符底部和字符顶部之间的一条虚拟线，该线通常与字符的底部部分基本对齐，并作为参考给其他字符提供对齐依据。
在CSS中，基准线调整可以通过以下几个属性来实现：1. vertical-align（垂直对齐）：该属性可以设置元素或者内联元素中文本的垂直对齐方式。
它可以接受多种对齐方式的值，包括基准线相对于包含块顶端或者底端的偏移值、与父元素基线对齐等。
通过合理地使用vertical-align属性，我们可以轻松控制内联文本或者图片等元素与基准线之间的对齐关系。
2. line-height（行高）：行高是指一行文本占据的垂直空间，包括文字的实际大小、上下间距和行间距。
行高可以通过设置line-height属性值来调整。
相对于基准线而言，line-height的值可以影响字符的上下间距。
例如，当line-height的值大于文字大小时，字符的顶部和底部将会相对于基准线向上和向下进行偏移，从而增大字符的行间距。
3. font-size（字号）：字号属性用于定义字体的大小。
字号的设置也会影响字符的基准线位置。
通常，字号的值代表字符底端到基准线的距离。
较大的字号会使基准线向上移动，而较小的字号会使基准线向下移动。
通过综合使用这些属性，我们可以对文字基准线进行精确的调整。
例如，我们可以通过设置line-height属性将行高调大，这样即使在同一字号下，字符的基准线也会距离文字底端更远。
CSS样式----CSS属性：字体属性和文本属性（图文详解）
CSS样式----CSS属性：字体属性和⽂本属性（图⽂详解）本⽂最初于2015-10-04发表于，并在上持续更新前端的系列⽂章。
欢迎在GitHub上关注我，⼀起⼊门和进阶前端。
以下是正⽂。
CSS的单位字体属性⽂本属性定位属性：position、float、overflow等html中的单位只有⼀种，那就是像素px，所以单位是可以省略的，但是在CSS中不⼀样。
CSS中的单位是必须要写的，因为它没有默认单位。
绝对单位：1 in=2.54cm=25.4mm=72pt=6pc。
各种单位的含义：in：英⼨Inches (1 英⼨ = 2.54 厘⽶)cm：厘⽶Centimetersmm：毫⽶Millimeterspt：点Points，或者叫英镑 (1点 = 1/72英⼨)pc：⽪卡Picas (1 ⽪卡 = 12 点)相对单位：px：像素em：印刷单位相当于12个点%：百分⽐，相对周围的⽂字的⼤⼩为什么说像素px是⼀个相对单位呢，这也很好理解。
⽐如说，电脑屏幕的的尺⼨是不变的，但是我们可以让其显⽰不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不⼀样的啦。
百分⽐%这个相对单位要怎么⽤呢？这⾥也举个例⼦：⾏⾼CSS中，所有的⾏，都有⾏⾼。
盒⼦模型的padding，绝对不是直接作⽤在⽂字上的，⽽是作⽤在“⾏”上的。
如下图所⽰：上图中，我们设置⾏⾼为30px，30px * 5 = 150px，通过查看审查元素，这个p标签的⾼度果然为150px。
⽽且我们发现，我们并没有给这个p标签设置⾼度，显然是内容将其撑⾼的。
垂直⽅向来看，⽂字在⾃⼰的⾏⾥是居中的。
⽐如，⽂字是14px，⾏⾼是24px，那么padding就是5px：为了严格保证字在⾏⾥⾯居中，我们的⼯程师有⼀个约定：⾏⾼、字号，⼀般都是偶数。
这样可以保证，它们的差⼀定偶数，就能够被2整除。
如何让单⾏⽂本垂直居中⼩技巧：如果⼀段⽂本只有⼀⾏，如果此时设置⾏⾼ = 盒⼦⾼，就可以保证单⾏⽂本垂直居中。
css中应用段落样式
white-space:用于设置对象空格字符的处理方式，使用 nowarp方式时将强制文本不换行，除非遇到br标签
normal,pre
word-warp:break-work时当内容超过其容器的边界时发生换行normal,break-word
了解一下这些属性能取的值吧！
line-height:用于设置对象中文本的行高normal,length
letter-spacinght
word-spacing:用于设置对象中单词之间的间距normal,length
text-indent:用于设置对象中首行文字的缩进值normal,length
text-overflow:当对象中的文本超过行宽时，可以对文本末端增加省略标记(....),只有当对象设为不换行显示时有效 clip,elipsis
vertical-align:用于设置对象之中内容的垂直对其方式auto,baseline,sub,super,top,text-top,middle,bottom,texxt-bottom
text-align:用于设置对象中文本的对齐方式left,right,center,justify
layout-flow:设置对象中文本的排版方式，横向或纵向排版horizontal,vertical-idographic
word-break:用于设置对象内文本的换行方式，使用break-all时允许词间进行换行normal,break-all,keep-all
《WEB前端设计》CSS样式之文本属性
《WEB前端设计》CSS样式之文本属性CSS（Cascading Style Sheets）样式是一种用于定义网页上元素的外观和布局的技术。
在前端设计中，文本是我们经常需要处理的元素之一、CSS 提供了一些属性和特性，用于设置文本的字体、大小、颜色、对齐方式、间距等。
在本文中，我将详细介绍一些常用的 CSS 文本属性。
1. 字体属性（font-family、font-size、font-weight）字体属性用于设置文本的字体名称、字号和字重。
通过 font-family 属性可以指定一个或多个字体，浏览器会按照顺序逐个查找可用字体。
font-size 属性用于设置文本的大小，可以使用绝对单位（如 px）或相对单位（如 em）。
font-weight 属性用于设置文本的字重，可以取值为normal（标准字体）、bold（粗体）或数字（100~900）。
2. 垂直对齐属性（line-height、vertical-align）line-height 属性用于设置行高，可以使用绝对单位或相对单位。
它可以影响到文本的垂直对齐方式。
vertical-align 属性用于设置元素的垂直对齐方式，可以取值为 top（顶部对齐）、middle（居中对齐）或bottom（底部对齐）等。
3. 文本颜色属性（color）color 属性用于设置文本的颜色，可以使用具体的颜色名称、十六进制值、RGB 值或 HSL 值等。
例如，color: red; 将文本的颜色设置为红色。
4. 文本装饰属性（text-decoration）text-decoration 属性用于设置文本的装饰效果，常用的取值包括：none（无装饰）、underline（下划线）、overline（上划线）和 line-through（删除线）等。
5. 文本对齐属性（text-align）text-align 属性用于设置文本的对齐方式，可以取值为 left（左对齐）、right（右对齐）、center（居中对齐）或 justify（两端对齐）等。
CSS文本属性
CSS ⽂本属性
简介
Text属性可以定义⽂本的外观，⽐如⽂本的颜⾊、对齐⽂本、装饰⽂本、⽂本缩进、⾏间距等。
color 属性定义⽂本的颜⾊
属性值可以有三种表现形式
text-ailgn 设置⽂本对齐⽅式
align可以设置左对齐、右对齐和居中对齐，属性值有三个：left、right、center
text-decoration 规定⽂本修饰
text-decoration可以给⽂本添加下划线、删除线、上划线等。
text-indent 设置⽂本缩进
text-indent属性⽤来指定⽂本的第⼀⾏的缩进，通常是将段落的⾸航缩进。
这⾥的单位除了px还可以写em，em是⼀个相对单位——当前元素的1个⽂字的⼤⼩。
line-height 设置⾏间距
line-height可以设置⽂字⾏与⾏的间距，单位是px。
⽂本包含上间距和下间距，这⾥设置的是整个⾏间距，也就是说对上下间距进⾏改动，⽂本⾼度并不会随之改变。
<style >
div {
color : red ;
}
</style >。
深入理解CSS行高line-height与文本垂直居中的原理
深⼊理解CSS⾏⾼line-height与⽂本垂直居中的原理前⾔在CSS中，line-height 属性设置两段段⽂本之间的距离，也就是⾏⾼，如果我们把⼀段⽂本的line-height设置为⽗容器的⾼度就可以实现⽂本垂直居中了，⽐如下⾯的例⼦：复制代码代码如下:<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div {width: 300px;height: 200px;border: 1px solid red;}span {line-height: 200px;}</style></head><body><div><span>⽂本垂直居中原理</span></div></body></html>这样，span标签中的⽂字就相对于div垂直⽅向居中了，想要⽂本⽔平居中设置text-align：center即可。
那么，它怎么就垂直居中了？为了弄清楚它，下⾯我们先来看⼏个概念。
1. ⾏框在浏览器中，会将给每⼀段⽂本⽣成⼀个⾏框，⾏框的⾼度就是⾏⾼。
⾏框由上间距、⽂本⾼度、下间距组成，上间距的距离与下间距的距离是相等的。
默认情况下⼀⾏⽂本的⾏⾼分为：上间距，⽂本的⾼度，下间距，并且上间距是等于下间距的，所以⽂字默认在这⼀⾏中是垂直居中的。
2. ⽂本中的⼏条线⼏条线与⾏⾼的关系图解：⽂本的⾏⾼也可以看成是基线到基线的距离。
如果⼀段⽂本的⾼度为16px，如果给他设置line-height的⾼度为200，那么相当于，⽂本的上下间距的⾼度增加了，但是⽂本本⾝的⾼度依然是16是不变的，并且⼀直默认在⾏框中垂直居中，⽽上间距和下间距平分了200px的⾼度并且减去⽂本本⾝的⾼度。
深入理解CSS中的line-height的使用
深⼊理解CSS中的line-height的使⽤什么是line-height(⾏⾼)？line-height是指两⾏⽂字基线之间的距离。
什么是基线？基线、底线、顶线、中线注意：基线（base line）并不是汉字⽂字的下端沿，⽽是英⽂字母“x”的下端沿。
不同字体的基线不尽相同。
⾏距、⾏⾼line-height 与⾏内框盒⼦模型所有内联元素的样式表现都与⾏内框盒⼦模型有关。
例如浮动的图⽂环绕效果... and so on什么是⾏内框盒⼦模型我们通过下⾯这段代码进⾏讲解<p>这是⼀⾏普通的⽂字，这⾥有个<em>em</em>标签</p>在这段代码中包含了4中盒⼦：content area内容区是指底线和顶线包裹的区域（⾏内元素display：inline可以通过background-color属性显⽰出来），实际中不⼀定看得到，但确实存在。
内容区的⼤⼩依据font-size的值和字数进⾏变化。
inline boxes。
内联盒⼦不会让内容成块排列，⽽是排成⼀⾏。
如果外部inline⽔平的标签( span、a、em等)则属于内联盒⼦ ,如果是光秃秃的⽂字则属于匿名内联盒⼦。
line boxes。
每⼀⾏就是⼀个⾏框盒⼦。
每个⾏框盒⼦⼜是由⼀个个内联盒⼦组成。
containing box包含盒⼦。
包含盒⼦是由⼀⾏⼀⾏的⾏框盒⼦组成。
<p>标签就代表了⼀个包含盒⼦。
(即上图中的绿⾊部分) line-height 的⾼度机理深⼊理解内联元素的⾼度表现在讲解原理之前，我们先看以下代码:<p>这是⼀⾏普通的⽂字，这⾥有个<em>em</em>标签</p>console.log(document.querySelector('p').clientHeight); // 输出36px现在我们思考这样⼏个问题:元素的⾼度从何⽽来？是由⾥⾯的⽂字撑开的？the answer is：元素的⾼度是由line-height决定的：line-height明明是两基线之间的距离，单⾏⽂字哪来⾏⾼，还控制了⾼度？⾏⾼由于其继承性，影响⽆处不在，即使单⾏⽂本也不例外。
深入理解CSS：line-height、vertical-align
深⼊理解CSS：line-height、vertical-align 说在前⾯：通过这次深⼊学习CSS的line-height和vertical-align属性，对CSS真是刮⽬相看，决⼼开始深⼊CSS学习哈哈。
在⼀⾏中，左侧图标，图标右侧是⽂字，并且图标和⽂字在这⾏垂直居中。
上代码：<div class="bg"><img src="hello.jpg"/><span class="span1">abgxxx</span><span class="span2">abgxxx</span></div> 图⽚看着很正常，内联元素按顺序在⼀⾏排列，但是当给外层div加上背景⾊和边框之后就发现问题了。
.bg {background-color: lightblue;border: black solid 1px;} 图⽚下⽅出现了空⽩，这是由于img元素的vertical-align属性默认为baseline，baseline意味着元素的基线通⽗元素的基线对齐，⽗元素的基线为字母x的下边缘(线)，但是像图⽚或者输⼊框这种元素，本⾝没有基线，则是将其底端通⽗元素的基线对齐。
那么图⽚下⽅的空⽩处的⾼度是怎么确定的呢？.bg span{background-color: lightgreen;} 给后⾯的span加上背景⾊后，看出空⽩的⾼度即字符的基线baseline和bottom之间的距离，⽽这个距离是由line-height决定的，⽽line-height的默认值是normal，那normal 是什么呢？我们经常将 normal 理解为 1，或者 1.2，就连CSS规范中也没有讲明⽩normal究竟代表多少。
我们知道 line-height 的值为数字时，表⽰的相对于 font-size 的倍数，但问题在于，font-size:100px 对应的⽂字在不同字体⾥的⾼度是不⼀样的！那么 line-height 会随着⽂字⼤⼩的改变⽽改变吗？ normal 真的表⽰ 1 或者 1.2 吗？vertical-align ⼜是如何被 line-height 影响的呢？ 让我们来深⼊理解⼀个不那么简单的 CSS 机制。
css文字垂直居中问题
css⽂字垂直居中问题CSS ⽂字垂直居中问题问题：在 div 中⽂字居中问题：当使⽤ line-height：100%%; 时，⽂字没有居中，如下：html: <div id="header_logo_des"></div>CSS: #header_logo_des{width: 100%;height: 100%;font-size: 28px;text-align:center;line-height: 100%; /*设置line-height与⽗级元素的height相等,不能使⽤%；*/}但结果如下：原因：line-height 属性设置⾏间的距离（⾏⾼）1. 不能为负值；2. 最好设置为具体像素值，如：line-height: 60px;3. 在⼤多数浏览器中默认⾏⾼⼤约是 110% 到 120%;解决办法：1. 使⽤像素值:eg: line-height: 60px; // 60px，是当前 div 的⾼度2. 使⽤ %：eg: line-height: 200%; // 调⾼百分⽐3. 不再使⽤ div 直接写⽂字，可使⽤其他内联标签包含⽂字，eg: <span>HTML： <span>岁⽉静好</span>CSS: span{font-size: 28px;display: block; //内联元素--块级化text-align: center; //⽂字⽔平居中line-height: 200%; //⽂字垂直居中}4. 垂直居中 vertical-align: middle; 常⽤于图⽚的垂直居中注意： vertical-align: middle; //不要放在div中，因为<div>、<span>这样的元素是没有valign特性的5. flex：⽔平垂直居中html: <div id="des"><span>岁⽉静好</span></div>CSS: #des{width: 100px;height: 100px;display: flex;border: 2px solid #ffcfd3;background-color: #bacaee;}#des span{display: flex;flex: 1;justify-content: center;/*⽔平轴居中*/align-items: center;/*垂直轴居中*/}。
深入line-height的各类属性值_CSS世界_[共3页]
![深入line-height的各类属性值_CSS世界_[共3页]](https://img.taocdn.com/s3/m/bc6265b1f5335a8103d22021.png)
5.2 内联元素的基石line-height 121（2）因为内联元素默认都是基线对齐的，所以我们通过对.content 元素设置vertical- align:middle 来调整多行文本的垂直位置，从而实现我们想要的“垂直居中”效果。
如果是要借助line-height 实现图片垂直居中效果，也是类似的原理和做法。
细心的读者可能发现，上面我解释原理的时候，“垂直居中”这4个字加了引号，莫非，这里的“垂直居中”又是“近似”？你还真说对了，这里实现的“垂直居中”确实也不是真正意义上的垂直居中，也是“近似垂直居中”。
还是上面的多行文本垂直居中的例子，如果我们捕获到多行文本元素的尺寸空间，截个图，然后通过尺子工具一量就会发现，上面的留空是41px ，下面的留空是39px ，对啦，原来不是完全的垂直居中，如图5-12所示。
不垂直居中与line-height 无关，而是vertical-align 导致的，具体原因我们将在5.3节讲解。
5.2.3 深入line-height 的各类属性值line-height 的默认值是normal ，还支持数值、百分比值以及长度值。
首先了解一下这个看上去一般实际上不一般的normal 。
为什么说line-height 的默认值normal 不一般呢？因为，本质上，这个normal 实际上是一个变量。
我想，很多人脑中的想法应该是这样的：normal 应该对应一个具体的行高值，按照经验差不多1倍多一点儿的样子，具体值多少需要测试一下才知道。
实际上非也！normal 实际上是一个和font-family 有着密切关联的变量值。
什么意思呢？比方说，一个<div>元素，有两段对比CSS 如下：div {line-height: normal;font-family: 'microsoft yahei';}div {line-height: normal;font-family: simsun;}此时两段CSS 中line-height 的属性值normal 的计算值是不一样的，表5-1给出的是我在几个桌面浏览器的测试数据。