任务6-HTML3

1.line-height有什么作用？

所谓的行高，是指文本行基线之前的距离。在理解这句话之前先了解几个基本知识：

顶线、中线、基线、底线

基线介绍

从上到下四条线分别是顶线、中线、基线、底线，很像学英语字母时的四线三格，vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。。

注意,基线不是最下面的线，最下面的是底线。

行高、行距与半行距

行高

行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。

行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。

半行距是行距的一半，即区域3垂直距离/2，区域1，2，3，4的距离之和为行高，而区域1，2，4的距离之和为字体size，所以半行距也可以这么算：（行高-字体size）/2

内容区、行内框、行框
内容区：底线和顶线包裹的区域，即下图深灰色背景区域。

内容区
行内框，每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，在没有其他因素影响的时候（padding等），行内框等于内容区域。
设定行高时行内框高度不变，半行距（深蓝色区域）分别增加/减少到内容区域的上下两边。
行框（line box），行框是指本行的一个虚拟的矩形框，是浏览器渲染模式中的一个概念，并没有实际显示。
行框高度等于本行内所有元素中行内框最大的值（以行高值最大的行内框为基准，其他行内框采用自己的对齐方式向基准对齐）加上行距(line-height 与 font-size 的计算值之差)。
当有多行内容时，每行都会有自己的行框。

行框

基本概念搞明白了我们就可以说说line-height属性了。

定义：line-height 属性设置行间的距离（行高）。

说明：不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

可能的值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

line-height的问题讨论：
1.行高和继承：当一个块级元素从另一个元素继承line-height时，问题会变得复杂，line-height值从父元素计算，而不是在子元素上计算。



 

这个段落的"font-size"是18px，但是继承的"line-height"是10px，这会造成文本重叠。

line-height小，font-size大会导致多行文本重叠

对于这种line-height太小的问题，一种解决办法是为每个元素设置一个显示的line-height，但是这种方法显然不实用，更好的办法使用数值，由它来设置缩放因子，因为缩放因子将使继承值而不是计算值，这个数值会应用到该元素及其所有子元素，所以各元素都根据其自己的font-size计算line-height




这个段落的"font-size"是18px，继承的"line-height"的缩放因子是1.5，那么它的"line-height"值就是18*1.5=27px。

使用缩放因子

所以尽量使用数值（number）来设置line-height。

2.垂直居中：

单行文字
只需要把height的值与line-height的值设置为同样大小就可以实现单行文字的垂直居中。

单行文字垂直居中

多行文字
使用老师在课程中的方法，利用 display:table-cell和表格的vertical-align:middle来实现多行文字的垂直居中。

多行文字垂直居中

另外还有好几种方法可以参考这篇文章大小不固定的图片、多行文字的水平垂直居中。

参考：博客CSS行高,《CSS权威指南》第三版

2.如何去查CSS属性的兼容性？比如inline-block哪些浏览器支持？

可以去Can I Use查询CSS属性的兼容性。

inline-block兼容性

3.a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开链接?

a标签定义超链接，用于从一张页面到另一张页面。
href是a元素最重要的属性，用于链接指向的页面的 URL。
title属性是提供关于链接的信息，当鼠标放在链接上时，会显示title里面的内容。
target属性从何处打开链接文档。
title和alt的区别
使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明，它只能用在img、area和input元素中，是用来替代图像而不是提供额外说明文字。
title属性是提供非本质的额外信息，比如在图像可见时对图像的描述(鼠标放在图片时即会显示)。它可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。
如何新窗口打开链接
使用target的值_blank,例如：。

4. display: none, visibility: hidden, opacity:0 有什么作用？有什么区别？

参考stackoverflow上面的回答。
display: none, visibility: hidden和opacity:0都会让元素隐藏，具体区别如下：

display:none 显示为无，所占据的空间会消失，会改变页面布局，就好像在页面中把这个元素删除了一样。
visibility:hadden 把该元素隐藏起来，但是所占据的空间还在，不会改变页面布局，但是不会触发该元素以及绑定的事件。
opacity：0 使元素透明度为0就好像消失一样，但是所占据的空间还在，不会改变页面布局，如果该元素以及绑定了一些事件，如click事件，keypress事件，也能触发该事件。

5.如何去除 a 链接的默认样式？直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？

去除a链接的默认样式代码：

a {
   text-decoration: none;
   }

去除默认链接样式

直接在 a 链接父容器添加颜色，不会继承到当前 a 链接上。但是其他的属性比如字体大小会继承，如果想要改变a链接的颜色，可以直接选中然后添加颜色属性。

a链接颜色