码迷,mamicode.com
首页 > Web开发 > 详细

css学习之路之非布局样式重要属性行高

时间:2020-05-01 18:38:09      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:原因   png   vertica   license   一段   cli   去掉   https   ica   

css非布局样式主要有以下几类

  • 字体、字重、颜色、大小、行高
  • 滚动、换行
  • 粗体、斜体、下划线
  • 其它
其中行高概念有点复杂,这里主要针对行高讲解,其它的可自行了解.

行高

  • 行高的构成
  • 行高相关的现象和方案
  • 行高的调整

行高的构成

演示效果图片:

技术图片

技术图片

运行结果:

技术图片

说明:上图片div有5个文本 span,每个span都有一个行高 line-height 且行高一一样,这就引出了这一个问题,为什么 行高不一样,渲染的高度是一样的呢?

技术图片

从上图,html 在文字的排版中顶部有条线叫顶线,底部的是底线,文字下的是基线,文字中间是中线,默认情况下文本都是按基线对齐的,所以你们看到文本都是对齐的,虽然行高不一样。 那么行高会决定什么 呢?行高会决定上下多余的高度,就是把上面的盒子撑起来,比如我们给 div 加下一个背景颜色:

技术图片
然后把其中一个行高改大一点,如100px,可以看下面的效果图片:

技术图片

外层窗口被撑开了。

行高相关的现象和方案

举例一:

技术图片

技术图片

运行效果图:

技术图片

图中 span 的字体大小为 20px, line-height 为60px,撑开了外层的 div,这里有一个特性,就是 line-height 比字体这个高度要高,也就 60 比 20 还大,也就导致它的高度会分布到两侧,形成了这个 span 在 div 里面是垂直居中的,这个就是一般垂直居中做法。

举例二:

技术图片

技术图片

运行效果图:

技术图片

图上三个 span 字体大小 不一样,默认情况是按基线对齐的,那如果我们要变一种方式对齐,比如居中对齐,那要怎么做呢?
我们可以通过分别给三个 span 设置 vertical-align: middle,就可以实现居中对齐,如下:

技术图片

同理还可以顶线对齐 top ,底线对齐 bottom.

举例三:

技术图片

运行效果图:

技术图片

如图,div 里面有文本跟图片,运行效果图片会发现图片下面有一段空白,原因是因为 img 默认也是一个行内元素,行内元素就要遵守行高的构成,它会按照基线对齐,基线对齐的就意味着基线到底线之间会有一段空隙的,这个就是这个空白产生的原因,那如果我们要去掉空隙怎么办?

我们可以通过对 img 设置 vertical-align: bottom; 让图片底线对齐就可以了,如图

技术图片

愿你成为终身学习者

css学习之路之非布局样式重要属性行高

标签:原因   png   vertica   license   一段   cli   去掉   https   ica   

原文地址:https://www.cnblogs.com/jlfw/p/12814233.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!