HTML Basic II-Assignment

1. Q&A

---

** 1.line-height有什么作用?**

• 文本层次解析

---

• 行高（line-height）
  所谓的行高就是等于行与行间的基线距离的文本高度，具体演示如下：

行高的作用之一是用于文本的垂直居中——设置line-height=height

---

补充知识

• 内容区域

---

• 行内框(inline box)
  border=10px和line-height=110px下的行内框

border=10px和line-height=90px下的行内框

【tip】

• 行内框是无法直接显示的，只能通过border侧面烘托出行内框区域
• 行内框的高度就是行高
• 经笔者亲测，当只设置字体高度而不设置行高的情况下，原则上行内框是等于字体高度的，但是在chrome浏览器会出现行内框增大的现象，具体解释可能第二张图：

另一种解释是：浏览器在显示的时候往往会有自己的表现形式，例如在Opera内，行高将按照CSS定义的将行距除以2增加到内容区域的上下两边，而IE和Firefox则不是完全平分

---

• 行框(line box)
  • 行框就是所有行高当中的最大值构成的行内框
    
    

---

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

• 可以登录到caniuse.com，输入相关的CSS属性就可以查看浏览器的兼容性

如上图所示，inline-block这一CSS属性的主流pc端和移动端的浏览器的兼容情况一一罗列出来了。

---

3.a 标签的href, title, target 是什么？ title 和 alt有什么区别？如何新窗口打开链接?
Html的a标签是定义超链接，用于从一个页面跳转到另一个页面

• href规定链接的目的url，一般来说：
  • 未点击的链接呈现蓝色带下划线
  • 鼠标放在链接上呈现红色
  • 点击链接后呈现紫色带下划线
• title规定可以让鼠标悬停在超链接上的时候，显示该超链接的文字注释
• target规定链接跳转页面的方式，默认是在当前页面跳转，还包括：
  • _blank：跳转到新建页面
  • _self:在当前页面跳转
  • _parent:在父框架集中打开被链接文档
    _ _top:在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架
  • framename:在指定的框架中打开被链接文档
• tiitle规定鼠标浮动到链接时显示的提示信息，而alt是但页面渲染失败时的提示信息
• 新窗口打开链接方法：

---

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

• display:none是最常用的隐藏元素的方法
  • 元素使用该属性将：不占据空间，无法点击；
  • 元素在页面上将完全消失；
  • 元素原本占据的空间被其他元素所占据，从而导致
    浏览器的重排和重绘；

上图分别是display:none和未设置display:none的效果图

• visibility:hidden也是常用的隐藏元素的一种方法
  • 元素在页面消失，但仍然占据空间
  • 只导致浏览器重绘不导致重排
  • 适用于那些元素隐藏后不希望页面布局会发生变化的场景

上图的第二个红色框表示visibility:hidden，此时点击第二个红色框，控制台是没有信息输出的，因为按钮及其功能已经隐藏

• opacity:0表示元素的透明度是完全透明，起到一种隐藏效果
  • 与visibility:hidden类似，元素在页面消失且仍然占据空间
  • 但按钮及其功能仍然存在，只是肉眼看不见

上面第一个红色框使用的是opacity:0，在点击第一个红色框，控制台是可以输出信息1的

---

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

• 无法继承，这和CSS样式层叠时的优先级有关，a标签一般会有默认颜色（蓝色）或是通过a:link{color:颜色值}去设置a标签的颜色，当父容器再次设置时，会被a标签中设定的颜色所覆盖；
• 方法如下图所示：

---

2. code

• 代码作业

---

参考资料

• css属性行高line-height的用法详解
• 深入理解CSS中的行高
• a标签的title属性
• CSS“隐藏”元素的几种方法的对比
• 您可能不知道的CSS元素隐藏“失效”以其妙用