HTML3

本教程版权归小圆和饥人谷所有，转载须说明来源

问答

1. line-height有什么作用?

• 单行文字的垂直居中对齐：把line-height设置为您需要的box的大小可以实现单行文字的垂直居中。
• 多行文字的垂直居中：对于高度固定的div，里面文字单行或多行显示，可借助line-height实现垂直居中。
• 图片的垂直居中：在IE下使用font-size使图片垂直居中显示，Firefox，chrome等现代浏览器使用line-height配合img本身的vertical-align属性使垂直居中显示。（IE8浏览器和Opera浏览器除外）
• 文字间距自动适应于文字的大小：先继承1.5这个值，遍历到了该标签再去计算line-height的像素值。例如：.article_box *{line-height:1.5;},就不会出现文字重叠的情况了。
• 使用行高代替高度避免haslayout：使用height会使标签haslayout，而使用line-height则不会。

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

可在Can I use查询CSS属性的兼容性；
inline-block的兼容性如下图：

inline-block

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

属性	描述
href	规定链接指向的页面的 URL。
title	鼠标滑过链接时显示的文本。
target	规定在何处打开链接文档。

新窗口打开链接：target="_blank"

title 和 alt的区别

• alt是html标签的属性，而title既是html标签，又是html属性。
• title作为属性时，用来为元素提供额外说明信息。而alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。

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

• display: none：此元素不会被显示。
• visibility: hidden：此元素是不可见的。
• opacity:0：规定此元素完全透明。

区别

• display: none，把元素隐藏起来，并且会改变页面布局，可以理解成在页面中把该元素删除掉一样
• visibility: hidden，该元素隐藏起来了，但不会改变页面布局，但是不会触发该元素已经绑定的事件
• opacity: 0，该元素隐藏起来了，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件的

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

添加属性text-decoration: none;可去除默认样式；
颜色不能继承，但字体大小可以继承。