假设，我们有这样一张 Gif 图：利用 CSS，我们尝试来搞一些事情。图片的 Glitch Art 风在这篇文章中 --CSS 故障艺术，我们介绍了利用混合模式制作一种晕眩感觉的视觉效果。有点类似于抖音的 LOGO。像是这样：假设，我们有这样一张图：只需要一个标签即可<div class="mix"></div>
给两张同样的图片，
......
421
0
0
2023-01-18
❝欲望越大，我们需要的奔跑速度就越快；而筋疲力尽之时，便是我们幸福感滑坡之时 ❞大家好，我是「柒八九」。今天，我们又开辟了一个新的篇幅 --「前端面试」。即是把一些平时常用的概念和工具方法整理和罗列，也算是一种变向的「未雨绸缪」。该系列的文章，大部分都是前面文章的知识点汇总，但是也不乏参考其他优秀文章。不过，大家可以放心，里面的代码和知识点，都有迹可循。好了
......
369
0
0
2023-01-17
css图片居中(水平居中和垂直居中)css图片居中分css图片水平居中和垂直居中两种情况，有时候还需要图片同时水平垂直居中，下面分几种居中情况分别介绍。css图片水平居中利用margin: 0 auto实现图片水平居中利用margin: 0 auto实现图片居中就是在图片上加上css样式margin: 0 auto 如下：<div style="tex
......
409
0
0
2023-01-16
word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。它们的区别就在于：1.word-break:break-all例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长（congratulation等），它会把单词截断，变成该行末端为conra(congrat
......
481
0
0
2023-01-16
在过往，我们想要实现一个图片的渐隐消失。最常见的莫过于整体透明度的变化，像是这样：<div class="img"></div>
div {
width: 300px;
height: 300px;
background: url(image.jpg);
transition: .4s;
......
337
0
0
2023-01-15
今天我们来分享web前端CSS定位中的position：absolute绝对定位的应用场景案例的相关场景！绝对定位是CSS中非常中啊哟的知识点，接下来我我们会通过7个不同的层面结合7个不同的案例来展开讲解！绝对定位元素的特性使元素完全脱离文档流,将释放自己的位置元素的层级提升，会覆盖在其它元素上离自己最近的定位父元素进行位置调整，如果没有定位的父元素，则相对
......
393
0
0
2023-01-12
实现网站全页面快速置灰，可以使用一个 css 属性，加到 html 标签上，即可快速实现filter: grayscale(100%);
-webkit-filter: grayscale(100%); //兼容chrome和safari
-moz-filter: grayscale(100%); //兼容Firefox
-ms-
......
458
0
0
2023-01-08
54个CSS重难点，1-12分享本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。因为涉及的内容较多，我分5篇内容发出来，好逐一进行让大家消化这些内容，本次我把前13-24个CSS重难点整理出来，具体内容如下：13、如何判断元素是否到达可视区域（图片懒加载原理）
......
349
0
0
2023-01-08
css选择器选择奇数行或偶数行实现方式有两种方式一:nth-child/* 奇数行*/
div:nth-child(odd){
}
/* 偶数行 */
div:nth-child(even){
}
:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。方式二:nth-of-type/* 奇数行*/
......
320
0
0
2023-01-07
本次我把CSS中的重难点整理出来，总共54个核心知识点，供大家复习，希望能帮到大家。这些重难点是进阶高薪必需要掌握的知识点，同时也是面试必问的内容。因为涉及的内容较多，我分5篇内容发出来，好逐一进行让大家消化这些内容，本次我把前1-12个CSS重难点整理出来，具体内容如下：CSS选择器与优先级CSS中可继承与不可继承属性有哪些display的block 、i
......
430
0
0
2023-01-05
写了这么一些时间的CSS，有时候觉得有些混乱，尤其是做样式修改的时候。后来觉得遵循一些书写规范和顺序来的话，一来会让自己的思路很清晰，二来修改的时候很明确，不容易被冗余的样式影响。还有很重要的一点就是，遵循浏览器渲染顺序，减少浏览器reflow（回流），提升浏览器渲染dom的性能。定位属性的修改会导致reflow，改变文字颜色、背景等会使得浏览器repain
......
406
0
0
2023-01-04
一、概述网格布局（Grid）是最强大的 CSS 布局方案。它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。上图这样的布局，就是 Grid 布局的拿手好戏。Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布
......
446
0
0
2023-01-01
一、什么是防御式编程防御性编程是一种细致、谨慎的编程方法（习惯）。我们在写代码时常会有“以防万一”的心态，把以防万一有可能出现的情况提前考虑进去，规避以免以防万一出现带来的问题。应用防御性编程技术，你可以侦测到可能被忽略的错误，防止可能会导致灾难性后果的“小毛病”的出现，在时间的运行过程中为你节约大量的调试时间。比如我们在写下面这个效果时，如果只是按设计师设
......
329
0
0
2022-12-31
本人实现了其棒棒糖果按钮，如下图所示：在线演示地址见here。使用完全使用CSS实现，无需JS。源码如下：<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
*{ margin: 0px; padding: 0px
......
390
0
0
2022-12-26
响应式布局：只需要开发一套代码，只需要一套代码使页面适应不同的屏幕。响应式设计通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容；响应式布局的 5 种实现方案百分比布局媒体查询布局rem 响应式布局vw 响应式布局flex 弹性布局一、百分比布局比如，当浏览器的宽度或者高度发生变化时，通过百分比单位可以使得浏览器中的组件的宽和高随着
......
502
0
0
2022-12-20