任务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链接颜色
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

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