HTML基础知识3

GO GO

1.line-height的意思，line-height有什么作用?

• 答：line-height是一行文字的高度，具体来说是指两行文字间"基线(base line)"之间的距离。
  

  line-height.png

  作用?

• 是line-height撑开了div的高度而不是文字.
  
• 单行文字垂直居中，多行文字垂直居中，图片垂直居中。
  
• 另外使用行高代替高度可以避免haslayout.
  

  作用.png

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

  
  
• 答：可以在"caniuse"上查找CSS的兼容性。
  
• 在输入框中输入inline-block后按回车，就会返回inline-block来浏览器中兼容性的结果。可以看出inline-block兼容IE8, IE11, Chrome所有等。图中绿的就代表兼容，数字代表兼容的版本。
  

  inline-block兼容性.png

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

  
  
• (href)：href特性的值设定了链接的目标，即网站用户单击链接时所到达的页面地址。如果链接指向另一个网站，那么href特性值必须是一个网站的完整Web地址，也即是绝对URL。
  
• (title): 在元素中使用title特性来提供有关链接的附加信息。大部分浏览器在光标悬停的图像上以提示的方式显示title特性的内容。
  

  a title.png

• (target):链接的打开方式：
  1._blank 作用是点开超链接之后在新的窗口打开该超链接。
  2._parent 在父框架集中打开被链接文档。
  3._self 默认。在相同的框架中打开被链接文档。
  4._top 在整个窗口中打开被链接文档。

  title和alt的区别在于

  
  
• title是当鼠标悬停在该a标签上方时会显示的描述内容；
  
• alt是img标签必需的属性，当图片无法显示时的替代文本。alt的属性值为搜索引擎提供数据。
  

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

  属性/值	区别
  display: none	隐藏后元素脱离文档流，不占位置
  visibility: hidden	不可见，没脱离文档流，仍然占位置
  opacity:0	完全透明，未脱离文档流，仍然占位置

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

  
  
• 使用text-decoration: none; 可以去除a链接的默认样式。
  

  text-decoration none.png
  
  
• 直接在a链接父容器添加颜色， 不能继承到当前a链接，但是字体大小 能够继承。

  感谢观众

  

  新垣结衣.png

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