:before 和 :after的多用途实践 — 提升篇

FEWY

已于 2024-04-06 21:37:46 修改

阅读量963

点赞数 1

分类专栏： CSS 前端简单说文章标签： before after content 字体图标清除浮动

于 2017-05-16 11:01:06 首次发布

本文链接：https://blog.csdn.net/FE_dev/article/details/72236681

版权

前端简单说同时被 2 个专栏收录

45 篇文章 20 订阅

订阅专栏

CSS

17 篇文章 1 订阅

订阅专栏

说明

之前我们已经聊过，关于伪元素 :before 和 :after 的一些基础知识了，但是并没有感觉到他的神奇之处，这次，我们继续来说，看看他有点什么用，基础知识不太明白的可以看这里
:before 和 :after的多用途实践 — 基础篇
http://blog.csdn.net/fe_dev/article/details/71775624

应用

清除浮动（clearfix）

这里说一种用伪元素，清除浮动的方式，这种方式也是非常推荐的一种方式，许多网站都有用到。
代码

.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

字体图标（icon font）

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的场景，清除浮动和字体图标，
这也是最常用到的地方，本文主要是在讲这两个伪元素的使用，所以没有把一些更加深层次的东西讲到，想要了解的小伙伴可以看文中提到的其他的文章。下一篇文章将会讲些用这两个伪元素做的特效。

FEWY

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
:before 和 :after的多用途实践 — 提升篇

说明之前我们已经聊过，关于伪元素 :before 和 :after的一些基础知识了，但是并没有感觉到他的神奇之处，这次，我们继续来说，看看他有点什么用，基础知识不太明白的可以看这里 :before 和 :after的多用途实践 — 基础篇 http://blog.csdn.net/fe_dev/article/details/71775624 应用清除浮动（clearfix）这里说一种用伪元素
复制链接

扫一扫