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

2024-06-03 15:50:24

第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>

效果图如下：

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

【笔记】浮动属性float的应用07——浮动可缩放的首字下沉
第1步 - 从一段文字开始在本练习中,我们希望强制将一个下降帽放在一段文本旁边.我们还希望丢弃上限是可扩展的,无论用户的默认字体大小如何 - 这意味着所有测量都将以ems或百分比表示.从一段简单的文 ...
【笔记】浮动属性float的应用02——浮动图像和标题
第1步 - 从一段文字和一张图片开始对于本练习,我们希望将图像强制到右侧以允许内容与其一起流动.我们还想在图像下面有一个标题. 代码如下所示: <!DOCTYPE html> <h ...
css中float详解,CSS浮动属性Float详解？史上最全Float详解
我们在学习css样式的时候,都知道css是盒概念,并且每一个盒子都是一个元素,下面我们就对CSS浮动属性Float进行详解,让你彻底了解Float. 一:什么是Float浮动? Float浮动是css ...
h5 浮动布局及首字下沉
将两天的结果放在github上. https://github.com/SuYaru/Pre 一.浮动浮动就是内容悬浮于普通流(文档流)之上,普通流的文件会围绕在浮动块的周围.div:nth-of- ...
HTML首字下沉的编码,css如何实现首字下沉效果？伪元素+浮动实现效果（代码实例）...
在word文档中有一个首字下沉功能,可以在文章的排版时使用,有时能给文章增色不少.那么css可以实现这样的效果吗?本篇文章就给大家介绍css是如何实现首字下沉效果的,让大家可以了解如何用css的伪元素 ...
$\LaTeX$笔记：首字下沉
$\LaTeX$系列根目录: Latex学习笔记-序首字下沉 \IEEEPARstart{W}{ith} ,第一个参数W会变大,占用两行,第二个参数"ith"变会大写. 如代码 ...
CSS float实现首字下沉
方法: <!DOCTYPE html> <html><head><meta charset="utf-8"><title> ...
CSS浮动属性Float到底什么怎么回事，下面详细解释一下
float 是 css 的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局 ...
对css中的浮动属性float刨根解牛
1.浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 脱离常规流,由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 2.几张图说明浮动常 ...

最新文章

热门文章