1.line-height 有什么作用？
line-height 属性设置了行间的距离（即行高），不允许使用负值。“行高”指一行文字的高度，指两行文字间基线之间的距离，行高的表示方式有五种分别为：px/em，normal，百分值，数值以及 inherit 值。
① px/em 不推荐。文章字体有大有小i，使用 px 定值，由于继承性，无法实现根据文字大小自动调整间距。
② normal 不推荐。一般浏览器的 normal 值在1~1.2之间，而文章显示最佳为650像素，1.5倍行距，所以并不合适。
③ 百分值 也是有继承性的，但是可以通过通配符来实现文件间距自动适应于文字大小。例如：<code>.article_box *{line-height:150%;}</code>
④ 数值 推荐。百分值与数值的区别在于继承性，使用百分值会计算 line-height 的值，然后以 px 像素为单位继承下去，而数值则是先继承数值本身的数，到了该标签再去计算 line-height 的像素值。例如：.article_box{line-height: 1.5;}
行高具有垂直居中性，line-height 的最终表现是通过 line boxes 实现的，但无论 line boxes 所占据高度是多少，其占据空间都是与文字内容公用水平中垂线的。这边我主要介绍两种图片垂直居中的方法，而还有几种方法可以在该网页找到方法：大小不固定的图片、多行文字的水平垂直居中
① display:table-cell 和文字大小控制居中
这也是若愚老师在视频中介绍的方法，其原理就是让我们的 div 以表格方式来进行渲染。而默认表格方式的目的在于，垂直居中的 vertical-align:middle在表格中默认就有，而我们放入图片要运用到水平居中与垂直居中。
② display:inline-block 和文字大小控制居中
这种方式我们将使用 a 标签来进行，a 标签默认 inline 属性设置为 inline-block 属性，这样 a 标签既支持宽度有支持 vertical-align:middle，配合 img 的 vertical-align:middle 就可以实现图片的水平垂直居中。
2.如何去查 CSS 属性的兼容性？比如 inline-block 哪些浏览器支持？
CSS属性的兼容性我们可以通过 Can I use 这个网站去查询，我们举一个 inline-block 的例子，如下图：
caniuse.png
3. a 标签的 href, title, target 是什么？ title 和 alt 有什么区别？如何新窗口打开链接?
① a 标签定义超链接，用于从一张页面链接到另一张页面。href 规定链接指向的页面的 URL；title 属性常与 form 以及 a 元素一同使用，以提供关于输入格式和链接目标的信息；target 规定在何处打开链接文档。
② title 和 alt 有什么区别？（资料摘自html中的alt和title用法区别）
alt 是 html 标签的属性，而 title 既是 html 标签，又是 html 属性。
title 标签就是 <title></title> 这对标签。title作为属性时，用来为元素提供额外说明信息。给超链接标签a添加了title属性，把鼠标移动到该链接上面是，就会显示title的内容，以达到补充说明或者提示的效果，当a标签内嵌套img标签时，起作用的是img的title属性。
alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意，alt是替代图像作用而不是提供额外说明文字的。
③ 如何新窗口打开链接？
使用 target 即可在新窗口打开链接，例：<a href ="#" target= "-blank">
4. display: none, visibility: hidden, opacity:0 有什么作用？有什么区别？
display:none 和 visible:hidden 以及 opacity:0 都能把网页上某个元素隐藏起来。但它们三者有区别：
display:none 是不为被隐藏的对象保留其物理空间，会改变页面布局即该对象在页面上彻底消失就像删除了一样。
visible:hidden 使对象在网页上隐藏，但该对象在网页上所占的空间没有改变，不会改变页面布局，但是不会触发该元素已经绑定的事件。
opacity:0 只是使得元素变得透明，但不会改变页面布局，若该元素已经绑定一些事件，那么点击该区域，也能触发点击事件。
我们可以很直观地从下图看到他们的不同区别：摘自 stackoverflow
区别.png
5.如何去除 a 链接的默认样式？直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？
a 链接的默认样式：（摘自w3school）
a链接默认样式.png
①去除下划线：在 css 的 a 标签中输入
text-decoration:none;即可。②更改未被访问时的颜色：在 css 的 a 标签中输入 color 更改即可。
③更改已被访问的颜色：在 css 中设置一个
a:visited中设置颜色即可改变。④更改活动链接时的颜色：在 css 中单独设置一个
a:hover，在其中设置颜色即可变色，其中 css3 中新增加有个transition:color 0.3s;这个属性添加在 css 中的 a 标签中即可实现活动链接的颜色改变时间，即渐变过程。
直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？
<!DOCTYPE html>
<html lang="en">
<head>
<title>task6</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
.div1 {
color: red;
}
</style>
</head>
<body>
<div class="div1">div1
<p class="" p1>我是段落</p>
<a href="#">我是链接1</a>
</div>
<a href="#">我是链接2</a>
</body>
</html>```
这个代码我们可以在浏览器得到如下结果，可以看出直接在 a 链接父容器添加颜色，不能继承到当前 a 链接上
但我们将代码改成这样：
<!DOCTYPE html>
<html lang="en">
<head>
<title>task6</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style type="text/css">
.div1 {
color: red;
}
a {
color: pink;
}
</style>
</head>
<body>
<div class="div1">div1
<p class="" p1>我是段落</p>
<a href="#">我是链接1</a>
</div>
<a href="#">我是链接2</a>
</body>
</html>```
就可以得到如下，我们可以看到链接的颜色变化了，所以说我们要改变 a 链接的颜色，得把 a 单独列出来进行编辑。
a链接变色2.png
网友评论