23.尚硅谷_css2.1_行高.wmv原创

好，我们说完这里之后，我们来说一些文本属性，虽然说我把行高写在了自己的这个笔记里面，可是你得知道行高它是一个文本类的属性，好，文本类还有其他很多属性。好，文本相关的属性都在这块，这些都是文本类的属性，懂不懂，好这个我们放到晚上我们再来说啊，都是比较一些简单的API啊，那下午这块的话，我们得干嘛呢？得说一个行高，那行高有单独的课件。好说行高得说几个东西来看一下。好，呃，那这个东西真的是啊，比较烦啊，给来看一下好，一般我们说一个文本，你看到一个文本，你上来要跟给他分四条线。顶线，中线、基线以及底线，好，这很像我们小时候写的那个四线三格的那个什么，你们学拼音的时候，或者学那个学那个音标的时候，或者初中开始学那个英语的时候，是不是都会看到这个什么，这种就是四线三格的这种本子啊，那这个就是干嘛根据这个四线三格这本子来的，懂不懂，这叫机线，那机线的话一般是我们这什么没有，就是像我们E像LS啊I这种英文字母干嘛，最底下的这根线叫做基线能明白，OK，呃，中线相当于是我这个盒子的一半，那底线跟底线呢，就是什么两端能明白吧？好，从上到下分别是底线、中线、底线底线啊，你的这个稍微有个认识好不好？再来看好那行高到底指的是哪一块？行高指的是你上一个文本的。

基线到我下一个文本行的。极限就是我蓝颜色画出来这个区域，这是行高的一个值，能明白吧？好，那我问你，其实行高的定义是从这个极限到这个极限吧，不见蓝颜色这条线到蓝颜色这条线，就这条线以及我这条线。以及我这条线。

大小都一样吗？这个值都都一模一样，都是一样的，只是说定义上来说的话，干嘛是这个极限到这个极限的一个值，我们定义成行高能明白吗？本质上什么这个几条线的值都是一样的，这这个可不明白，OK。好，那再来看好，那行高是指上下文本行的基线间的垂直距离，也就是说图中两条杠的一个距离，两条横线条杠的距离能明白吧？好，再来看行距体的是什么？行距是指一行的底线到下一行底线的垂直距离，也就是说我们这边这个。紫粉啊，不是紫粉吧？啊，就是这个粉色的线到这个，这是什么颜色，绿色是不是就是这个粉色的线到绿色这个线这一块区域叫什么。行距等等，行与行之间的距离吗？叫行距能明白吗？然后呢，有行距还有什么？

半行距，半行距是行距的。一半上面这个叫半行距，能明白吗？OK，那知道了什么是行高，什么是行距，什么是半行距，好来看，那这个就是行距能不能理解，你看1234加起来是不是一个行高的值，只要是你两条颜色一样的线加起来肯定都是行高的值，明白吗？然后呢，行距是不是干嘛，就是里面三这个区啊，那一般行距怎么求啊，想想。行距怎么求啊，我问你啊，这个是两条线之间，是不是很高啊？是不是啊，问你这个是这个区域跟这个区域是不一样的。这是不是也相当于就是我是这个距啊，那我问你讲那行距怎么求啊。你看这个四是不是相当于就是我这个区域啊，你看一加二加四，其实它等于什么。字体的一个大小吧，那行行距怎么求啊？

行高减去字体大小是不是就是行距啊？能理解吗？OK，可是我问你，一加二加四它是等于一个字体大小吗？其实默认渲染起来。刚刚是不是看过了，我们自己在20给了30啊，可是浏览器真正渲染起来，他给他给你多少40吧，所以说一般是可以，你可以认为是用什么行距等于行高减去。字体大小，可是这个减的过程当中取实干嘛，它减的并不是字体大小这个尺寸对吧？浏览器真的减的是不是要比字体大小稍微大一点，可是你想啊，是不是字体大小为30啊，本身给了你40还有两还有十的距离是不都是空白区域啊，那是不是相当于就是行距啊？能理解吧，我们待会来看DEMO好不好？好，那说完这个韩剧跟包含这个看内容区好，什么叫内容区域？底线跟底线包裹的区域叫做内容区域，也就什么。这一块区域叫做内容区，能明白吗？OK，再来看几个概念，好文本行的每个元素都会生成一个内容区域，这个由字体的大小来决定，这个内容区会生成一个叫做行内框的东西，如果不存在其他因素，这个行内宽就应该完全等于这个内容区懂不懂？可是如果你有行高，如果行高产生了，行间距就会增加跟减少各个行内框的高度。

