美文网首页
HTML知识点3

HTML知识点3

作者: hk_kh | 来源:发表于2016-08-01 17:53 被阅读0次

问答

一、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之外的所有标签。但是并不是必须的。

新窗口打开链接:<a href="链接的页面" target="_blank">新窗口打开</a><br />

四、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

相关文章

  • HTML知识点(3)

    1. 常见的meta标签 meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。...

  • HTML知识点3

    问答 一、line-height有什么作用? 在CSS,line-height被用来控制行与行之间的垂直距离。li...

  • 关于HTML:续知识点

    HTML知识点 HTML规范由W3C组织制定的。W3C的创始人是Sir Timothy John Bermers-...

  • 前端基础知识点

    1.html常见知识点 2.css常见知识点 3.js常见知识点 数组知识点 4.计算机网络知识点 5.数据结构 ...

  • TextView

    学习知识点:1.使URL 电话 Email 显示超链接2.利用HTML标签实现超链接3.利用HTML标签插入图片4...

  • 各个阶级的前端 必须掌握的基本技能汇总

    「 需要学习基础知识点 」 新手必打基础 HTML4\HTML5 CSS2\CSS3 ES5(原生 js 基本语法...

  • 前端面试每日 3+1 —— 第311天

    今天的知识点 (2020.02.21) —— 第311天 (我也要出题) [html] 你知道著名的3像素Bug指...

  • 2018-07-16

    HTML知识点总结 一.什么是html? HTML(HyperText Markup Language) 超文本标...

  • 2019-03-06

    HTML标签 知识点结构

  • HTML & CSS - 入门

    本文章主要整理了html入门的基础知识点 图片 img { border-radiuds: 3px; ...

网友评论

      本文标题:HTML知识点3

      本文链接:https://www.haomeiwen.com/subject/ewltsttx.html