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

Jonathan Shieber 发布于2019-08-29 13:45 / 1113人阅读

摘要：伪元素伪元素能做什么我们要他有何用它能为我们解决什么问题和其他的方法相比她有什么有点我们为什么要使用它伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式利用伪元素，我们可以简化页面的标签，同时用起来也很方便，

伪元素

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

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

伪元素实用小技巧

1.清除浮动

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

如果这个父元素的相邻元素是行内元素，那么这个行内元素将会在这个父元素的区域内见缝插针，找到一块放得下它的地方

如果相邻的元素是一个块级元素，那么设置这个块级元素的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元素包裹内容.有些累赘

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

光说不练，假把式试一试

梯形标签页

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

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

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

GPU云服务器云服务器你知道你应该知道数据分析知道你百度一下你就知道了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112686.html

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

摘要：伪元素伪元素能做什么我们要他有何用它能为我们解决什么问题和其他的方法相比她有什么有点我们为什么要使用它伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式利用伪元素，我们可以简化页面的标签，同时用起来也很方便，伪元素伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？伪元素和伪类一样，添加到选择器...

wenyiweb 2019-08-21 17:28 评论0 收藏0
我不知道你知不知道我知道的伪元素小技巧

摘要：伪元素伪元素能做什么我们要他有何用它能为我们解决什么问题和其他的方法相比她有什么有点我们为什么要使用它伪元素和伪类一样，添加到选择器，但是不是描述状态，他允许我们为元素某些部分设置样式利用伪元素，我们可以简化页面的标签，同时用起来也很方便，伪元素伪元素能做什么？我们要他有何用？它能为我们解决什么问题？和其他的方法相比她有什么有点？我们为什么要使用它？伪元素和伪类一样，添加到选择器...

guyan0319 2019-08-01 17:56 评论0 收藏0
你不知道的CSS（三）

摘要：本文首发于我的博客在前面两篇文章你不知道的一和你不知道的二中大致介绍了一些方面比较隐晦的但又很实用的技巧。系列文章你不知道的一你不知道的二本文首发于我的博客本文首发于我的博客在前面两篇文章《你不知道的CSS（一）》和《你不知道的CSS（二）》中大致介绍了一些CSS方面比较隐晦的但又很实用的技巧。相信这些技巧会为大家在项目实践中带来一定的帮助，本文作为《你不知道的CSS》系列的第三篇...

xiangzhihong 2019-08-29 13:28 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

mikasa 2019-08-01 18:18 评论0 收藏0
HTML-CSS-JS

摘要：本周于上海闭幕，掘金和知乎上都有对应的实录和问答，但会议的视频目前都还没放出来，有心的同学如果找到了欢迎分享。建议中英文对照阅读。英文原文前端独立技术博客推荐推荐一些现在还在坚持原创的博主，有业界大牛，也有小鲜肉，也有国外美女。 CSS 样式书写规范最佳实践本文的所列是实践当中得出的一套比较不错的 CSS 书写规范，可以结合自身团队发展出一套适合自己业务的规范。 CSS中的字体与排版...

李世赞 2019-08-29 14:08 评论0 收藏0