关于利用:first-letter实现首字下沉的一些看法
作者:林小志 来源:林小志blog 发布时间:2010-04-20 17:19:00
前几天在“CSS那些事儿”的群中,一位读者朋友(小土豆)问我书中提到首字下沉的时候为什么要增加一个清除浮动。当时我自己一时迷惑了,为什么呢,怎么一点印象都没有呢。赶紧打开电子版的《CSS那些事儿》找到相对应的章节,并且在各个浏览器中测试了之后才发现,我当初对这块的说明太少了,才让她产生了一些不理解的想法,或许也有其他的一些读者会存在这样的问题。
发现了问题就需要解决问题,因此我就拿这个首字下沉的时候为什么要清除浮动而做了一系列的测试,结果让我感觉有点崩溃,原来我在那章节中说明的内容太少了,在这里赶紧做个补充,希望读者朋友们能看到这篇文章后不会再对那个清除浮动而产生迷惑。
首先来看一下我在书中仅有的一段对首字下沉进行说明的代码。
<style type="text/css">
p:first-letter {
float:left; /* 设置段落p标签的首字为浮动,让其占据多行的空间 */
font-weight:bold; /* 加粗段落p标签的首字 */
font-size:2em; /* 设置段落p标签的首字为其他字体的2倍 */
}
p {clear:both;} /* 清除首字的浮动,避免影响p标签的高度与其相叠加 */
</style>
<h2>【端午节由来】</h2>
<p>关于端午节的来历,归纳起来,大致有以下诸说:</p>
<p>迎涛神,此说出自东汉<span>《曹娥碑》</span>。曹娥是东汉上虞人,父亲溺于江中,数日不见尸体,当时孝女曹娥年仅十四岁,昼夜沿江号哭。过了十七天,在五月五日也投江,五日后抱出父尸。</p>
<p>春秋时吴国忠臣伍子胥含冤而死之后,化为涛神,世人哀而祭之,故有端午节。</p>
在书中所提到的注释里,仅对p标签清除浮动做了一个简单的说明,内容如下:
p {clear:both;} /* 清除首字的浮动,避免影响p标签的高度与其相叠加 */
就是因为这么一句话,让小土豆这位读者产生了猜想,为什么要清除浮动。在部分读者眼中或许已经比较清楚明白为什么要清除浮动,因为:first-letter伪对象有一个浮动的属性。后来我想想,为什么这个有浮动属性就要清除浮动,这个问题似乎需要说明一下。
问题的出现,就需要去解决。因此我就从没清除浮动到采用不同方式的清除浮动对这段代码进行了简单分析。
未对段落首字设置浮动时
未设置浮动时的首字下沉
p:first-letter {font-weight:bold;font-size:2em;}
这时我们仅仅只是对段落中的第一个字符设置了加粗和2倍大小的文本,那么在示例图中可以看到的效果就是文字放大了而已,并未首字进行下沉的处理。查看demo
显然这不是我们所想要的效果,那么这个时候我们要做的就是对首字设置浮动,使其脱离正常的文档流
猜你喜欢
- 相信没有人不知道 Firebug 是什么东西,但有时候我们糟糕的代码不想让同行轻松的使用 F12 就能一览无遗。那么怎么办呢?这里有个猥琐的
- 在今天网络开发方面,JavaScript起了很关键的作用;像jQuery, MooTools, Prototype等等JavaScript框
- 可能是我“火星”了,不过在 空虚 的 Blog 中学到的一招。这个技巧的原理是利用 iframe 载入本机各盘符的根目录,然后判断 ifra
- 如何用HtmlEncode来显示Unicode? 见下:<%@ Language=VBS
- 数据库的表Info,表部分结构:Info_Id  
- 如何编写具有良好结构的CSS?如果在设计流程中缺乏"秩序"或"章法"是非常不利的,你得冒着风险去添加
- 一直一来,我都在想办法看能不能用 col 控制表格的列隐藏,但是无奈,FF对COL支持不够好(其实是以前没有发现COL在FF下要怎么弄)。今
- 动手写个小组件(组件入门) 这篇文章主要是为想将自己的ASP水平提高的人写的! 把ASP代码变成组件,开发者不仅是加快了ASP的速度,而且也
- 当服务器必须提供与两个或更多个网络或网络子网的连接时,典型的方案是使用多宿主计算机。此计算机通常位于外围网络(也称为 DMZ、外围安全区域或
- 很多朋友对FrontPage2003中增加的网页布局功能很感兴趣,现在我们一起来深入了解这一实用功能。 用FrontPage200
- 1. 停应用层的各种程序。 2. 停oralce的监听进程: $lsnrctl stop 3. 在独占的系统用户下,备份控制文件: SQL&
- 如何定义记录集打开的游标类型和锁定类型?我们知道,打开记录集时,可以定义记录集打开的游标类型和锁定类型。在adovbs.inc文件中就定义了
- 这些CSS Selector在平时写页面的时候用地不多,只在JavaScript库、Firefox插件、iPhone页面里有过接触。推荐大家
- 在使用SQL Server 的过程中,由于经常需要从多个不同地点将数据集中起来或向多个地点复制数据,所以数据的导出,导入是极为常见的操作.我
- 本文介绍了linux下如何备份与恢复mysql数据库。数据库备份是非常重要的。如果定期做好备份,这样就可以在发生系统崩溃时恢复数据到最后一次
- 1. 排名函数与PARTITION BY --所有数据 SELECT * FROM dbo.student AS a INNER JOIN
- 通常的聊天室所采用的程序,也就是Chat程序了,其基本结构原理是不会采用到数据库的。那究竟采用什么技术呢?我们知道ASP变量当中Sessio
- 概要说明:自动更新程序主要负责从服务器中获取相应的更新文件,并且把这些文件下载到本地,替换现有的文件。达到修复Bug,更新功能的目的。本文作
- 很佩服国外一些前端开发人员对待学问的研究精神,他们很善于总结发现。看到一篇关于安全字体List of Web Safe Fonts的文章,里
- 以下代码已经在SQLServer2008上的示例数据库测试通过问题一:如何为数据进行加密与解密,避免使用者窃取机密数据? 对于一些敏感数据,