CSS（二十）——CSS的补充（本篇笔记很复杂，大家谨慎浏览）

CSS（二十）——CSS的补充

前言

本篇笔记补充说明前面CSS中的一些比较复杂的概念。

补充说明

浮动

浮动盒子的位置规则总结如下：

• 左浮动盒子向上向左排列；
• 右浮动盒子向上向右排列；
• 浮动盒子的顶边不得高于上一个盒子的顶边；
• 若剩余空间无法放下浮动的盒子，则该盒子向下移动，知道具备足够的空间能容奶盒子，然后再向左或向右移动。

行高的取值

行高的取值一般有两种：

• px（像素值）；
• 无单位数字；
• em单位；
• 百分比。

前面的笔记经常用像素单位设置行高，因为使用的测试数据都是单行文本，如果设置多行文本则会出现以下问题：

• 在设置元素内的行高的时候，如果设置行高为像素值，则字体太大的时候会出想行冲突，文字叠加；

• 如果统一设置行高为倍数单位（em），那么可能会出现没有意义——如果浏览器先读取到杭高的设置，则会根据当时设置的字体大小做倍数计算。所以可能会出现按照浏览器默认字体大小来设置行高；

• 百分比会出现同样的问题；

• 如果设置为无单位数字的方式来设置行高，子元素会将行高的设置继承下来，然后根据自己设置的字体大小来按照数字倍数计算行高。

body的背景（巨坑的知识点，做了解就好）

**事先声明，该知识点一般没有专门的官方文献来做解释说明（或许CSDN上有博主有过记录和补充，不过一般没遇到body元素背景出错的问题也不会有人去特意查找和总结），本小节将做一下记录，可能不是很全面，仅做一些注意事项的用处吧。

我们在设置了body的background-color时会发现body元素的高度为0。而且设置html的背景颜色的时候会出现更加匪夷所思的状况，根本不符合我们之前学习HTML的认知。

这个问题很复杂，我们从头说起。

画布——canvas

首先来说明一个概念，画布——这个画布就是一个概念和HTML中的 canvas 元素不是一回事，仅做一个区域理解。

一般来说，设置背景颜色时，背景会覆盖边框的，而有一个特殊的区域会有所不同——画布。

画布特点

• 最小宽度为视口宽度；
• 最小高度为视口高度；

HTML元素的背景

• 在给HTML元素设置背景的时候，HTML的背景会覆盖画布；
• 如果在这时body元素也设置了背景色，那么body的背景色正常覆盖body边框，且整个页面（画布）的背景色为HTML元素中的样式；
• 如果HTML没有设置背景色，而body设置了背景色，则body元素的背景色覆盖整个页面（画布）

背景图

• 背景图的宽度百分比为相对视口来设置的——即：对画布的宽度设置为超过视口的宽度，背景图片为100%，那么拨动横向滚动条的时候，会发现图片不会撑满整个页面。
• 背景图的高度相对于HTML元素的高度（网页的高度）——即使你的画布宽度大到正俩圈，高度依旧不理画布的高度。
• 背景图的横向位置无论是设定百分比还是具体位置，它都相对于视口设置。
• 背景图的纵向位置相对于网页的高度

小结

感觉不像总结了，关于背景这段笔记太坑了，大家只要知道背景图出问题时可能是啥原因就行。用后端的思维暂时想不通。

行盒的垂直对齐

多个行盒垂直方向上的对齐

给没有对其的元素设置vertical-align：center（设置行盒）。

做垂直的时候设置为middle（还有很多与设置，下一小节会详细说明）。

其中在vertical-align中的值类型有

• 预设值
• 数值：数值中包括像素和百分比

图片的底部白边

如果图片的父元素是一个块盒，且块盒的高度时自动的，那么图片底部和父元素的底边之间往往会出现空白（父元素设置边框可以看到）。

解决办法：

• 如果图片的父元素中没有文字，我们可以将字体大小设置为0，这样白边会消失（一般不会这样设置，有后遗症）。
• 父元素的属性不变，设置内部的img元素的属性为块盒。

接下来说一下关于行盒垂直方向对其和图片的底部白边问题的实际原理

原理

字体

文字是通过一些文字制作软件制作的。制作文字时，会有几条参考线，不同的文字类型也会有不同的参考线（同一种文字的参考线一致）。

接下来说明概念**：参考线**

