:before 和 :after的多用途实践 — 提升篇
2017-05-16 11:01
330 查看
说明
之前我们已经聊过,关于伪元素 :before 和 :after的一些基础知识了,但是并没有感觉到他的神奇之处,这次,我们继续来说,看看他有点什么用,基础知识不太明白的可以看这里:before 和 :after的多用途实践 — 基础篇
http://blog.csdn.net/fe_dev/article/details/71775624
应用
[b]清除浮动(clearfix)[/b]这里说一种用伪元素,清除浮动的方式,这种方式也是非常推荐的一种方式,许多网站都有用到。
代码
.cf:before,.cf:after { content:""; display:table; } .cf:after { clear:both; }
解释
这段代码,定义了一个类选择器,.cf,只要把他加到元素上,就可以清除浮动,解释一下,在.cf之前和之后,都会生成了一个“”,就是空,而
display:table;,让生成的东西,当做块级表格来显示,这样就可以触发BFC,(Block formatting context 直译为”块级格式化上下文”),他的作用就是,防止外边距溢出,而
clear:both;就是用来清除浮动了。
简单说,就是一个元素之前和之后都会生成一个具有表格属性的东西,之前的东西用来防止外边距溢出,之后的东西是真正用来清除浮动的,类似于在元素最后加一个空标签,来清除浮动。
不清楚外边距溢出?看下面
代码(外边距溢出)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外边距溢出</title> <style> #parent{ width:200px; height:200px; background:red; } #children{ margin:20px; width:100px; height:100px; background:blue; } </style> </head> <body> <div id="parent"> <div id="children"></div> </div> </body> </html>
效果图
我们可以看出蓝色块的上外边距,并不在红色块中,已经在外边了,这就是外边距溢出了。
代码(解决外边距溢出)
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>解决外边距溢出</title> <style> #parent{ width:200px; height:200px; background:red; } #children{ margin:20px; width:100px; height:100px; background:blue; } /* 解决外边距溢出 */ #parent:before{ content:""; display:table; } </style> </head> <body> <div id="parent"> <div id="children"></div> </div> </body> </html>
效果图
这次再看,蓝色块的上外边距没有到红色块外边,这样就解决外边距溢出的问题了,同样解决外边距溢出的问题,还可以用,边框和内边距来解决,比如,上面的代码中,如果给红色块设置了border,或者padding同样可以解决问题。
注意:生成的东西(
content:"";),是在元素内部,算是元素的子元素,不是同级元素,不是兄弟元素,这点要记住。
还有一种简单点的写法
.clearfix:after { content:""; display: block; clear:both; }
这种写法就是单纯的清除下浮动了,不考虑外边距的问题。
当然,清除浮动怎么会只有这两种方法,还有不明白BFC?
请参考
详解 清除浮动 的多种方式(clearfix)
http://blog.csdn.net/fe_dev/article/details/68954481
[b]字体图标(icon font)[/b]
icon font 指的是用字体文件取代图片文件,来展示图标、特殊字体等元素的方法。
简单说就是,这个字长的像图标,你可以把他当字来对待,可以改颜色(color),改大小(font-size),加阴影(text-shadow)
代码
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字体 图标</title> <style> @font-face { font-family: 'icon'; /*定义字体名称*/ src:url('fonts/fontawesome-webfont.woff'); /*定义字体文件所在路径*/ } .icon {font-family: 'icon';} /*使用字体*/ /*生成图标*/ .fa-th-large:before { content: "\f009";color:red} .fa-star-o:before { content: "\f006"; font-size:40px} .fa-user:before { content: "\f007";text-shadow: 5px 5px blue;} </style> </head> <body> <div class="icon fa-th-large"> </div> <div class="icon fa-star-o"></div> <div class="icon fa-user"></div> </body> </html>
效果图
上面的代码中可以看到 content 后面是一串奇怪的符号,这串符号是一个16进制的序号,简单说就是,图标的编号,每个图标对应一个序号,想用什么图标就写什么序号。
字体文件我用的是Font Awesome的,到下面这个网址,可以下载,也可以找找你喜欢的图标来用。
http://fontawesome.dashgame.com/
woff文件解释一下
Web开放字体格式(Web Open Font Format,简称WOFF)是一种网页所采用的字体格式标准。此字体格式发展于2009年,现在正由万维网联盟的Web字体工作小组标准化,以求成为推荐标准。此字体格式不但能够有效利用压缩来减少档案大小,并且不包含加密也不受DRM(数位著作权管理)限制。
说下@font-face,他就是用来定义一个字体的
语法
@font-face { /*必需的 定义字体名称*/ font-family: <FontName>; /*必需的 字体文件路径*/ src: <source> [<format>][,<source> [<format>]]*; /*可选 定义字体的粗细。默认值是"正常"*/ [font-weight: <weight>]; /*可选 定义该字体应该是怎样样式。默认值是"正常"*/ [font-style: <style>]; }
一般为了让更多的浏览器支持,会写成这样
@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ }
解释下
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别
IE 6-8 是不支持 format() 这种格式说明的,只会读取类似 src:url() 这样的格式,所以 IE 6-8 会把第一个引号到最后一个引号之间的内容都当做字体的 URL,结果就会返回一个 404。因此可以加上一个 ?,后面的内容就成为一个查询字符串,解决了 404 的问题。iefix 在这里是类似于注释的东西,你可以随便写。另外在一部分 Apache 服务器中,缺少了 # 会返回 403,所以再加上 #
如果大家对@font-face的理解还是不够清楚,可以参考
http://www.w3cplus.com/content/css3-font-face
http://www.runoob.com/cssref/css3-pr-font-face-rule.html
总结
这次主要是介绍了两个用到,:before 和 :after的场景,清除浮动 和 字体图标,这也是最常用到的地方,本文主要是在讲这两个伪元素的使用,所以没有把一些更加深层次的东西讲到,想要了解的小伙伴可以看文中提到的其他的文章。下一篇文章将会讲些用这两个伪元素做的特效。
相关文章推荐
- :before 和 :after的多用途实践 — 提升篇
- :before 和 :after的多用途实践 — 特效篇(1)
- :before 和 :after的多用途实践 — 特效篇(2)
- :before 和 :after的多用途实践 — 特效篇(1)
- :before 和 :after的多用途实践 — 基础篇
- :before 和 :after的多用途实践 — 特效篇(3)
- :before 和 :after的多用途实践 — 特效篇(3)
- :before 和 :after的多用途实践 — 特效篇(2)
- :before 和 :after的多用途实践 — 基础篇
- 【CSS 技能提升】 :before和:after的使用
- css before&after 特殊用途
- aspect学习(1)before&after&around
- spring AOP @Around @Before @After 区别
- 你所不知的 CSS ::before 和 ::after 伪元素用法
- mysql之触发器before和after的区别
- 获得性能大幅提升的go程序优化实践,火焰图使用
- before和:after
- :after,:before,css的animation
- WEB站点性能优化实践(加载速度提升2s)