深入理解 font-size_IT分享知识网

大家好，欢迎来到IT知识分享网。

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)]$

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/144565.html

深入理解 font-size