45.尚硅谷_HTML&CSS基础_行高.avi原创

啊，接着来说，呃，字己的样式也说完了，然后我们再说一些这个其他的这个文本的一些相关样式，我们来说一个叫什么呢？叫做一个这个行间行间距，那什么叫行间距啊，是不是就行与行之间的一个距离啊，诶来，那这里边我们这直接给它来一个class，那既然涉及到横间距了，我们先把什么呀，我们是先得把行弄出来呀，哎，来把我们这个找点字啊。转过来，然后ctrl shift的F格式化一下，然后呢，这边在我们这个火狐里运行一下，诶，这里边文字就挺多的，那什么叫行间距啊，我们来看我这一行文字，还有一行文字之间，他们是不是有这么一段距离呀？哎，这段距离就是什么呀，就是行间距，有的时候我们需要什么呀，行与行之间你是不是远一点啊，有的时候还需要什么呀，行与行之间近一点，那这会儿我们就需要去调整这个什么呀，行间距啊，横间距，那我们来说一下我们这个行间距怎么去设置啊，怎么去设置，这里边我们来写一个style标签，说什么呢？哎，说在我们这个CSS中并没有什么呀，嗯，并没有为我们提供一个什么呢，直接设置我们这个行间距的一个方式啊，也就是说这个距离，你说我想的十像素，我想20像素咱们能不能设置啊，设置不了啊，不能直接设这个距离啊，不能设这个直接设这个距离，而是什么呢？我们只。

能什么呢？我们只能通过哎设置我们这个行高啊来干嘛呢？来间接的什么呢？哎设置我们这个行间行间距啊，行间距行高越大我们是什么呢？我们这个行间距干嘛呀？哎，越大啊行间举的行高怎么设置呢？我们叫什么呀？诶使用我们这个LA height，诶来设置我们这个行高啊LA head表示的是一个什么呀，横高来一个line。

烂一个害对我这忘写什么了，忘写选择器了啊P，然后这一个烂head，然后我这来一个什么呀，来一个40个像素就表示什么呀，设置我这个行高为40个像素来保存，我们来看一一刷新走你这行间距是不是大了呀？哎，当我一修改行高以后，行间距就大了，诶那这是为什么呢？那行高又是什么呢？哎，行高又是什么呢？诶那这里边还是这个问题，我们说了，当我们去设置文字的时候，文字是不是都在一个看不见这么一个框里啊，那同样我们说这行高相当于什么呀，行高类似于什么呢？类似于我们什么呀，我们这个呃，上学时的上学时什么呀，那个什么呀，单线本现在应该也用的是吧，那种单线本，什么单线本啊，我这本上这个线是干嘛的呀。哎，是一行一行的，然后我们写，我们写字的时候，是不是在这个横之间去写呀，哎在这横之间去写，那这里边哪叫行高啊，哎是不是两个行，这高度叫行高啊，哎这个距离叫什么呀？叫行高啊，叫行高诶那我们说什么呀？诶单线本是什么呀？诶单线本是什么呀？是一个一行一行的，哎一行，哎一行的什么呢？哎行与行，这不线与线吗，限与。

线之间的这个距离就什么呀，就是我们这个行高啊，就是我们行高，那你说这单线本你跟我们这个网页有什么关系啊，那实际上是什么呢？网页中的文字实际上干嘛呢？诶实际上诶也是写在一个什么呀，一个这个诶看哎看不见的一个什么呀，线状的，也就是说现在我们这个网页，我这是不是写了一个字啊，实际上我们说了，我这个字实际上也处在一个什么呀，也处在一个行里，只不过这行我们干嘛呀，我们看不见，但是什么呢？但是这行它却真真实实的干嘛呀存在着，如果没有这行，我们这字是不是就不提了呀？诶它真实的存在这么一个行，那我们说了这个行与行之间这个距离，这个距离就是什么呀，这个距离就是什么呀，行高啊，这个距离就行高，而我们这个文字就在哪啊，是不是在我们这个行高之间去显示啊，哎，文字是在我们这个行高之间去显示啊，而我们这。