在制作文字时一般会做五条参考线，从上至下分别被称为：

• text top，ascent：顶线；
• super：上基线；
• baseline：基线；
• sub：下基线；
• text bottom，descent：底线。

参考线

• font-size：

  设置的是文字的相对大小。类似于活字印刷，每个汉字都是刻在一个金属框上。所以设置的文字大小其实是“金属框”的大小。

  文字大小究竟和参考线有何区别：以基线为坐标x轴，ascent（顶线）到baseline（基线）的距离以及descent（底线）到baseline（基线）的距离之和为字体的金属框大小。

  而以字体Consolas为例，在高度的设置上，文字的实际大小是2048，在字母**“M”的金属框大小的为2398**。即：当一个字符的实际大小为2048的时候，包含文字的金属框大小为2398。

  大家可以理解为文字在设计的时候，实际字符总是与参考线有一些空隙，而浏览器放置文字的时候是按照顶线到底线来计算的。

  按照上述比例计算，当我们设置字体的大小为100px的时候，实际得到的字符占据的高度大小约为117像素。所以这就是文字（行盒）在设置垂直高度时候会发现不同字体或者图片文字混用时，垂直永远对不齐。因为字体与字体之间是不同的。

  文字的实际大小是ascent（顶线）到descent（底线）之间的距离——content-area

• line-height

  行高的实际概念是：顶线向上延伸一段空间，底线向下延伸一段空间。我们可以得到新的两条线：top、bottom，而延伸出的空间被称为“line gap”，且上下的line gap必定相等。top到bottom之间的距离被称之为virtual-area，即行高.

  line-height: normal; 使用文字默认的gap，不同字体一般都不同。

  一般我们设置多行文本行高的时候，都会设置line-height：normal;这个时候，我们要确定一点，content-area一定在virtual-area的正中间——上下gap相等；virtual-area不一定在每行的最中间，这由字体设计者决定。

• vertical-align

  一个元素内部的子元素如果出现行盒，该元素内部也会产生参考线。决定参考线的属性：font-size、font-family、line-height。

  默认情况下，vertical-align的默认值为baseline，表示两套参考线中的基线对齐。其他属性值的含义如下：

  super：内部元素的极限与父元素的上基线对齐；

  sub：内部元素的极限与父元素的下基线对齐；

  text-top：内部元素的top，对齐父元素的ascent；

  text-bottom：内部元素的bottom，对齐父元素的descent；

  top：内部元素的top，对齐父元素的ascent（该行中最高的顶边）；

  bottom：该元素的bottom，对齐与父元素的底边（该行中最低的底边）。

  如果设置属性值为像素，则表示相对于父元素基线的偏移量。

  百分比是相对于自身的vertual-area的高度

行盒组合起来，可以形成多行，每一行的区域叫做line-box，line-box的顶边是该行内所有行盒的最高顶边，反之，亦然，注意区分以下概念：

行盒：inlie-box

行框：line-box

一个元素的实际占用高度，是通过所有line-box之和来计算的。

line-box是承载文字内容的必要条件，一下情况不生成行框：

1. 某元素内部没有任何行盒；
2. 某元素字体大小为0。

补充图片下方白边的原理

图片的基线是图片的margin-bottom，图片与行盒的对齐是基线对齐。所以会有空白，如果我们设置行盒内文字的大小为0，就不会生成参考线，所以下边的空白就会消失。

总结

写到这里和大家说一下，能看到本篇笔记的总结部分证明你们都很头铁。这部分总结不想做笔记内容的总结（写不下去了），在此解释一下为什么CSS中会有这么多坑，看上去不符合W3C所谓的标准（因为从这些坑看起来它内部也没什么标准的感觉）。

因为W3C在CSS的标准制定时，基本没有全职的工程师在做相关工作，大多数工程是都有自己的主业，所以在制定标准的时候会出现不了解其他人的制定标准的逻辑，导致对接的时候逻辑不对称。但是好在不影响正常使用。

另外，在指定前端标准的时候W3C也出现过很多问题，最早的XHTML的出现对于前端语法要求十分严格，如果按照XHTML的标准来执行则会使微软、MBA等企业现有的项目造成冲击，二次开发成本过大。所以当时各大企业都在地址XHTML的标准。

所以本篇笔记就当一个外传来了解，不一定要学会，学着玩呗。