HTML知识点3

问答

一、line-height有什么作用?

• 在CSS，line-height被用来控制行与行之间的垂直距离。line-height 属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
• 行高还有一个特性，叫做垂直居中性，这一重要的特性可以用来实现文字或图片的垂直居中对齐。
• 行高在文章显示中的应用，不会出现文字重叠的情况。
• 使用行高代替高度避免haslayout。IE6，IE7下，类似inline-block属性的元素里如果有block属性的元素，如果该block haslayout，则该标签会冲破外部inline-block的显示而宽度100%显示。从使按钮自适应文字大小的效果失效，解决方法就是使用line-height代替height。

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

可以通过can I use查询

Paste_Image.png

inline-block支持的浏览器有：

Paste_Image.png

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

href、title、target是a标签的属性。 href 属性，它指示链接的目标。 title 属性规定关于元素的额外信息。这些信息通常会在鼠标移到元素上时显示一段工具提示文本。target 属性规定在何处打开链接文档。
title 和 alt有什么区别：alt是html标签的属性，而title既是html标签，又是html属性。

• img标签的alt属性是在图片因浏览器兼容、加载失败或地址出错等原因而不显示时为浏览用户所做的代替语言，其性质为该图片的代替;只能用在img、area和input元素中（包括applet元素）。alt是替代图像作用而不是提供额外说明文字的。
• img标签的title属性，是表达该图片(img标签)的一些额外信息，比如日期或者其他非本质的信息。其性质为一种备注或者注释，鼠标过去时显示该段文字。它除了可以用在base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。

新窗口打开链接：新窗口打开

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

display: none：隐藏对象，不占据空间，会改变页面布局。
visibility: hidden：隐藏对象，占据空间，不会改变页面布局，但是不会触发该元素已经绑定的事件。
opacity:0：将元素隐藏起来，但不会改变页面布局，并且，如果该元素已经绑定一些事件，如click事件，那么点击该区域，也能触发点击事件。

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

text-decoration: none去除a链接的默认样式。
直接在 a 链接父容器添加颜色，不会继承到a链接上，由于css层叠，a元素继承自div的样式（color:red）被浏览器的a元素的默认样式给覆盖了。
浏览器本身对 a 标签有默认样式，直接对 a 标签指定从父级 div 继承下来的优先级没有选择器高，覆盖不到。

Paste_Image.png

结果为：

Paste_Image.png

Paste_Image.png