能明白吗？也就是说内容趋失一开始初始化时候就有的吧，好，初始化的时候，其实我的行内框就等于我那个内容区的尺寸，那一旦你给它设置了航高，那这个航高会不会去影响到这个行列框的指转？它会影响到内容区的尺寸吗？会不会影响内容去计算？会不会，不会它只影响行内框的尺寸，能理解吗？好，再来看好行内框是什么？行内框是一个浏览器渲染模型中的一个概念啊，你是页面上面是无法显示出来的，懂不懂？OK，那行内框默认是等于内容区的区内，内容区的一个区域刚才已经说过了，OK，将行高的计算值减去方S计算值，这个值就等于总行区吧，那这个值可能也是个负值，你也可能是个正值嘛，将这个值除以一半，它会分别用到内容距的底部跟底部就是你的行间，行就是你的行距，其实最多会分成一半，分成什么？分成两份，在我的内容区的上下各占一份，然后我内容区加上这两份，什么行间距，就这两份行距，最终这个结果就是那个行内框。

能不能理解好，可是默认情况下你没有设置行高的话怎么办？行内框就等于内容区，可不可以理解好，再往下走好，那说了什么是内容区，什么是行框？我们来做，再说个概念叫做啊，什么叫行内框？再说个概念叫做行框，行框只是什么呢？行框它也是一个什么概念，没有办法实际显示出来，默认情况下，行内框的高度等于本行内所有元素中行内块行内框最大的值。

你一行上面是不是可能摆多个内联的数啊？哪个内联元素的行列框最大，最终就变成这一行的行框，能理解吗？好，其他的其他什么，其他底下的半句话，晚上再来看，现在不要看对不对，好，那分清楚了，什么是内容区，什么是行内框，什么是行空码。好，我们来看几个DEMO。好，这张图可能稍微有点问题啊，待会我们来说还有什么问题好呃，比如说我们这边就是我不去写了啊，因为我们直接看这几个DEMO就可以了，我直接贴过来。好，我们来看一下行高相关的一些东西，CTRLC。好，准确完毕。好来看我这个航框，好首先大家来看是不是我就有一个失败容器啊，它的风扇是不是30啊，好来看一下放在三三十，那我页面上是不是就有一个30的一个SPA啊，然后我是不是这个它的它的背景是中码D拼卡，好问你这个div是不是靠我这个span称分来的，是不是是靠span哪一部分乘分来的，现在这个SPA是不是有内容区啊，有内容区有行内框有。

航框，我问你最终去称这个div高度的是他们三个当中的哪一个？是不是应该是行框，它是最外层的那一个吧，那么理解好来看一下好问你这个时候我有给他指定行高吗。没有好，我们把它印一个屏幕。好，放到里面去看一下。好，打开我的。

OK ctrl加N。好，来看一下。Ctrl alt加N不出来。CT出来好，上去好放大。好走，你放大。好。我们可以来看一下。好，问你，我拿一个矩形线框，这个上面这个混颜色的线，你不要管它混颜色的线是浏览器自己的对不对，并不是我们爱奇妙任何元数量，好总你从这个会员数这个线开始量取，往下量，看量到了多少40，我的字体代表其实给了多少30，最终渲染成多少40，那这是浏览器它最终渲染的一个问题，懂不懂我问你，那这个时候的整个。内容区的大小应该为多少？内容区的高度应该为多少？内容区的高度为多少？是字体大小指定多少？内容区的高度多少吗？

并不是八，是不是内容区的高度，现在就应该是。事实啊，那这个就是我们干嘛，虽然说干嘛，虽然说我们在刚刚规范里面说什么，规范里面说你干嘛，来看一下规范里面怎么去做这个。内容区的好，内容区跟把你们说了底线底线什么底线跟底线包裹的区域吧，是不是啊好，也就说什么是我们由自己大小来确定的嘛，是不是啊，可是它比自己大小，浏览器实现的时候是不是要比自己大小稍微大一点，是不是它自己加了点多西啊，能明白吗？所以说按照如果如果是在我们现实生活当中，你去写字的话，你写完一个字的话，整个内容就是就是你字的一个高度啊，可是问题是在浏览器里面呢。它上面下面都稍微帮你加了点空隙，那这个空隙是加在内容区里面的，懂不懂这是内容区的东西，能不能理解好这个概念，一定要有好来看一下好，其实我们现在内容区的大小是不是。

