1.line-height有什么作用？
答： line-height 属性设置行间的距离（行高），不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
可能的值：
| 值 | 描述 |
|---|---|
| normal | 默认 |
| number | 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。 |
| length | 设置固定的行间距。 |
| % | 基于当前字体尺寸的百分比行间距。 |
| inherit | 规定应该从父元素继承 line-height 属性的值。 |
作用：
- 单行文字的垂直居中对齐：把line-height值设置为height一样大小的值可以实现单行文字的垂直居中；
- 多行文字的垂直居中：对于高度固定的div，里面文字单行或多行显示，字体大小有大有小的情况，设置font-size为0，line-height为所需要的高度，display属性为inline-block；
-
使用行高代替高度避免haslayout：在某些情形下，line-height可以和height互换，因为实现的效果一样。都能撑开一个高度，然而这两个css属性有一个较隐蔽的差异，就是使用height会使标签haslayout，而使用line-height则不会。
参考文档：css行高line-height的一些深入理解及应用、css行高line-height的用法
2.如何去查CSS属性的兼容性？比如inline-block哪些浏览器支持？
答：可以用 caniuse.com来查css属性的兼容性。
各大浏览器对inline-block属性的支持如下图：
QQ图片20160803141152.png
3.a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开链接?
- ** href** 属性用于指定超链接目标的 URL。href 属性的值可以是任何有效文档的相对或绝对 URL，包括片段标识符和 JavaScript 代码段。如果用户选择了 a 标签中的内容，那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档，或者执行 JavaScript 表达式、方法和函数的列表。
- title属性是鼠标悬停在超链接上的时候，显示该超链接的文字注释。
- target 属性规定在何处打开链接文档。其值与描述如下：
| 值 | 描述 |
|---|---|
| _blank | 在新窗口中打开被链接文档。 |
| _self | 默认。在相同的框架中打开被链接文档。 |
| _parent | 在父框架集中打开被链接文档。 |
| _top | 在整个窗口中打开被链接文档。 |
| framename | 在指定的框架中打开被链接文档。 |
- title 和 alt的区别： alt和title都是提示性语言属性。title属性是鼠标滑过时显示的文字提示，alt属性是图片在无法正确显示的时候起到文本替代的作用；title可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签，alt属性只能用在img、area和input元素中。
- 如何新窗口打开链接：
<a href="#" target="_blank">在新窗口代开链接</a>
跳转到锚点：
1.id定位，这样的定位可针对任何标签定位
<a href="#here">锚点</a>
<p id="here"></p>
2.使用name定位，name属性只能针对a标签来定位，而对div等其他标签就不能起到定位作用
<a href="#f2"></a>
<br/><br/><br/>
<a name="f2">111</href>
跳转到另一个页面的锚点：
1.在test1.html创建锚 <a name="test">锚</a>
2.在test2.html设置好链接 <a href="test1.html#test">连接到另外页面的锚的超链接</a>
4.display: none, visibility: hidden, opacity:0有什么作用？有什么区别？
答：三者的主要作用是隐藏元素。
区别：
-
display: none
1）、浏览器不会生成属性为display: none;的元素；
2）、display: none;不占据空间，所以动态改变此属性时会引起重排；
3）、display: none;不会被子类继承；
4）、display属性，transition对它无效。 -
visibility: hidden
1）、元素会被隐藏，但是不会消失，依然占据空间；
2）、visibility: hidden会被子类继承，子类也可以通过设置visibility: visible;来显示；
3）、visibility: hidden;不会触发该元素已经绑定的事件；
4）、visibility: hidden;动态修改此属性会引起重绘；
5）、visibility,transition对它无效。 -
opacity:0
1）、opacity=0只是透明度为100%,元素隐藏，依然占据空间；
2）、opacity=0会被子元素继承,且，子元素不能通过opacity=1，进行反隐藏。
3）、opacity=0的元素依然能触发已经绑定的事件；
4）、opacity,transition对她有效。
参考文档
5.如何去除 a 链接的默认样式？直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？
答：可以用以下代码去除a 链接的默认样式：
text-decoration: none;
color: #333;/*字体颜色可自定义*/
直接在 a 链接父容器添加字体颜色，不能继承到当前 a 链接上。（亲测是这样的）
网友评论