关于利用:first-letter实现首字下沉的一些看法(3)
作者:林小志 来源:林小志blog 发布时间:2010-04-20 17:19:00
对段落首字设置浮动后并增加清除浮动的属性
设置浮动后并增加清除浮动属性
p:first-letter {float:left;font-weight:bold;font-size:2em;}
p {clear:both;}
p标签有了清除浮动的属性后,这个时候opera/safari也不再发神经式的把下一个p标签给拉上来了,不过仔细看看似乎间距存在着问题,难道还有其他因素导致了每个段落之间的间距消失了。查看demo
看来还是有些问题存在,是不是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;}
利用背景色检查清除浮动后的效果
果然,p标签的高度没有下来,仅仅只是清除了浮动的属性而已,查看demo,清除浮动那么多的方式(具体可以参考《CSS那些事儿》中关于清除浮动的章节),这个clear不好使,那就换一个方式清除浮动。
p:first-letter {float:left;font-weight:bold;font-size:2em;background-color:#000000;color:#FFFFFF;}
p {overflow:hidden;background-color:#FF0000;}
overflow方式清除浮动
浏览器的世界就是那么神奇,一个方法不行,换一个方法就会看到世界的另一面。这个时候我们可以看到背景色扩充到了整个p标签,并且每个段落之间也存在了间距了,看来问题是解决了,查看demo。
在这里需要说的一点就是,overflow清除浮动的方式彪叔——梁璟彪不赞成使用,建议使用:after的方式清除浮动,详见《CSS那些事儿》中清除浮动章节。
在这里针对这个首字下沉说了这么多的内容,无非就是想说的是:当我们对标签元素内的内容(或者标签)设置了浮动之后,将会有可能导致该标签元素的错位,因此在设置浮动之后考虑清除浮动也是有必要的,但不是必须的;然后还有一点就是想跟一些朋友分享一个排查问题的方式,就是利用背景色来查找页面出现问题的原因。
友情提醒:打开文中所提到的demo时,请使用不同浏览器查看,并且尝试拖拉窗口,改变窗口大小看效果


猜你喜欢
- 一、两种模式pytorch可以给我们提供两种方式来切换训练和评估(推断)的模式,分别是:model.train() 和 model.eval
- 前言1.工作中,经常需要合并多个Excel文件。如果文件数量比较多,则工作量大,易出错,此时,可以使用Python来快速的完成合并。2.使用
- 最近碰见太多次lambda函数了,那就来详细解释一下该函数。lambda函数我们先对lambda函数进行一个简单的介绍lambda函数是一种
- 背景在一次进行SQl查询时,我试着对where条件中vachar类型的字段去掉单引号查询,这个时候发现这条本应该很快的语句竟然很慢。这个va
- 虽然python是万能的,但是对于某些特殊功能,需要c语言才能完成。这样,就需要用python来调用c的代码了具体流程:c编写相关函数 ,编
- 问题描述在深度学习相关任务的训练时,需要在训练的每个 epoch 记录当前 epoch 的准确率(如下图所示),那么在 python 中要怎
- 在使用pytorch作为深度学习的框架时,经常会遇到变量variable、张量tensor与矩阵numpy的类型的相互转化的问题,本章结合这
- 公司后端服务使用 java 重构后,很多接口采用了阿里的 dubbo 协议。而 python 是无法直接调用 dubbo 接口的,但可以通过
- 前言在C语言中,由于变量一定是先声明,后使用,所以我们可以清楚的知道,现在使用的变量是全局还是局部,比如:int a = 5; void t
- 我就废话不多说了,大家还是直接看代码吧~func main() { fmt.Println(exponent (5,3))}//a的n次方/
- 本机中原pyinstaller版本为3.5版本,本打算通过 pip install --upgrade pyinstaller进行升级,竟然
- 本文实例讲述了Python读取文件内容的三种常用方式。分享给大家供大家参考,具体如下:本次实验的文件是一个60M的文件,共计392660行内
- 服务端监听端口 listen()方法:net.listen({监听类型},{监听的ip和端口})(conn, err){}返回值:conn是
- 在我们的网站建设中,为网站打造一个契合网站主题的个性化标志则是必需的,这直接关系到能否成功地塑造网站的品牌。这从某些角度看仍在网站推广的范畴
- 一、架构介绍Scrapy一个开源和协作的框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的,使用它可以以快速、简单、可扩展的方
- 1. 文件注释File -> settings -> Editor -> File and Code Templates
- mysql binlog3种格式,row,mixed,statement. 解析工作mysqlbinlog --base64-output=
- 跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLH
- 当在一个分支的开发工作未完成,却又要切换到另外一个分支进行开发的时候,除了commit原分支的代码改动的方法外,我觉得git st
- 正在编写的程序用的很多Windows下的操作,查了很多资料。看到剪切板的操作时,想起以前想要做的一个小程序,当时也没做,现在正好顺手写完。功