40啊好，问你现在是不是只有一个元素啊，它的行内宽为多少？为多少？40吧，行宽为多少？事实吧，最终把这个身份式的div撑开多少事实吧，其实这个情况下，默认情况下设的内容区行行内框行框都是一样大的，最终把你这个div称成的事实啊，那么你讲好，那这是一个事情，好整理。再来看好，嗯，我们再看好，再看第二个DEMO。这里好，这个时候再来看，现在我把这个行高调成了。38好，自己大是不是还是32来看一下总体好，Ctrl alt加。

A，好，这里。好，呃，CTRLL加N好来。好，贴上去，好，再来看一下。好，大家来看，现在我问你，我的字体大小设置为多少？30，可是我的内容却大，应该不到。这个是不是我的内容非常小，是不是为40啊，你看F8出来是不是高度为40啊，可是你这个时候把它的行高设置成多少了。行高设置成了。呃，这是什么鬼？怎么没了？好，重新打开来吧，CTRLLL加N。好，这里这时候内容确实不是事实啊，好，来看一下，我们说最终你外面这个元素被称成了多少。是不是将近差不多32，是不是为什么最终它被称为32？

你的行高是用来指定什么的？行高是不是用来决定行内框的一个高度的？是不是啊，你现在的行内框是不是就是30啊，行框怎么来确定的，你一行上面行内框最大的那个嘛，现在是不是只有一个行内框。那问你航空的大应该有多少？38最终称这个div称出多少？30吗？能理解吗？这个应该没有，没有太大问题吧，OK，而且我们来看，如果你这个值给小一点，我给20。好。Ctrl alt加A，好来再来看，如果我给20打开来。啊不是打开CTRLL再加N好教你好来看一下。如果我给20，其实你整个内容区的大小，看一下内容区的大小是不是还是为差不多为40啊。

好，把它放大一点。好，看内容区的大小，是不是还是为40啊，这个行行，外面这个D其实已经被撑开到差不多有。26吧，好不管，反正我问你这个内容区的大小是不是现在就是40啊是不是，而且这个行框是不是嘛。是不是你看这个行宽，你看是不是行波是20啊，行高为20之后问你，你现在整个，呃行列宽是不是就为20啊，你现在是不是里面可能有一些其他其他因素的影响，最终我这个什么外面这个航框是多少。26左右吧，是不是，那这个东西大家可以不用管，因为这个渲染比较复杂，我们只需要管一件事情，你看反正我问你这个内容学大家有没有变没有变，而且外面这个行框是不是跟这个行高是有关系的，是不是，而且问你如果你这个行高比你的方程扇子要小的话，大家来看它这个默认这个分配是平均分配吗？

不是平均分配吧，能不理解好再来看这东西，如果我把这个值来看一下，我们看下我们零三这个，我不是把它的行高是不是调成调成50啊，我把让他也上来1.ie。马拓法。也为50PX好走你。好，CTRLL加A，好来扣一好打开我的。好，CTRLB好来看一下。好，现在内容区为多少？是不是还是为40。是不是好看一下行框，行内框现在没多少。行内框现在为多少，50吧，好，而且我们说现在是不是页面上面只有一个什么。是不是现在只有一个元素啊，好，那现在这个整行的行框应该有多少？也是50吧，最终这个外面这个D是不是应该被乘的差不多为50左右。

是不是50啊，正好为58，而且你有没有发现现在50减40是不是还剩下十啊，你看是不是两边平均分配的。来看两边的几位多少，是不是分别都为？杜威武啊。是不是都都为五啊，能不能解好，这边告诉大家一个结论，什么样的结论好，我在这边写一下。好在前端，在前端开发中，好我们说什么。如果要处理大量的。文本建议把行高设置。成，建议把行高有设置的。

