非零基础自学前端最后一遍 一 HTML+CSS 7 CSS属性-字体 7.5 文本居中显示line-height

谁借莪１个温暖的怀抱￠ 2024-03-25 10:22 163阅读 0赞

非零基础自学前端最后一遍

文章目录

      • 非零基础自学前端最后一遍
      • 一 HTML+CSS
      • 7 CSS属性-字体
        • 7.5 文本居中显示line-height
          • 7.5.1 line-height(常用)
          • 7.5.2 为什么文本需要行高?
          • 7.5.3 line-height

在这里插入图片描述

一 HTML+CSS

7 CSS属性-字体

7.5 文本居中显示line-height
7.5.1 line-height(常用)

line-height用于设置文本的行高

  • 行高可以先简单理解为一行文字所占据的高度

在这里插入图片描述

不加行高是这样的

在这里插入图片描述

每一行文本都是有一个高度的

7.5.2 为什么文本需要行高?

在这里插入图片描述

加上行高

在这里插入图片描述

显得更加立体

7.5.3 line-height

行高的严格定义是：两行文字基线（baseline）之间的间距

  • 基线（baseline）：与小写字母x最底部对齐的线

在这里插入图片描述

  • 注意区分height和line-height的区别

    • height：元素的整体高度
    • line-height：元素中每一行文字所占据的高度

  • 应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中

    • 让line-height等同于height

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，163人围观）

还没有评论，来说两句吧...

相关阅读