深入理解 font-size

Dariuslwk

34485人浏览 · 2020-03-07 17:54:01

Dariuslwk · 2020-03-07 17:54:01 发布

1、广义上的 font-size

用于设置 字体大小，辅以单位控制，实质上是控制 字符框 的高度。

2、狭义上的 font-size

2.1、字体的基线

line-height : 意为行高，content-area (内容区域)，被 font-family 、 font-size 共同影响（元素看到的高度与实际字体设置大小不一样的原因）

em box : 意为 字体框 ，仅被 font-size 影响，即 1 em = font-size: 1px ; ，等同于 font-size

x-height : 意为 x 的字符高度** ，用于理解概念， x-height = 1 ex ; 在 CSS 中，vertical-align: middle ; 将该 元素的中心 与 父元素基线 加上 x-height 高度的一半 对齐

baseline : 意为基线，即 vertical-align 的默认值

半行距：计算公式为 行距 = line-height - font-size

2.2、font-size 的基本单位类型

2.2.1、关键词类型

绝对尺寸：xx-small 、x-small 、small 、medium 、large 、x-large 、xx-large
相对尺寸：smaller 、larger

2.2.2、数值类型

px ：像素
em : 相对于父元素的字体大小进行计算
rem : 相对于根元素的字体大小进行计算

2.2.3、百分比类型

% ：其百分比取值是基于父对象中字体的尺寸

3、深入理解 line-height

3.1、含义

意为行高，其默认值为 normal = content-area 的区域高度相同

3.2、影响

line-height 的大小受 font-family 、浏览器的影响

3.3、单位

本质上是继承的类型不同

% ：继承的是计算后的值
em：继承的是计算后的值
px：继承的是计算规则，是像素点，而不是长或者高

3.4、内联盒模型的相关概念

在这里插入图片描述

匿名内联盒子：anonymous inline box ，没有标签包裹的文字默认自己形成一个盒子

内联盒子：inline box ，通常由一些标签包裹形成，例如最常见的标签包裹的文字会形成内联盒子

行框盒子：line box ( ) ，它是由单行内联元素形成的一个区域，注意是每一行都会形成，如果文字由五行，就会形成5个行框。行框的高度基本上是由行框内行高最大的内联盒子决定的。还会受 vertical-align 的影响

包含块：container-box ，在内联元素中，包含块是由行框组成的，也就是包裹在所有行框外面的那层盒子

3.5、常见问题

3.5.1、display ：inline-block 元素间的空隙

通常使设置 font-size: 0 ; 或者使用 letter-spacing 属性达到去除边框的目的

可知 font 标签真正仅实现两个属性：color 、face

以下列代码为例：

<div class="container">
  <h2>1. 元素间的间隙</h2>
  <div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
  <h2>2. 父元素底部的间隙</h2>
  <div class="box">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <span>x</span>
  </div>
  <h2>3. inline-block元素中有文字</h2>
  <div class="box">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item"></div>
    <span>x</span>
  </div>
</div>

.box {
  border: 1px solid;
}

.item {
  display: inline-block;
  background-color: red;
  width: 100px;
  height: 50px;
}

span {
  background-color: blue;
  color: white;
}

3.5.2、父容器最底端也有一个空隙

是由 stcuct 造成的，实际上是增加了一个 struct行高，所以会显得略高

struct：幽灵空白节点，意为 支柱。每一个行框开始的位置都有一个宽度为0，并且行高和字体大小都与该元素相同的内联盒子，这个盒子即为 “支柱”

4、深入理解 vertical-align

4.1、含义

设置元素的上下垂直对齐方式。

该属性定义 行内元素的基线 相对于 该元素所在行的基线 的垂直对齐。允许指定 负长度值 和 百分比值 。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

影响 inline-level元素和 table-cell元素垂直方向上的布局.

4.2、vertical-align 的属性值

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length
%	使用 “line-height” 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

4.3、常见问题

两个div 都设置 display：inline-block，正常显示；但是在第二个div中加一个块级元素或者内联元素，显示就变了个样，为什么？

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Test</title>
        <style type="text/css">
            div{
                width: 100px;
                height: 100px;
                border:1px solid red;
                display: inline-block;
                vertical-align: top;
            }
        </style>

    </head>
    <body>
    <div></div>
    <div>第二个</div>
    </body>
</html>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZNJsjjgZ-1583574521136)(D:\DAYNOTE\vertical-align1.PNG)]$

设置div元素的CSS样式时，加入 vertical-align: top; 就能达到我们想要的效果。

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UfKXCcne-1583574521137)(D:\DAYNOTE\vertical-align2.PNG)]$

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

Apache Doris Python UDF：让 SQL 直接调用 Python 生态，支撑 Agent 时代复杂业务逻辑

2048 AI社区

大模型，正在改变我们理解“智能”的方式

它不再只是实验室里的概念，也不只是少数工程师讨论的技术名词，而是开始进入普通人的工作、学习和生活：写文案、做表格、改代码、画图、翻译、总结资料、陪伴聊天，甚至帮助医生、律师、教师、设计师提高效率。我觉得，大模型最有意义的地方，不是让机器变得多像人，而是让人有机会从机械重复中解放出来，把更多精力放在真正属于人的事情上：理解他人、表达感受、创造美、承担责任、做出选择。真正重要的不是每个人都成为AI专家