文字呢，而我们这个文字，诶正好处于什么呀，诶文字会默认在我们这个行高中叫什么呢？垂直居中啊，默认会在我们这个行高中，垂直居中显示什么意思呀？来咱们假设啊，我现在有两行，这是一行。这是一行。这个是不是整个是一行高啊，那我行里边是不是要有文字呀，要注意这文字是靠底边的吗？是靠上边的吗？哎，不是它干嘛呀，它正好是居中去显示的啊，正好正好会在我们这个行的一个居中显示啊，居中显示那好，那就带来一个问题了，咱们假设怎么它怎么就居中了啊，我们假设行高是多少呢？行高是20个像素，而我这文字是不是有一个大小啊，文字大小多少呢？文字大小是十个像素，诶，那问题来了，它是怎么居中的呀？文字大小是十个像素，是不是也就是中间这个大小十个像素啊，那我们居中怎么办呀？上边给它来五个像素，下边给他来五个像素，它是不是居中了呀？哎，居中了啊，所以注意我们这个文本默认是在我们这个行高里边什么呀，居中的啊，行高里边居中的这个能懂吧？哎，那现在就要问题就来了，我们这个横间距是哪来的呀？横间距哪来的呀？诶拿这图来咱们画一下，现在还是把这横高画出来啊。

在这一个横杠，但是我画的可能就不准了啊，不准了，这画的挺恶心的，也是。

哎，我现在是不是就有两个行高啊，哎，两个行高，那这个距离刚才我设置的时候多少来着？呃，是20吗？我也忘了多少了是吧，反正这是有一个距离的，对吧？哎，咱们看一眼吧，咱没法说了，我这个，哎40个像素啊，40个像素，哎，也就是说我这个横高是40个像素，而我这个字字体大小是多少像素啊？哎，16个像素，字体大小是16个像素，那我们说了字体是16，这个是40，那我们说这上下各留多少啊，40减去一个什么呀？16等于多少啊？诶24 24，我上边给了12，下边给12，是不是上下各12啊？诶上下各12，那我们说那我这两行文本之间一个距离是多少？诶那我们说它12，这有一个12，下边是不是还有一个12啊，两个12加一块是不是正好是24啊，所以它中间这个距离正好等于什么。

正好等于什么？是不是正好等于24啊，而24恰好是谁呀？哎，是不是恰好等于我们这个行高减去我们那个什么呀，字体大小啊，哎，字体大小，所以这里边我们说了，我们是怎么通过这个行高来设置文字的，我们说有一个等式叫什么呢？我们的这个行间距等于什么呢？等于我们这个行高，哎，叫做一个行高。减去我们这个字体大小啊字大小，那现在举个例子，我现在直直接来一个found size来什么呢？20个像素，Found size是20，我这个拉害得多少啊，40，那我问你行高是多少？诶行高是不是就是40减20啊，不是横间距啊，横间距就是40减20是多少？是不是就是20啊，哎，就是20啊来我们来看效果，一保存，现在刷新他们的距离就是什么呀，20个像素，那现在我要想干嘛呢？我想把我这个行间距设置成什么呢？设置成五个像素。

那我行高剩了多少多少，是不是25啊？哎，二十五一保存走你是不是行间距减去这个，这个横高减去我们这个D大小啊哎，减去原要得五，我这横高横间距是不是就五啊？哎，行间距是五，那我就改一个30，行间间距变成多少了？是不是十了？诶保存我这一刷新走你是不是就十了呀？哎，这个效果啊，所以注意我们要设置我们那个行间距等于什么呀，等于行高减去我们这个什么呀，字体大小你想设置多少就写多少，但这有个问题，那我们来说一下，我这如果设置一个20，那什么效果了，那行间距有没有了，没了行间距是不是零了呀，行与行是不是紧紧贴到一起了呀，保存我这一刷新走你哎是不是贴的就比较紧了呀？哎，比较紧了，再来说一个问题，我如果干嘛呢，不改10横间距什么了，是负的了，哎负的什么效果呀，哎，一刷新走，你是不是堆一块了呀。

哎，来，那我要来什么呢？来一个二来一个来个一一什么效果了，一刷新，哎是不是变成黑疙瘩了，M这黑暗啊，所以注意我们可以通过这个烂氦的来调整这个什么呀，行高啊，通过这个烂氦的来调整行高，哎通过我们这个设置我们这个line hi，诶可以间接的什么呀，诶设置行高，哎那么来说它可以接收的值，哎，它可以什么呢？可以接收一个什么呀，接收一个诶可以接收的这个值直接接收一什么呢？诶直接诶接收一个什么呀，接收一个大小，比如说我30个像素，它的行高是不是就30啊，哎，30个像素行高就30，我还可以接什么呢？还可以可以指定一个什么呢，叫做百分。

