任务6-HTML3

1.line-height有什么作用?

所谓的行高,是指文本行基线之前的距离。在理解这句话之前先了解几个基本知识:

  • 顶线、中线、基线、底线
    基线介绍

从上到下四条线分别是顶线、中线、基线、底线,很像学英语字母时的四线三格,vertical-align属性中有top、middle、baseline、bottom,就是和这四条线相关。。

注意,基线不是最下面的线,最下面的是底线。

  • 行高、行距与半行距
    行高

行高是指上下文本行的基线间的垂直距离,即图中两条红线间垂直距离。

行距是指一行底线到下一行顶线的垂直距离,即第一行粉线和第二行绿线间的垂直距离。

半行距是行距的一半,即区域3垂直距离/2,区域1,2,3,4的距离之和为行高,而区域1,2,4的距离之和为字体size,所以半行距也可以这么算:(行高-字体size)/2

  • 内容区、行内框、行框

  • 内容区:底线和顶线包裹的区域,即下图深灰色背景区域。

    内容区

  • 行内框,每个行内元素会生成一个行内框,行内框是一个浏览器渲染模型中的一个概念,无法显示出来,在没有其他因素影响的时候(padding等),行内框等于内容区域。
    设定行高时行内框高度不变,半行距(深蓝色区域)分别增加/减少到内容区域的上下两边。

  • 行框(line box),行框是指本行的一个虚拟的矩形框,是浏览器渲染模式中的一个概念,并没有实际显示。
    行框高度等于本行内所有元素中行内框最大的值(以行高值最大的行内框为基准,其他行内框采用自己的对齐方式向基准对齐)加上行距(line-height 与 font-size 的计算值之差)。
    当有多行内容时,每行都会有自己的行框。

    行框

基本概念搞明白了我们就可以说说line-height属性了。

定义:line-height 属性设置行间的距离(行高)。

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

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

line-height的问题讨论:
1.行高和继承:当一个块级元素从另一个元素继承line-height时,问题会变得复杂,line-height值从父元素计算,而不是在子元素上计算。

<style>
  body {
        font-size : 10px;
}
div {
     line-height: 1em;
}
p {
    font-size: 18px;
}
</style>
<body>
 <div>
<p>
这个段落的"font-size"是18px,但是继承的"line-height"是10px,这会造成文本重叠。</p>
</div>
</body>
line-height小,font-size大会导致多行文本重叠

对于这种line-height太小的问题,一种解决办法是为每个元素设置一个显示的line-height,但是这种方法显然不实用,更好的办法使用数值,由它来设置缩放因子,因为缩放因子将使继承值而不是计算值,这个数值会应用到该元素及其所有子元素,所以各元素都根据其自己的font-size计算line-height

<style>
 body{
 font-size : 10px;
}
div {
 line-height: 1.5;}
p { font-size: 18px;}
</style>
<body>
<div>
<p>这个段落的"font-size"是18px,继承的"line-height"的缩放因子是1.5,那么它的"line-height"值就是18*1.5=27px。</p>
</div>
</body>
使用缩放因子

所以尽量使用数值(number)来设置line-height。

2.垂直居中

  • 单行文字
    只需要把height的值与line-height的值设置为同样大小就可以实现单行文字的垂直居中。
单行文字垂直居中
  • 多行文字
    使用老师在课程中的方法,利用 display:table-cell和表格的vertical-align:middle来实现多行文字的垂直居中。

多行文字垂直居中

另外还有好几种方法可以参考这篇文章大小不固定的图片、多行文字的水平垂直居中

参考:博客CSS行高,《CSS权威指南》第三版

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

可以去Can I Use查询CSS属性的兼容性。

inline-block兼容性

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

  • a标签定义超链接,用于从一张页面到另一张页面。

  • href是a元素最重要的属性,用于链接指向的页面的 URL。

  • title属性是提供关于链接的信息,当鼠标放在链接上时,会显示title里面的内容。

  • target属性从何处打开链接文档。

  • title和alt的区别

  • 使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明,它只能用在img、area和input元素中,是用来替代图像而不是提供额外说明文字。

  • title属性是提供非本质的额外信息,比如在图像可见时对图像的描述(鼠标放在图片时即会显示)。它可以用在除了base,basefont,head,html,meta,param,script和title之外的所有标签。

  • 如何新窗口打开链接
    使用target的值_blank,例如:<a href ="#" target= "-blank">

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

参考stackoverflow上面的回答。
display: none, visibility: hidden和opacity:0都会让元素隐藏,具体区别如下:

  • display:none 显示为无,所占据的空间会消失,会改变页面布局,就好像在页面中把这个元素删除了一样。
  • visibility:hadden 把该元素隐藏起来,但是所占据的空间还在,不会改变页面布局,但是不会触发该元素以及绑定的事件。
  • opacity:0 使元素透明度为0就好像消失一样,但是所占据的空间还在,不会改变页面布局,如果该元素以及绑定了一些事件,如click事件,keypress事件,也能触发该事件。

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

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

推荐阅读更多精彩内容

  • 参考1.line-height12.line-height23.line-height34.line-height...
    鸿鹄飞天阅读 546评论 0 0
  • 1. line-height有什么作用? line-height指定一行的行高,使用后会使文本在上下居中。 lin...
    小木子2016阅读 361评论 0 0
  • 课程目标 掌握基本标签和基本样式的用法 学习建议 阅读资料都是老师的原创文章、示例代码、或者是精心挑选的文章。是除...
    饥人谷_江君阅读 568评论 0 0
  • 1.line-height 有什么作用? line-height 属性设置了行间的距离(即行高),不允许使用负值。...
    饥人谷_沈梦圆阅读 304评论 0 1
  • 1.line-height有什么作用? line-height是行高的意思。具体指两行文字基线之间的距离。line...
    墨月千楼阅读 297评论 0 0