HTML基础知识3

line-height.png

<h3>作用?</h3>

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

作用.png

<h3>2.如何去查CSS熟悉的兼容性？比如inline-block哪些浏览器支持？</h3>
<li>答：可以在<a href="http://caniuse.com/">"caniuse"</a>上查找CSS的兼容性。
<li>在输入框中输入inline-block后按回车，就会返回inline-block来浏览器中兼容性的结果。可以看出inline-block兼容IE8, IE11, Chrome所有等。图中绿的就代表兼容，数字代表兼容的版本。

inline-block兼容性.png

<h3>3. a标签的href,title, target 是什么？title 和 alt有什么区别？如何新窗口打开链接?</h3>
<li>(href)：href特性的值设定了链接的目标，即网站用户单击链接时所到达的页面地址。如果链接指向另一个网站，那么href特性值必须是一个网站的完整Web地址，也即是绝对URL。
<li>(title): 在<a>元素中使用title特性来提供有关链接的附加信息。大部分浏览器在光标悬停的图像上以提示的方式显示title特性的内容。

a title.png

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

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

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

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

<h3>5. 如何去除 a 链接的默认样式？直接在 a 链接父容器添加颜色，能否继承到当前 a 链接上？</h3>
<li>使用text-decoration: none; 可以去除a链接的默认样式。

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

<h4>感谢观众</h4>

新垣结衣.png

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