HTML 2-行高、a标签

MobService 发布于2019-08-02 10:28 / 2648人阅读

摘要：行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。等于包裹文字的元素本身的高度时，文字垂直居中。仅在属性存在时使用。但标签字体大小属性受父元素影响。

line-height

line-height设置文本的行高，行高即文本行基线之前的距离,行高减去字体大小就等于行间距从上到下四条线分别是顶线、中线、基线、底线，很像学英语字母时的四线三格，vertical-align属性中有top、middle、baseline、bottom，就是和这四条线相关。注意,基线不是最下面的线，最下面的是底线。行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。行距是指一行底线到下一行顶线的垂直距离，即第一行粉线和第二行绿线间的垂直距离。如下图：

line-height:number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
line-height:px固定值设置固定的行间距。
line-height:% 基于当前字体尺寸的百分比行间距。
line-height:inherit 规定应该从父元素继承line-height 属性的值。(任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。)
line-height等于包裹文字的元素本身的高度时，文字垂直居中。

关于CSS属性的兼容性

CSS属性的兼容性可在 caniuse 中搜索属性名

a标签的href, title, target 属性

href属性：创建指向另一个文档的链接,为name时创建文档内的锚点。
titel属性：鼠标悬停在链接时显示额外信息。
titel与alt的区别：使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明，它只能用在img、area和input元素中，是用来替代图像而不是提供额外说明文字。title属性是提供非本质的额外信息，比如在图像可见时对图像的描述(鼠标放在图片时即会显示)。target属性：规定在何处打开目标 URL。仅在 href 属性存在时使用。target属性值等于_blank时，链接在新窗口中打开：
优酷

a标签设置伪类按L-V-H-A顺序，伪类设置在a标签上所有浏览器都支持，设置在其他div元素上只有IE8以上浏览器支持
a:link {color:#FF0000;} / 未访问的链接 /
a:visited {color:#00FF00;} / 已访问的链接 /
a:hover {color:#FF00FF;} / 鼠标划过链接 /
a:active {color:#0000FF;} / 已选中的链接 /

a标签设置锚点：
文字 href为#时表示，链接的是当前页面
设置锚点用id

段落

href为#ccc时，链接的是对应的锚点。

display: none , visibility: hidden, opacity:0 的作用和区别

display:block/inline/inline-block/none/table-cell/fix
display:none; 元素被设置成不显示，实际渲染时该元素脱离文档流，但dom树中该元素仍然存在
visibility:hidden; 元素被设置成隐藏，实际渲染时该元素仍然在文档流里面（仍然占空间），dom树中也存在，相当于元素变透明了。
opacity:0;使元素透明度为0就好像消失一样，但是所占据的空间还在，不会改变页面布局

a链接的默认样式设置

a标签的颜色不会继承父元素的颜色样式，即a标签自带的颜色属性不被父元素颜色属性影响。但a标签字体大小属性受父元素影响。
a标签去掉下划线，增加颜色

a{
    text-decoration: none; //去除a标签默认的下划线样式
    color: red;
    transition:color 0.3s;  //a标签的颜色有变化时，使用渐变效果，效果变化时间0.3s
}

GPU云服务器云服务器 html行高单位字体行高 html html 设置行高 html行高详解

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52374.html

HTML 2-行高、a标签

摘要：行高是指上下文本行的基线间的垂直距离，即图中两条红线间垂直距离。等于包裹文字的元素本身的高度时，文字垂直居中。仅在属性存在时使用。但标签字体大小属性受父元素影响。 line-height line-height设置文本的行高，行高即文本行基线之前的距离,行高减去字体大小就等于行间距从上到下四条线分别是顶线、中线、基线、底线，很像学英语字母时的四线三格，vertical-align属性中...

lx1036 2019-08-29 15:27 评论0 收藏0
360前端星计划学习-HTML + CSS

摘要：设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时，会生成匿名块级盒来包含行级盒。浏览器浏览器渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

lpjustdoit 2019-08-29 12:27 评论0 收藏0
360前端星计划学习-HTML + CSS

摘要：设计思想兼容已有内容避免不必要的复杂性解决现实问题优雅降级尊重事实标准变化新增语义化标签去除纯表示性的标签拖拽离线语法标签不区分大小写推荐小写空标签可以不闭合属性不必引号。遇到这种情况时，会生成匿名块级盒来包含行级盒。浏览器浏览器渲染引擎 JavaScript引擎 IE Trident JScript Edge EdgeHTML Chakra Safari We...

mumumu 2019-08-01 16:41 评论0 收藏0
HTML 邮件兼容问题与解决方案

摘要：因为微软一向地特立独行，使得成为了最难啃的骨头。这就意味着邮件中几乎只有这几个元素，尽量避免使用或是其他标签。 HTML 邮件内容虽然也是 HTML，但是和我们在网页上使用的 HTML 不同，因为安全原因，各大邮箱服务商及邮件客户端都会对邮件内容进行一定程度上的处理，不会按照你写的原本 HTML 展示。 showImg(https://segmentfault.com/img/bVLl...

Cheriselalala 2019-08-29 12:18 评论0 收藏0
HTML 邮件兼容问题与解决方案

摘要：因为微软一向地特立独行，使得成为了最难啃的骨头。这就意味着邮件中几乎只有这几个元素，尽量避免使用或是其他标签。 HTML 邮件内容虽然也是 HTML，但是和我们在网页上使用的 HTML 不同，因为安全原因，各大邮箱服务商及邮件客户端都会对邮件内容进行一定程度上的处理，不会按照你写的原本 HTML 展示。 showImg(https://segmentfault.com/img/bVLl...

RdouTyping 2019-08-01 16:35 评论0 收藏0