伪类:after/:before基本使用

div:before{
    content:'';//必须要写，没写则伪元素无效
    display:;
    position:'';
    ...
}
//在一个div子元素前插入元素，并非渲染在文档里，而是在css里渲染

使用技巧：

（1）界面分隔空间

开发中，常常会有类似这样的分隔 空间

div:before{
    content:'';
    display:'block';
    background:#F8F8F8;
}

只需添加几行css就可实现效果

（2）用来清除浮动

div:before{
    content:'';
    display:'block';
    clear:both;
}

(3)画三角符号

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .box{
      position: relative;
      width:200px;
      height:200px;
      border:1px solid #ccc;
      margin:100px auto;
    }
    .box:before{
      content:'';
      display: block;
      width: 0;
      height: 0;
      border:50px solid transparent;
      border-right-color: blue;
      position: absolute;
      left:-100px;
      top:50px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

:after/:before使用技巧的更多相关文章

  1. 探究javascript对象和数组的异同，及函数变量缓存技巧

    javascript中最经典也最受非议的一句话就是:javascript中一切皆是对象.这篇重点要提到的,就是任何jser都不陌生的Object和Array. 有段时间曾经很诧异,到底两种数据类型用来 ...

  2. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  3. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

  4. 工欲善其事，必先利其器 之 VS2013全攻略(安装，技巧，快捷键，插件）！

    如有需要WPF工具的朋友可以移步 工欲善其事,必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATI ...

  5. 15个关于Chrome的开发必备小技巧[译]

    谷歌Chrome,是当前最流行且被众多web开发人员使用的浏览器.最快六周就更新发布一次以及伴随着它不断强大的开发组件,使得Chrome成为你必备的开发工具.例如,在线编辑CSS,console以及d ...

  6. Git小技巧 - 指令别名及使用Beyond Compare作为差异比较工具

    前言 本文主要写给使用命令行来操作Git的用户,用于提高Git使用的效率.至于使用命令还是GUI(Tortoise Git或VS的Git插件)就不在此讨论了,大家根据自己的的喜好选择就好.我个人是比较 ...

  7. 【工具使用】mac电脑使用技巧

    本文地址 分享提纲: 1.  mac命令行和finder的交互 2. 一些mac的插件 3. 一些开发的配置 1.mac命令行和findder交互           1)命令行中打开当前文件夹: o ...

  8. Function.prototype.toString 的使用技巧

    Function.prototype.toString这个原型方法可以帮助你获得函数的源代码, 比如: function hello ( msg ){ console.log("hello& ...

  9. SAP CRM 性能小技巧

    导言 本页面打算收集SAP CRM实施中可以用于避免性能问题的注意事项,重要的事项会由图标标识. 如果你有其他的技巧想要说出来,别犹豫! 性能注意事项 通用 缓存读取类访问,特别是在性能关键的地方,比 ...

  10. 分享两个BPM配置小技巧

    1.小技巧 流程图修改后发布的话版本号会+1,修改次数多了之后可能会导致版本号很高,这个时候可以将流程导出,然后删除对应的流程包再导入,发布数据模型和流程图之后,版本清零 2.小技巧 有的同事入职后使 ...

随机推荐

  1. Nginx负载均衡——基础功能

    熟悉Nginx的小伙伴都知道,Nginx是一个非常好的负载均衡器.除了用的非常普遍的Http负载均衡,Nginx还可以实现Email,FastCGI的负载均衡,甚至可以支持基于Tcp/UDP协议的各种 ...

  2. Java 多线程之哪个对象才是锁？

    问题背景 在感觉正常的使用ArrayList的迭代删除的操作的时候,发现了如下的崩溃日志: Caused by: java.util.ConcurrentModificationException a ...

  3. win10每次开机都显示“你的硬件设置已更改，请重启电脑……”的解决办法

    之前的系统没有这个问题,就是win10有这个问题,过一段时间就会出现这个问题,网上找了很多,最后发现是显卡驱动的问题,是A卡的问题,只需要更新A卡驱动即可,如果更新A卡驱动不行的话,或者说A卡驱动已经 ...

  4. WordPress后台添加友情链接管理功能

    其实很早之前WordPress是有这个功能的,但是伴随着wordpress的经常升级和主题的升级以及更换,有时候后台会发现没有链接管理的入口,不过还是可以通过代码还原这个功能. 将以下代码添加到您当前 ...

  5. linux操作日志：远程登录设置

    想要远程linux服务器,首先需要在服务器上开通ssh服务,安装命令如下: sudo apt-get install openssh-server   在上图的提示中,输入“y”,继续等待安装,安装成 ...

  6. [UWP]理解ControlTemplate中的VisualTransition

    1. 前言 VisualTransition是控件模板中的重要组成部分,无论是自定义控件或者修改控件样式都会接触到VisualTransition.明明这么重要,博客园上好像都没多少关于VisualT ...

  7. nginx里的sticky的作用

    1.Sticky工作原理 : Sticky是nginx的一个模块,它是基于cookie的一种nginx的负载均衡解决方案,通过分发和识别cookie,来使同一个客户端的请求落在同一台服务器上,默认标识 ...

  8. react+redux+webpack+git技术栈

    一.git bash here mdkr cnpm init -y ls -a ls -l ls -la隐藏的也可查看 cat package.json 二.npm npm i webpack-dev ...

  9. 计时器setInterval()、setTimeout()

    计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码. 语法: setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串. 2. 交互 ...

  10. [css 揭秘]：CSS揭秘 技巧（二）：多重边框

    我的github地址:https://github.com/FannieGirl/ifannie/ 源码都在这上面哦! 喜欢的给我一个星吧 多重边框 问题:我们通常希望在css代码层面以更灵活的方式来 ...