我不知道你知不知道我知道的伪元素小技巧

伪元素

伪元素能做什么?我们要他有何用?它能为我们解决什么问题?和其他的方法相比她有什么有点?我们为什么要使用它?

伪元素和伪类一样,添加到选择器,但是不是描述状态,他允许我们为元素某些部分设置样式;利用伪元素,我们可以简化页面的html标签,同时用起来也很方便,善于使用伪元素可以让你的页面更加地简洁优雅。之所以叫伪元素,是因为他修饰不在文档树中的部分;不是真实存在的;

伪元素实用小技巧

1.清除浮动

何谓清除浮动—?一个父元素的所有子元素如果都是浮动的,那么这个父元素是没有高度的;父元素并没有脱离正常的文档流,仍然占据正常文档流的空间;

  1. 如果这个父元素的相邻元素是行内元素,那么这个行内元素将会在这个父元素的区域内见缝插针,找到一块放得下它的地方
  2. 如果相邻的元素是一个块级元素,那么设置这个块级元素的margin-top将会以这个父元素的起始位置作为起点。

问题:如何解决高度塌陷?

方法:把父容器的高度撑起来,考虑到浮动了的元素并没有脱离正常文档流,而其它元素会围绕着它环绕,所以清除浮动简单有效的办法就是让环绕的元素不可环绕,把它变成一把尺子,放在最后面,把所有浮动的元素顶起来,而这把尺子就是一个设置了clear的块级元素。因为块级元素会换行,并且设置它两边不能跟着浮动的元素,所以它就跑到浮动元素的下面去,就像一把尺子把浮动元素的内容给顶起来了。而这个可以用一个after实现,因为after就是最后一个子元素:

.clearfix:after{
    content: "";
    display: block;
    clear:both;
}复制代码

2.画分割线

在开发中如果我们遇到类似这样的需求我们?我们应该如何只用一个简单的css元素去实现他?

方案:一个p标签,左右两条线用before和after画出来:

3.计数器

动态的计算商品的数量,我们经常会借用js来实现;我想告诉css也能实现这个效果,他比js用起来简单多了

1.counter-reset: 属性创建或者重置一个或多个计数器; 2.counter-increment: 属性递增一个或多个计数器值; 3.content: 与:before 及:after 伪元素配合使用,来插入生成内容。

没有用到一行js代码,你可以试一试;这个主要是结合:checked和counter,用before/after纯CSS实现的,这种纯粹是炫技;

4.平行四边形

有没有办法只让容器的形状倾斜而保持其内容不变呢?或许你会想到嵌套两层元素,外层skew(),对内容在应用一次反相skew变形,从而抵消变形的效果。但是意味着我们不得不使用一层额外的HTML元素包裹内容.有些累赘

解决方案:伪元素,把样式应用到伪元素上,对伪元素进行变形,再把伪元素定位+层级放到到住宿元素下面

光说不练,假把式试一试

5. 梯形标签页

在网页中我们经常见到梯形形状的标签页,常见的技巧都是比较杂乱,或者说难以维护的,那他们是如何实现的呢?

解决方案: 三维世界中旋转一个矩形,由于透视关系,我们在二维图像上看到一个梯形,再结合平行四边实现的方法便能实现

perspective: 观察者与z=0平面的距离;

对元素使用了3D变形之后,其内部的变形效应是"不可逆转的",和2D变形不同(2D变形内部的逆向变形可以抵消外部的变形效应);

为了让他的尺寸更好掌握,我们可以为他指定transform-origin:bottom;也可用scale()对他在进行美观操作;

试一试

6 多列均匀布局

如何实现下列这种多列均匀布局:

通过给伪元素 :after 设置 inline-block 设置宽度 100% ,配合容器的 text-align: justify 就可以轻松实现多列均匀布局了。

那么为什么使用了 :after 伪元素之后就可以实现对齐了呢?

原因在于 justify 只有在存在第二行的情况下,第一行才两端对齐,所以在这里,我们需要制造一个假的第二行,而 :after 伪元素正好再适合不过。

需要注意的是img/input等单标签是没有before/after伪元素的,因为它们本身是不可以有子元素,如果你给img添加一个before,那么会被浏览器忽略。

伪元素能实现的功能很多!欢迎大家在评论底下一一补充

欢迎学习交流sunseekers

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Sign

web版《合成10》制作过程

《合成10》是一个很容易上瘾的游戏。 之前尝试的写了个网页版,游戏地址 ccx01.com/game/get10/ 现在写一下网页版合成10的制作过程。 这个游...

34012
来自专栏菩提树下的杨过

水平/垂直都居中的div

用css样式使div水平/垂直居中,兼容于目前各种主流浏览器 思路: 用绝对定位将div左顶点,定位于浏览器正中心,然后再利用负的margin,将div...

2189
来自专栏向治洪

html5 jqueryrotate插件实现旋转动画

CSS3 提供了多种变形效果,比如矩阵变形、位移、缩放、旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动。然后 IE10 以下版本的浏览器不支持 CSS3...

2946
来自专栏小狼的世界

em是否到了退出的时候

今天看到 YUI CSS 框架中的时,看到用了其用来表示宽度的时候,很多地方都用了 em,在调整字体大小的时候,用了百分比。官方的说法是这样的:

692
来自专栏iOS开发攻城狮的集散地

CALayer系列、CGContextRef、UIBezierPath、文本属性Attributes

2605
来自专栏IMWeb前端团队

浅谈CSS3多列布局

相信大家都看过报纸,报纸上的内容大多数都是分栏显示的,如下图所示: ? 对于前端攻城狮来说,这种分列布局,在以前虽然可以实现,可是难度却是不小,工作量很大,必须...

1878
来自专栏用户2442861的专栏

CSS float浮动的深入研究、详解及拓展(二)

by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wo...

740
来自专栏别先生

jQuery的简单入门练习

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>jQuery的练习</title> ...

2417
来自专栏HTML5学堂

CSS3动画,为你带来极致的视觉体验!

HTML5学堂:随着网络的发展,浏览器具有更强的渲染与高级代码的执行能力。所以在当前,大量的动画效果由原来的JavaScript制作正慢慢的被CSS3所替代,究...

3187
来自专栏互联网杂技

box布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>...

2707

扫码关注云+社区