数，诶可以指一个百分数，那我来写一个来什么呢？我来一个100%，100%什么意思呀？诶那100%我先看效果吧，我这一刷新走你，诶你看这行高。横间距是不是跟没有一样啊，哎跟没有一样，所以100%什么意思呀？哎，相对于谁的100%，哎相对于字体大小的一个100%啊100%则什么呢？则会相对于我们这个字体去什么呢？去计算我们这个行高，所以说写100%相当于是写什么呀？哎写20这个效果是一样的啊，效果是一样的，一刷新走你是不是一样的呀？哎，我如果来什么呢？来一个200%相当于什么呀？是不是40啊，哎40那就相当于什么呀？诶横间距是20啊，我这一保存，咱们一刷新走，你是不是这个效果呀？诶可以传一个百分数，但是百分数呢，其实不不是特别常用啊，百分数不是特别常用，还有一个什么呢？常用的一个什么呀，可以直接传一个正整数啊，正整数直接来看效果啊，入了写一个叫做一个line hat，我来一什么呢？来一个一啊，不一定是整，不一定是正整。

数啊，也可以是小数，就传一个就传一个数值，传一个数值保存，我写一个一表示什么呀？诶我们来看效果啊，一表示一个一倍行高我们来看跟什么一样，是不是跟百分百一样啊，哎百分百一样啊可以指定一个数值则什么呢？哎，可以指定一个数值，则我们这个行高会什么呢？诶会设置为我们这个字体大小相应的什么呀，倍数相应的一个倍数，那所以你看我这写了一个一表示我这个行高是字体大小的什么呀，一倍，一倍就是多少啊哎，就是20，我要写什么呢？写一个1.5表示什么呀？哎，是不是1.5倍啊哎1.5倍，一刷新这距离码了就大了，我要写什么呢？我要写一个二，就表示我这个行高是我这大小的什么呀，两倍就什么呀，一刷新实际上跟那个百分比是什么呀，一样的啊一样的，只不过变成了这个数字了，而且这种方式写起来干嘛呀，更。

简单一点啊，更简单一点，所以这里边注意我们更常用的是这种方式啊，这种方式啊好，那这个呢，是我们的这个航高，就说完了，航高说完了，然后我们来说一下横高还有什么作用啊，那现在咱们举个例子啊，我现在有这么一个东西，我写一个什么呢？写一个div，我来一个这个点一个这个诶box，诶box，然后呢，Div里我写一个这个超链接，来一个A，然后来一个井号，我这写一什么呢？诶，我是一个这个超链，超链接保存，那现在我来设置一下样式啊，点一个我们这个box，我这来什么呢？White来一个这个200个像素hat呢也来一个200个像素background color，我来一个这个写颜色井号，一个BFA保存啊这个颜色BFA相当于什么呀，BBFAA吧，诶，这是我们一个叫什么呀，豆沙，豆沙绿啊，这么一个护眼的一个颜色，那现在这个颜色有了，那现在我们说了整个外边是一个div，在div里边我们放了一个什么呀，超链接，那这个超链接现。

它是不是在整个我们这个div的一个上边啊，那有时候希望什么呀，我希望这个超链接可以在我这个div里边是不是垂直居中啊，哎，你那在靠中间这个位置去显示，这样效果干嘛呀，会好一些，那我怎么让它往怎么让它在中间这个位置，哎，我们说了默认我们的文本是不是在我们这个行高里边居中啊，哎，横高里边居中，那我想想如果我行高整个是这么高，那我这文本是不是自然而然就居中了呀？诶所以干嘛呢？所以我们来说一个小的一个技巧，什么技巧呢？我们来说一下，对于什么呢？对于我们这个单行文本啊，注意这里个这种情况只适于我们这个什么呀，单行文本如果你行多了以后，我们行高是不是也多了呀，所以对于多行就不起作用了，只对于什么呀，单行文本来说，对于单行本来说可以什么呢？可以将我们这个航高设置为什么呢？设置为和我们这个负元素的什么呀高度。

一致啊，高度一致这样什么呢？这样可以使我们这个诶单行文本诶在这个负元素中垂直居中啊，垂直居中来我们来看效果，直接来一个叫做一个LA hat等于谁呢？等于一个200个像素，注意不是瞎写的，来看这儿高度是200了，我拉害的也设置成200来一保存，现在一刷新走你什么效果了，诶这文字文字是不是就居中了呀？诶文字就居中了啊所以注意对于我们这个单行文本，我可以干嘛呢？将它的行高设成和副元素的高度一致，可以使我们这个单行文本在我们这什么呀，在我们这个副元素中居中啊，垂直居中，好，这是我们说的这么一个行高，然后呢，再补充最后一个问题，就是我们还是回到我们刚才那个字体大小的问题，字体大小呢，我们这来复制一下CTRLCCTRLV，我们来一个P2保存现在刷。

