关于利用: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
显然这不是我们所想要的效果,那么这个时候我们要做的就是对首字设置浮动,使其脱离正常的文档流
猜你喜欢
- 以下是关于小编给大家日常收集整理php正则表达式,具体内容请看下文详解吧$str = preg_replace("/(<a.
- 这只是自己练习的一个记录而已。因为某种原因,不想用yii自带的user表,想用自己建的admin数据库表,修改如下:1. 参考高级模板里里的
- Blender 并不是唯一一款允许你为场景编程和自动化任务的3D软件; 随着每一个新版本的推出,Blender 正逐渐成为一个可靠的 CG
- 安装方法: regsvr32 parmf.dll附 如果想取消注册可以:regsvr32 /u&nb
- 目录1.简介2.list2.1数据结构2.2插入元素3.ring3.1数据结构4.heap4.1数据结构1.简介Container — 容器
- //-------------------------------------------- // 删除千分点。 //-----------
- 前言最近,我已经成功将我的个人网站从 Flask 迁移到 Django 了,最早接触 Django 的时候大概是在 4 年前,我记得那个时候
- 1) 使用字典dict()循环遍历出一个可迭代对象中的元素,如果字典没有该元素,那么就让该元素作为字典的键,并将该键赋值为1,如果存在就将该
- 本文实例为大家分享了TensorFlow实现简单线性回归的具体代码,供大家参考,具体内容如下简单的一元线性回归一元线性回归公式:其中x是特征
- 在大型的ASP项目中,很多的页面都涉及到分页、翻页功能。如果每个页面都写一个翻页的程序的话,这样的工作即降低了工作效率,也不利于工程的模块化
- 1、from子句组装来自不同数据源的数据; 2、where子句基于指定的条件对记录行进行筛选; 3、group&nb
- 在前面章节我们通过 os包学习了如何创建、读取一个文件夹,但是并没有学习如何创建、读写一个文件,接下来我们就学习关于文件的处理。当我们学习完
- 如下所示:#coding:utf-8 ''''' Created on 2014-7-24 @aut
- 让 PHP 支持 MySQLPHP 有专有的 MySQL 函数库以使用操作 MYSQL 数据库。在 PHP 5 及以后版本中不再
- 1.游戏背景介绍(写在前面的废话): 五月初的某天,看到某网推荐了这款游戏,Pongo,看着还不错的样子
- 今天有个需要需要传递中文参数给URL但是在GBK环境下的脚本传递GBK的参数老是给我报UNICODE的解码错误。烦的很。所以我们果断选择用u
- 获取所有文章数据o := orm.NewOrm()qs := o.QueryTable("Article")12获取总条
- 前言写爬虫有一个绕不过去的问题就是验证码,现在验证码分类大概有4种:图像类滑动类点击类语音类今天先来看看图像类,这类验证码大多是数字、字母的
- 我就废话不多说了,大家还是直接看代码吧~import numpy as np kernel = np.array([1, 1, 1, 2])
- 现在Django 3.0附带了对ASGI的支持,将Websockets添加到Django应用中不需要任何额外的依赖关系。 在本文中,您将学习