要比字体大好，为什么？如果你这个航高比比字体小，各个浏览器渲染是都比较诡异，刚刚是不是看到我们自己做这个行方居然被称成了26啊，毫无毫无章法可言，能明白吗？是，但凡你的行高只要比你的字体大小来的大，那规则都是比较统一的，怎么办？行高超出自体大小的部分会不会干嘛平均分配到两边，只不过分配多少？是这个30吗？是50减去30吗？并不是看你的内容去的高度懂不懂，那内容区高度看看浏览器怎么渲染的，一般的话是干嘛，一般的话是有一个默认很高的懂不懂，一般都是你原来的这个方程size的1.4倍左右，能理解吗？OK，所以说干嘛，最终这个两边分配到的这个距离到底有多少，是不是跟你的行高跟。

内容确实有关系的，而且我们说建议以后如果要处理文本的时候，要把行高设计的要比字体来大。大对不对，而且这个行高具体设置多少你不用管，我们可以给你看一张你们以后会遇到的设计图。好，看一下这地图。好，打开我的地盘。好，打开D盘，好，D盘这边有个库，库这边有一个1013好c resource。有标注图。好，我把这个先关掉。好好，大家来看。只要是设计图上面，你看但凡有文字啊，会不会给你标行高。因为大家没有学过这种什么，就是UI啊，也没有对什么对这种美感啊什么，可能没有太大的追求，是不是好，所以才来了上硅谷是不是好，那这一块干嘛？行高这个东西其实是UI在设计上会给你完完全全标出来的，懂不懂你只需要如果没有给你标出来，可能去些小公司他不会给你标出来，你也得知道怎么去量行高一般量行高，量行高怎么量。

基线到基线之间的距离吗？能明白吧？还告诉大家一种量法，你可以这么量。哎，我是不是刚关了，你可以干嘛，直接从什么从一个文字的顶部量到下一个文字的顶部，这也是算行高法值是不是都是一样的，从一个顶线量，量到另外一个顶线是不是都是一样的？好，这也可以量出行高来，那么你讲好，那其实行高这块你就知道。知道一件事情，什么事情我们在处理的时候，在我们编码的时候，行高要指定的比自己的方向要来的大，而且不能只大一点点，应该要大差不多。1.5倍左右，能不能理解啊，这个时候整个渲染才是比较规矩的，能能理解吗？就其他如果你航国比自己大家小啊，这种情况你不要考虑了，特别复杂，那么那么你讲，所以说其实我们整个什么，整个W3C知不知道这个事情，他也知道这个事情，所以说干嘛来看一下，好那我们讲完这么多航高相关这些东西，我们再来看一下什么这个航高好，那这些东西我晚晚上会会过来讲啊好，我们只要看一下航高这个继承好，航高里面有个东西叫做航高因子。

某该属性应用这个值是什么意思啊？比如说你现在如果来指定线行高是不是，你如果在这边的话，不用PX来指定，你直接指定成一代表什么意思啊？代表你这个行高是你方的size子的一倍。能理解吗？我们其实在前端编码的时候，我们全局初始化的时候，我们会来个CSS法，CSS里面它通常会把全局的所有的航高都指定成。一也就跟你的方程向式一样大吧，然后你在编码的时候在干嘛，自己去一个一个的去调行号，能理解吧，这个时候干嘛，比如说我们全屏是不是指定为一啊，都是30啊，然后你拿到设计的时候，上面是不是给你标出来你这个航高，航高应该是为多少，你再把这个行高给它改掉，能理解吗？比如说是58的就改成58，你没有，可是全局上来时候都会干嘛，做一个初始化工作，把这个行高调起来。

一能不能理解，我们可以来看一下我们的CSS下的。好，找到我们地盘。Code code的里面有一个1013，要还是刚刚那个，呃，Start里面有个静态资源，好把这个东西贴出来的CTRLC找去，找一个站点，好随便找一个CSS的格式化，站点，CSS格式化。好，在线不是画代码，好把C3直接贴进来，好大家看最终在这边找找有没有好报。你看玻璃上面是不是把行高统一制成了一样，好，那这先记住这个东西为什么去这么去设置，晚上我们再过来讲好不好，OK，好，这个时候我们在这一块的话，其实把一些行高的基本的一些东西全部讲完了啊好。