1.line-height有什么作用?
line-height是行高的意思。具体指两行文字基线之间的距离。
line-height有几种表示方法：normal、px/em、百分值、数值和inherit（继承）。
可以看一个例子，体会这几种表示方法的不同
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
font-size: 16px;
line-height: XXX; <!--这里设置不同的line-height-->
}
h1 {
font-size: 32px;
}
p {
font-size: 16px;
}
#footer {
font-size: 12px;
}
</style>
</head>
<body>
<h1>关于line-height<br/>关于line-height</h1>
<p>行高有5种不同的表示方法。<br/>行高有5种不同的表示方法。</p>
<div id="footer">
这五种方法有什么不同呢？<br/>这五种方法有什么不同呢？
</div>
</body>
</html>
line-height: normal;相当于line-height:1.2,效果如下：
line-height: 20px;,效果如下：
line-height: 150%;，效果如下：
line-height: 1.5;，效果如下：
用
line-height: inherit时就继承了上级元素的属性。在
h1 {
font-size: 32px;
}
中加入line-height: inherit;,发现和上面几种不加line-height: inherit;的情况一样，因为本身它们都有继承性。
可以看出来，line-height: 20px;和line-height: 150%;都继承了<body>的行高，造成不同大小的文本拥挤或者稀疏。line-height: normal;不如line-height: 1.5;是随着相应的字体大小变化，看上去效果更好。相比较，normal不可以随意改变数值，效果看上去也比较拥挤，所以，数值这个表示方法最好。
一般设置字体，可以写成
font: 12px/1.5 "Microsoft YaHei",sans-serif,其中/后面的1.5表示行高。
line-height还有一个重要用途，可以用于让单行文字文字垂直居中。设置line-height高度等于外部标签盒子高度，可以使文字垂直居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
p {
height: 100px;
line-height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>垂直居中</p>
</body>
</html>
效果：
2.如何去查CSS属性的兼容性？比如inline-block哪些浏览器支持？
可以使用can i use网站查看。例如inline-block，查询到的结果如下图所示：
主要是看IE浏览器的支持性，发现从IE8以后开始支持inline-block。
3.a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开链接?
<a>标签定义超链接，用于从一个页面链接到另一个页面。
href属性是<a>标签最重要的属性，定义链接指向的页面。
title属性显示链接的额外信息，当鼠标悬停在链接上时，会显示title属性的值。
比如链接
<a href="http://www.baidu.com" title="超链接">这是超链接</a>
当鼠标悬停在超链接上时，如下图所示：
target属性规定在何处打开链接文档。主要有以下属性值:
_blank 在新窗口打开被链接文档。
_self 默认，在相同的框架打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
_framename 在指定框架中打开被链接文档。
其中，_blank最常用，用于在新窗口打开链接。
title属性为设置该属性的元素提供建议性的信息。title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签中。title属性可以为链接添加描述性信息，给浏览者关于链接的提示。还可以为图像提供额外的说明信息，比如日期或者其他非本质的信息。
alt属性只可以用在img、textarea、input标签中。用于在图片无法显示时，给用户提供关于图像的文字说明。和title不同，alt属性是替代图片，而不是提供文字说明的。可以优化搜索引擎。在img、textarea、input标签中title、alt可以同时存在。
当遇到
<a>标签包围<img>标签时，显示的是<img>标签的title属性。<a href="b.html" title="你好"><img src="" alt="链接图片" title= "图片"></a>效果图：
要在新窗口打开连接，可以把title属性设置为_blank,
<a href="http:www.baidu.com" title="超链接" target="_blank">这是超链接</a>
4.display: none , visibility: hidden, opacity:0有什么作用？有什么区别？
display: none , visibility: hidden, opacity:0都可以隐藏页面上的元素。
display:none是把元素彻底隐藏，在html上不占据空间，如果该元素绑定了onclick事件，点击也没有响应。而且应用了display:none的节点的子节点也同样被隐藏，也没有办法显示出来。
visibility: hidden隐藏元素在html上占据空间，如果该元素绑定了onclick事件，点击没有响应。而且，子节点可以通过visibility：vsible显示出来。
opacity:0是设置透明度为零，只是肉眼看不到节点了而已，节点既占据空间，当该元素绑定了onclick事件时，点击也有响应。
5.如何去除 a 链接的默认样式？直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？
a链接默认有下划线，默认点击链接后链接字体颜色改变。
去除a链接的默认样式，可以在css中设置a的样式：
a {
color: red; /* 设置链接颜色一直是红色*/
text-decoration: none; /*设置链接没有下划线*/
}
直接在a链接父容器添加颜色，不能继承到当前a链接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
color: #0f0;
font-size: 20px;
font-family: "黑体";
}
</style>
</head>
<body>
<div>
<p>百度一下</p>
<a href="http:www.baidu.com" title="超链接" target="_blank">这是超链接</a>
</div>
</body>
</html>
a链接的颜色不受影响
** 版权归本人和饥人谷所有，转载请注明出处。 **
