【笔记】浮动属性float的应用07——浮动可缩放的首字下沉（所有步骤组合在一起）

最新推荐文章于 2022-05-27 00:02:50 发布

二木成林

最新推荐文章于 2022-05-27 00:02:50 发布

阅读量401

点赞数

分类专栏：笔记

笔记专栏收录该内容

37 篇文章 0 订阅

订阅专栏

第1步 - 从一段文字开始

在本练习中，我们希望强制将一个下降帽放在一段文本旁边。我们还希望丢弃上限是可扩展的，无论用户的默认字体大小如何 - 这意味着所有测量都将以ems或百分比表示。从一段简单的文字开始。

第2步 - 在第一个字母周围添加一个范围

将规则应用于第一个字母有两种方法。第一种方法使用“：first-letter”来定位字母，第二种方法使用第一个字母周围的span。虽然第二种方法不是语义上纯的，但它在浏览器中更稳定。

我们将在本教程中使用第二种方法。所以，我们需要在段内包装段落的第一个字母。

<span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer...

第3步 - 浮动第一个字母

当我们将“float：left”应用于第一个字母时，我们还必须提供宽度。您使用的宽度取决于要“删除”的字母宽度。

我们使用ems来设置字母的宽度和大小。这将允许首字下沉放大或缩小，并始终匹配用户的默认字体大小。em大约是大写字母“M”的宽度。因此，大写“L”只需要大约.7em的宽度。

.dropcap { float: left; width: .7em; }

第4步 - 增加字体大小

增加字体大小，直到它是3行文本的高度 - 大小约为4周。

font-size: 4em;

第5步 - 设置行高

要使首字下划线与文本并排，请设置行高。在这种情况下，大约83％似乎有效。与字体大小一样，这些数字可以根据您的需要进行调整。

line-height: 83%;

完了！

代码如下所示：

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.dropcap {
			float:left;
			width:0.7em;
			font-size:4em;
			line-height:83%;
		}
	</style>
</head>
<body>
	<p><!--new codes-->
		<span class="dropcap">L</span>orem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
	</p>
</body>
</html>

效果图如下：