HTML & CSS - 数据链接与块级格式化上下文 | 王富杰的博客

一、数据链接

Data URL（数据链接），也叫 Data URI，是一种把“数据本身直接写进链接里”的方式。把文件内容直接嵌入到 URL 里，而不是通过地址去下载资源。数据链接的标准格式如下：

data:[MIME类型][;编码方式],数据内容

在网页开发过程中，我们一般把CSS单独写在一个文件，然后在HTML中进行链接。其实也可以通过数据链接的方式：

<link rel="stylesheet" href="data:text/css, h1{color:red;}">

通过这种方式，一样可以渲染页面的h1元素为红色。这里只是举个例子，实际应用中并不会这么用。

接下来我们看一下什么是MIME类型。它是一个互联网标准，叫做多用途互联网邮件扩展。它里面规定了各种各样的文件类型应该用什么格式来描述。比如一下常见几类：

html:text/html
png:image/png
mp4:video/mp4
pdf:application/pdf
......

其后是编码方式，编码方式指的是把文件内容按照指定的算法进行编码。例如base64，这样就可以把一张图片进行编码，得到的字符串写在这里。这样就可以通过字符串得到一张图片。并使用<img>元素来加载。

二、块级格式化上下文

在视觉格式化模型中规定了一些定位规则，普通流、浮动、定位。在普通流里面，块盒独占一行垂直排列，相邻外边距合并且无视浮动盒子。普通流块盒的这些排列规则是由块级格式化上下文决定的，简称BFC。它是页面上的一块区域，在这个区域里面规定了常规流块盒的布局。

BFC区域会由一些特定的html元素在其内部创建：

根元素(html)
浮动元素
绝对定位元素
overflow不等于visible的块级元素

除了以上这些之外，还有其他许多元素也会创建BFC区域。因此我们写的页面会出现多个不同的BFC区域，元素也会处于不同的BFC区域里面。不同的BFC区域，渲染的时候是互不影响的。创建BFC的元素：

不会和其子元素进行外边距合并
排列时边框盒会避开浮动元素
它的自动高度会计算内部的浮动元素

关于BFC区域，我们基于第三点举一个例子。在一个元素的子元素浮动时，这个元素会出现高度坍塌。前面我们处理高度坍塌的方式是在内部添加一个伪元素。根据第三点特性，给这个元素overflow设置一个属性，就会计算内部的浮动元素，因此也能解决高度坍塌的问题。

三、图片底部白边问题

我们先看一个现象，代码如下所示：

<body>
    <span>对个此。</span>
    <a href="#" style="background-color: red; display: inline-block; height: 100px; line-height: 100px;">别俭 身五弟</a>
    <span>身五弟</span>
</body>

展示效果如下：图片加载失败如上：当行块盒文字垂直居中之后，两边的span元素也对齐了。其实这涉及到了字体制作的原理。字体制作时需要设置5根参考线，其中有一根叫基线。在网页中处于同一行的行盒，它们的基线默认是对齐的。所以中间的位置改变后两边的行盒也会跟着变化。不同的字体基线位置不一样，是由字体设计者决定的。

同样的，如果块盒内部出现了一个行盒，这个块盒内部就会产生一个参考线。该参考线的位置就是参考改块盒字体的基线。即使没有写文字也会有，因为字体是会继承的。例如在div元素中嵌入和一个img元素。给元素加上边框就会看到图片底部有一个白边。如下：图片加载失败要解决这个问题也很简单，把div的字体大小设置为0就可以了。或者把图片改为块盒，块盒没有参考线。