杰晶网络

CSS first-letter实现首字下沉
网页制作 2024/12/29 佚名
3 2
前几天在“CSS那些事儿”的群中，一位读者朋友（小土豆）问我书中提到首字下沉的时候为什么要增加一个清除浮动。当时我自己一时迷惑了，为什么呢，怎么一点印象都没有呢。赶紧打开电子版的《CSS那些事儿》找到相对应的章节，并且在各个浏览器中测试了之后才发现，我当初对这块的说明太少了，才让她产生了一些不理解的想法，或许也有其他的一些读者会存在这样的问题。

发现了问题就需要解决问题，因此我就拿这个首字下沉的时候为什么要清除浮动而做了一系列的测试，结果让我感觉有点崩溃，原来我在那章节中说明的内容太少了，在这里赶紧做个补充，希望读者朋友们能看到这篇文章后不会再对那个清除浮动而产生迷惑。

首先来看一下我在书中仅有的一段对首字下沉进行说明的代码。

p:first-letter {
float:left; /* 设置段落p标签的首字为浮动，让其占据多行的空间 */
font-weight:bold; /* 加粗段落p标签的首字 */
font-size:2em; /* 设置段落p标签的首字为其他字体的2倍 */
}
p {clear:both;} /* 清除首字的浮动，避免影响p标签的高度与其相叠加 */

 

【端午节由来】


关于端午节的来历，归纳起来，大致有以下诸说：


迎涛神，此说出自东汉《曹娥碑》。曹娥是东汉上虞人，父亲溺于江中，数日不见尸体，当时孝女曹娥年仅十四岁，昼夜沿江号哭。过了十七天，在五月五日也投江，五日后抱出父尸。


春秋时吴国忠臣伍子胥含冤而死之后，化为涛神，世人哀而祭之，故有端午节。

在书中所提到的注释里，仅对p标签清除浮动做了一个简单的说明，内容如下：

p {clear:both;} /* 清除首字的浮动，避免影响p标签的高度与其相叠加 */

就是因为这么一句话，让小土豆这位读者产生了猜想，为什么要清除浮动。在部分读者眼中或许已经比较清楚明白为什么要清除浮动，因为:first-letter伪对象有一个浮动的属性。后来我想想，为什么这个有浮动属性就要清除浮动，这个问题似乎需要说明一下。

问题的出现，就需要去解决。因此我就从没清除浮动到采用不同方式的清除浮动对这段代码进行了简单分析。

未对段落首字设置浮动时 CSS first-letter实现首字下沉

未设置浮动时的首字下沉

p:first-letter {font-weight:bold;font-size:2em;}

这时我们仅仅只是对段落中的第一个字符设置了加粗和2倍大小的文本，那么在示例图中可以看到的效果就是文字放大了而已，并未首字进行下沉的处理。
显然这不是我们所想要的效果，那么这个时候我们要做的就是对首字设置浮动，使其脱离正常的文档流

对段落首字设置浮动后并未增加清除浮动的属性 CSS first-letter实现首字下沉

设置浮动未增加清除浮动

p:first-letter {float:left;font-weight:bold;font-size:2em;}

增加了浮动之后，我们可以看到FF/IE7/IE6中已经得到了我们所想要的效果，但是opera/safari中却出现问题了，在文本内容少的时候，第二个p标签中的文字因为浮动而跑上去了，而只有当文本出现两行的时候才会将下一个p标签的内容移开。
由此可见，清除浮动的必要性还是有的。那么我们就增加一个清除浮动的属性给p标签看看效果。

对段落首字设置浮动后并增加清除浮动的属性 CSS first-letter实现首字下沉

设置浮动后并增加清除浮动属性

p:first-letter {float:left;font-weight:bold;font-size:2em;}
p {clear:both;}

p标签有了清除浮动的属性后，这个时候opera/safari也不再发神经式的把下一个p标签给拉上来了，不过仔细看看似乎间距存在着问题，难道还有其他因素导致了每个段落之间的间距消失了。

看来还是有些问题存在，是不是clear这个清除浮动的方式不对呢。难道是clear清除的仅仅只是浮动的属性而并没有让上一个p标签的高度自适应？带着疑惑，增加点背景色的代码给p标签看看是不是真的这样。

p:first-letter {float:left;font-weight:bold;font-size:2em;background-color:#000000;color:#FFFFFF;}
p {clear:both;background-color:#FF0000;}
CSS first-letter实现首字下沉

利用背景色检查清除浮动后的效果

果然，p标签的高度没有下来，仅仅只是清除了浮动的属性而已，清除浮动那么多的方式（具体可以参考《CSS那些事儿》中关于清除浮动的章节），这个clear不好使，那就换一个方式清除浮动。

p:first-letter {float:left;font-weight:bold;font-size:2em;background-color:#000000;color:#FFFFFF;}
p {overflow:hidden;background-color:#FF0000;}
CSS first-letter实现首字下沉

overflow方式清除浮动

浏览器的世界就是那么神奇，一个方法不行，换一个方法就会看到世界的另一面。这个时候我们可以看到背景色扩充到了整个p标签，并且每个段落之间也存在了间距了，看来问题是解决了。

在这里需要说的一点就是，overflow清除浮动的方式彪叔——梁璟彪不赞成使用，建议使用:after的方式清除浮动，详见《CSS那些事儿》中清除浮动章节。

在这里针对这个首字下沉说了这么多的内容，无非就是想说的是：当我们对标签元素内的内容（或者标签）设置了浮动之后，将会有可能导致该标签元素的错位，因此在设置浮动之后考虑清除浮动也是有必要的，但不是必须的；然后还有一点就是想跟一些朋友分享一个排查问题的方式，就是利用背景色来查找页面出现问题的原因。

友情提醒：请使用不同浏览器查看，并且尝试拖拉窗口，改变窗口大小看效果
演示效果

提示：您可以先修改部分代码再运行

标签：
CSS,first-letter
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“CSS first-letter实现首字下沉”
暂无“CSS first-letter实现首字下沉”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网