CSS基础

问答

• line-height有什么作用?
• 如何去查CSS熟悉的兼容性？比如inline-block哪些浏览器支持？
• a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开链接?
• display: none , visibility: hidden, opacity:0 有什么作用？有什么区别？
• 如何去除 a 链接的默认样式？直接在 a 链接父容器添加颜色，能否基础到当前 a 链接上？

1. line-height有什么作用？

line-height
: 类似Word的行间距，设置字体所占的行高度，当line-height:2;的时候，这行文字所占的高度是这行文字本来高度的两倍，文字在行中居中，上下用空白占据。如下就是line-height:2的时候边框被上下撑开半个字体行高。

line-height可以方便的在一个较小的块中进行垂直居中。比如用div设置一个按钮，
使用text-align可以设置水平居中，将line-height=height就可以使单行文字在这个块内垂直居中。

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

可以使用caniuse网站，
inline-block可以在IE8、IE9中使用，不兼容IE8之前的版本。一般查看兼容性的时候，重点关注的是IE的兼容，因为IE的升级进展相对其他浏览器比较缓慢。

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

• a 标签是用来编写超链接的，类似这样的功能

  • href：设定超链接的目标地址
  • title: 当鼠标移动到超链接上的提示性说明
  • targe: 设定打开超链接的方式

title的作用是提示说明, alt是altermate text的缩写，作用是在无法显示的图像里的替换文字
用来解释这个图片本来的样子。

通过定义target来实现新窗口打开连接：
target有4个保留目标，引用自w3cschool

_blank
浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self
这个目标的值对所有没有指定目标的 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 标签中的 target 属性一起使用。
_parent
这个目标使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
_top
这个目标使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

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

display: none
: display 属性规定元素应该生成的框的类型,display: none 的这个元素将不会被显示。

visibility: hidden
: visibility 属性规定元素是否可见。visibility: hidden是让元素不可见。

opacity:0
: opacity是设置元素的透明度，opacity:0是指透明度为0

区别：display:none属性会不展示且脱离了文档流，而visibility:hidden和opacity:0仍在文档流之中，只是看不见，所在的位置都在；display:none和visibility;hidden自身所绑定的事件将不会被触发，而opacity:0除了透明度为0，其他功能属性事件都与正常元素没有区别。

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

不能，只能通过指定a标签的形式，定义a的样式。