HTML基础知识

1.line-height有什么作用?

答: line-height 属性设置行间的距离(行高),不能使用负值。该属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。line-height 与 font-size 的计算值之差(行距)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
可能的值:

描述
normal 默认
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

作用:

  • 单行文字的垂直居中对齐:把line-height值设置为height一样大小的值可以实现单行文字的垂直居中;
  • 多行文字的垂直居中:对于高度固定的div,里面文字单行或多行显示,字体大小有大有小的情况,设置font-size为0,line-height为所需要的高度,display属性为inline-block;
  • 使用行高代替高度避免haslayout:在某些情形下,line-height可以和height互换,因为实现的效果一样。都能撑开一个高度,然而这两个css属性有一个较隐蔽的差异,就是使用height会使标签haslayout,而使用line-height则不会。
    参考文档:css行高line-height的一些深入理解及应用css行高line-height的用法

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

答:可以用 caniuse.com来查css属性的兼容性。
各大浏览器对inline-block属性的支持如下图:

QQ图片20160803141152.png

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

  • ** href** 属性用于指定超链接目标的 URL。href 属性的值可以是任何有效文档的相对或绝对 URL,包括片段标识符和 JavaScript 代码段。如果用户选择了 a 标签中的内容,那么浏览器会尝试检索并显示 href 属性指定的 URL 所表示的文档,或者执行 JavaScript 表达式、方法和函数的列表。
  • title属性是鼠标悬停在超链接上的时候,显示该超链接的文字注释。
  • target 属性规定在何处打开链接文档。其值与描述如下:
描述
_blank 在新窗口中打开被链接文档。
_self 默认。在相同的框架中打开被链接文档。
_parent 在父框架集中打开被链接文档。
_top 在整个窗口中打开被链接文档。
framename 在指定的框架中打开被链接文档。
  • title 和 alt的区别: alt和title都是提示性语言属性。title属性是鼠标滑过时显示的文字提示,alt属性是图片在无法正确显示的时候起到文本替代的作用;title可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签,alt属性只能用在img、area和input元素中。
  • 如何新窗口打开链接:
<a href="#" target="_blank">在新窗口代开链接</a>

跳转到锚点

1.id定位,这样的定位可针对任何标签定位
<a href="#here">锚点</a>
<p id="here"></p>
2.使用name定位,name属性只能针对a标签来定位,而对div等其他标签就不能起到定位作用
<a href="#f2"></a>
<br/><br/><br/>
<a name="f2">111</href>

跳转到另一个页面的锚点:

1.在test1.html创建锚 <a name="test">锚</a> 
2.在test2.html设置好链接 <a href="test1.html#test">连接到另外页面的锚的超链接</a>

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

答:三者的主要作用是隐藏元素。
区别:

  • display: none
    1)、浏览器不会生成属性为display: none;的元素;
    2)、display: none;不占据空间,所以动态改变此属性时会引起重排;
    3)、display: none;不会被子类继承;
    4)、display属性,transition对它无效。
  • visibility: hidden
    1)、元素会被隐藏,但是不会消失,依然占据空间;
    2)、visibility: hidden会被子类继承,子类也可以通过设置visibility: visible;来显示;
    3)、visibility: hidden;不会触发该元素已经绑定的事件;
    4)、visibility: hidden;动态修改此属性会引起重绘;
    5)、visibility,transition对它无效。
  • opacity:0
    1)、opacity=0只是透明度为100%,元素隐藏,依然占据空间;
    2)、opacity=0会被子元素继承,且,子元素不能通过opacity=1,进行反隐藏。
    3)、opacity=0的元素依然能触发已经绑定的事件;
    4)、opacity,transition对她有效。
    参考文档

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

答:可以用以下代码去除a 链接的默认样式:

text-decoration: none;
color: #333;/*字体颜色可自定义*/

直接在 a 链接父容器添加字体颜色,不能继承到当前 a 链接上。(亲测是这样的)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 196,165评论 5 462
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,503评论 2 373
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 143,295评论 0 325
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,589评论 1 267
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,439评论 5 358
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,342评论 1 273
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,749评论 3 387
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,397评论 0 255
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,700评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,740评论 2 313
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,523评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,364评论 3 314
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,755评论 3 300
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,024评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,297评论 1 251
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,721评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,918评论 2 336

推荐阅读更多精彩内容

  • 一、line-height有什么作用? line-height属性是指文本行基线之间的距离,而不是字体的大小,它确...
    dengpan阅读 313评论 0 0
  • 问答 1、line-height有什么作用? line-height 属性设置行间的距离(行高)。定义和用法注释:...
    饥人谷_dudu阅读 295评论 0 0
  • 1.line-height有什么作用? 答:line-height的主要作用是调整文本行高,也相当于行间距的设置。...
    呦泥酷阅读 268评论 0 0
  • line-height有什么作用? 1、对于文章类文字上下排间隔一般我们对对象设置设置line-height行高属...
    无目的阅读 190评论 0 0
  • 一、line-height有什么作用? line-height行高,调整文字间的距离,可以在div使文字垂直居中,...
    崔敏嫣阅读 200评论 0 0