任务6-HTML3
1. line-height有什么作用?
line-height指定一行的行高,使用后会使文本在上下居中。 line-height的赋值有两种方式,无单位的数字表示倍数。以px为单位的数字指定行高的像素值。当样式里指定了一行的行高像素时，line-height应该等于指定的像素值。否则会造成文本不居中的情况。
要想更深入的了解它，就让我们先来了解几个基本知识：
顶线、中线、基线、底线
四线图
从上到下四条线分别是顶线、中线、基线、底线，很像才学英语字母时的四线三格，我们知道vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。
尤其记得基线不是最下面的线，最下面的是底线。
行高、行距与半行距
上图中两条红线之间的距离就是行高（line-height），上一行的底线和下一行的顶线之间的距离就是行距，而同一行顶线和底线之间的距离是font-size的大小，行距的一半是半行距，半行距、font-size、line-height之间的关系看图片的右下角就一目了然了~
半行距 = （line-height - font-size）/2
当然，半行距也可能为负值（当line-height < font-size），这时候两行之间就会重叠，如下图所示：
半行距
4种box
要说的4种盒子分别是：inline box、line box、content area、containing box ~
inline box (行内框) 每个行内元素会生成一个行内框，行内框是一个浏览器渲染模型中的一个概念，无法显示出来，行内框的高度等于font-size，设定line-height时，行内框的高度不变，改变的是行距。
line box （行框） 行框是指本行的一个虚拟的矩形框，由该行中行内框组成。行框也是浏览器渲染模式中的一个概念，无法显示出来。行框高度等于本行中所有行内框高度的最大值。当有多行内容时，每一行都有自己的行框。
content area （内容区） 内容区是围绕着文字的一种box，无法显示出来，其高度取决于font-size
和padding
containing box containing box 是包裹着上述三种box的box，
4种box
基本概念搞明白了我们就可以说说本文的主角line-height属性了。
取值
定义：line-height 属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
一般情况下，浏览器默认的line-height为1.2。可以自定义line-height 覆盖这个初始值，那么该怎样设置line-height呢？有以下5种方式：
| 值 | 描述 |
|---|---|
| normal | 默认。设置合理的行间距。 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距，即number为当前font-size的倍数。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
貌似很简单，但感觉没什么用出的样子，但是line-height是个可继承属性，它的继承规则有那么一点点复杂。
继承
需要提前说明的是：line-height的大小与font-size息息相关，除了指定line-height为多少px，剩下的设置方式都是基于font-size算出来的。 下面逐个讲一讲~
-
inherit 这个其实没什么说的，继承父元素line-height的值，所以父元素的是多少就是多少。 如果其后代元素不设置line-height 的话，也会是这个值。
-
length 假设设置 line-height 为20px，那么该行的该行的行高就是20px，与 font-size 无关，不会随着 font-size 做相应比例的缩放。 这个长度值（20px）会被后代元素继承，所有的后代元素会使用这个相同的、继承的 line-height (20px)，除非后代元素设定 line-height 。
-
百分比 假设自身的 font-size 为16px，line-height 设为120%。那么其行高为：16 * 120% = 19.2px。即 line-height 是根据自身的 font-size 计算出来的。 子元素会继承父元素的line-height，那么它继承的是什么呢，百分比（120%）？还是19.2px？ 答案是后者，19.2px，即父元素line-height
计算后的最终值。 -
normal line-height 设置为 normal 的时候，行高取决于浏览器的解析，一般是1.2。 与前面不同的是，line-height 设置为 normal 的元素，其子元素不再继承其line-height计算后的最终值，而是根据子元素自身的 font-size 进行计算。见下表~
| element | font-size | line-height | 计算后的line-height |
|---|---|---|---|
| body | 16px | normal | 16px * 1.2 = 19.2px |
| h1 | 32px | normal | 32px * 1.2 = 38.4px |
可见，子元素随着自身 font-size 的大小而做相应比例的缩放。
- 纯数字 如果既想要 normal 的灵活，又想设置一个自定义的值，那就要用 纯数字 啦~ 纯数字方式与 normal 唯一的不同，就是数值的大小，纯数字可以自己随意设定，而 normal 的值是浏览器决定的。
| element | font-size | line-height | 计算后的line-height |
|---|---|---|---|
| body | 16px | 1.5 | 16px * 1.5 = 24px |
| h1 | 32px | 1.5 | 32px * 1.5 = 48px |
其后代元素会继承这个数值（比如 1.5），然后根据自身的 font-size 算出自身的line-height。
总结如下：
| 设置方式 | line-height | 计算后的line-height | 子元素继承的line-height |
|---|---|---|---|
| inherit | 父元素的line-height值 | 不用计算 | 父元素的line-height值 |
| length | 20px | 不用计算 | 20px |
| % | 120% | 自身font-size (16px) * 120% = 19.2px | 继承父元素计算后的line-height值 19.2px，而不是120% |
| normal | 1.2 | 自身font-size (16px) * 1.2 = 19.2px | 继承1.2，line-height = 自身font-size(32px) * 1.2 = 38.4px |
| 纯数字 | 1.5 | 自身font-size (16px) * 1.5= 24px | 继承1.5，line-height = 自身font-size(32px) * 1.5 = 48px |
那么，哪一种是最好的方式呢？ 一般来数，设置行高的值为 纯数字 是最推荐的方式，因为其会随着对应的 font-size 而缩放。
2. 如何去查CSS属性的兼容性？比如inline-block哪些浏览器支持？
可以通过这个caniuse网站来查询。
inline-block
3. a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开链接?
a标签的定义和用法
a标签定义超链接，用于从一张页面链接到另一张页面。
a 元素最重要的属性是 href 属性，它指示链接的目标。
在所有浏览器中，链接的默认外观是：
连接的默认外观
提示和注释
提示：如果不使用 href 属性，则不可以使用如下属性：download, hreflang, media, rel, target 以及 type 属性。
提示：被链接页面通常显示在当前浏览器窗口中，除非您规定了另一个目标（target 属性）。
提示：请使用 CSS 来设置链接的样式。
href属性
a 标签的 href 属性用于指定超链接目标的 URL。
href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。如果用户选择了 a 标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。
- 语法：
<a href="value">
- 属性值：
| 值 | 描述 |
|---|---|
| URL | 超链接的 URL。可能的值：绝对 URL - 指向另一个站点（比如 href="http://www.example.com/index.htm"） 相对 URL - 指向站点内的某个文件（href="index.htm"） 锚 URL - 指向页面中的锚（href="#top"） |
title属性
使用 title 属性，可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释。
<a href="http://www.opendir.cn" title = "中文开放目录">分类目录</a></html>
如果希望注释多行显示，可以使用"
";作为换行符。
<a href="http://www.opendir.cn" title = "中文开放目录 http://www.opendir.cn">分类目录</a>
target属性
a标签的 target 属性规定在何处打开链接文档。
如果在一个a标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。
- 语法：
<a target="value">
- 属性值：
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
title和alt属性的区别
- title属性：title是为该属性的元素提供建议性的信息，它可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。
当鼠标放置在选定元素时，大部分可视化浏览器会显示title的提示信息。
title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。 - alt属性：alt属性只能用在img、area和input元素中，它是为了给那些不能看到文档中图像的浏览者提供文字说明信息，在图片的位置显示内容。
如何新窗口打开链接
利用a标签中target的属性值"_blank"即可实现。
<a href="#" target="_blank" title="在新窗口代开链接">链接</a>
4. display: none , visibility: hidden, opacity:0 有什么作用？有什么区别？
他们的作用都是让元素消失，但是在渲染效果上有区别：
display: none：隐藏元素，并且脱离文档流，下面的元素会上移，占据其位置。文档的布局发生了变化。
visibility: hidden：隐藏元素,但是并没有脱离文档流，渲染的时候为空白，它所在的位置仍然存在，下面的元素不会上移。文档的布局没有发生变化。也不会触发该元素以及绑定的事件。
opacity:0：隐藏元素，和visibility：hidden的作用相似，隐藏元素。元素占据的位置仍然保留但不会改变页面布局。并且，如果该元素已经绑定一些事件，如click/keypress事件，那么点击该区域，也能触发点击事件的。
5. 如何去除 a 链接的默认样式？直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？
去除a链接的默认样式代码：
a { text-decoration: none; }
没加此样式text-decoration: none;之前：
代码
显示结果
加入此样式之后：
代码
显示结果
直接在 a 链接父容器添加颜色，不能继承到当前 a 链接上。除了颜色不继承，其他的都可以继承，比如字体大小。要实现对a链接颜色起作用，必须设置a。
如：将父元素的字体设置成20px，颜色为黄色，其代码和结果分别如下：
代码
显示结果
由此可以见，父容器的颜色没有被a链接继承过来。但是字体大小得以继承。
单独给a链接设置颜色，其代码和结果如下：
代码
显示结果
本教程版权归本人和饥人谷所有，转载须说明来源