它是没有没有样式的啊，没有样式的，然后呢，我们这来写一个点一个这个P2这来一个我们刚才说了一个简写属性，是不是一个放呀，哎放的简写属性，然后呢，我们来设置一个，我们说了这个属性最少是不是要写两个值啊，一个是我们这个大小，还有一个是我们这个字体，我来写一个30个像素，然后字体来个什么呀，微软雅黑，我一保存一刷新走，你是不是30个像素微软雅黑呀，哎，微软雅黑，那我们来说一下这个属性实际上还有一个功能在我们这个fo中，诶可以什么呢？可以也可以指定什么呀，行高啊，也可以指定行高，比如说我这是不是有一个30PX呀，在30PS后边我加一什么呢？斜盖，斜盖我写什么呢？写一个30PX，那这个30表示什么意思？诶行高30前面是字体大小，30后边是什么呀？叫做行高30啊行高30我们先看一刷新走，你是不是挤起来呀。

诶，我这来改一个，我改成什么呢？改成一个50那边示什么了，行高是50，字体是30，横间距是多少？诶20我这一刷新走你数据拉开了呀，哎，所以注意在字体后边也可以跟着什么呀，诶也可以跟着横高在字体后可以什么呢？诶可以添加一个什么呀，斜盖什么呢？行高啊来干嘛呢？来指定我们这个行高，当然该值是什么呀，是可可选的，诶如果不指定则会什么呢？则会使用诶默认值啊，如果你不指定，它是会使用那个什么呀，默认值的啊，会使用默认值的，所以这块一定要注意啊呃在字体后，字体字体大小后啊可以添加斜盖横高啊来指定横高该值可选的，如果不指定则会使用默认值啊，这个默认值这块实际上是有。

有一个陷阱的，你这块一定要注意，注意哪呢？那你来看着啊，我这来一个line height，我来1HE LA he来多少呢？来一个50 PS我这是不是给它指一个高度，行高是50啊，诶横高是50，来看着啊，我把这个给它去了，那我们来看这是什么效果，在上边我指定了一个行高，然后在下边我指定为什么呀，放属性设置字体大小为30字体，为什么呀，微软雅黑那么说你说我这行高能不能生效。能不能生效，来咱们看啊，咱们看效果一刷新走，你很高生效了吗？没生效吧，生没生效啊，没有吧，来再大点一百五有变化吗？哎，没有任何变化啊，这个行高压根就没有生效，那这是为什么呀？诶，那看着啊，我把这样式干嘛呢？写在下边保存，再看一刷新，这回是不是生效了呀，但是发现把它写上边的时候呢，并没有生效，那这是为什么呢？我们来说一下这一块，我设置一个赖氦行高为50，那注意谁先设置的，是不是它先设置的呀，也就是说两个样式会先解析它是不是，然后再解析后边这个啊好，我上边写了一个烂he为50，但是我在这儿有没有指定横高，没有指定行高，我们说了，如果你不指定它就使。

对吧？默认值不管默认值是多少，肯定不是什么呀，50啊，肯定不是50，所以你会发现这我指定好了，但是到这干嘛了，我是不是又指定了一个默认值啊，是不是把上边那值给它覆盖掉了呀？哎，覆盖掉了，所以你会发现这个值写不写干嘛呀都一样啊，所以注意当你写这个放的时候，一定要避免这种情况出现，所以你一定要注意它会只使用什么呀，默认值我不写行高是不是意味着我没指令啊，是不是啊，不是你不写它也给你指定了是一个什么呀，默认值所以会导致什么呀，覆盖是不是前面的值啊，那这个问题怎么解决啊？哎，你指这个时候你你最好把横高干嘛呀，你同时最好给他干嘛呀写上，这是不是就行了呀，或者干嘛呀，哎，你把烂害的写到什么呀，下头也行啊，下头也行，这样也可以啊，这样也可以，所以这里边注意这个问题啊，这个问题包括我们那些什么加粗。

包括我们这个斜体，包括我们这个大小型大写字母都有这个特点啊，都有特点，它你如果不指定都会被什么呀，覆盖掉啊，不会覆盖掉，好这也是我们说的这个高，我们就。