CSS使两个不同的div居中对齐的三种解决方案
New
本文主要介绍了CSS使两个不同的div居中对齐的三种解决方案，具体如下
在CSS中，有多种方法可以让两个不同的div居中对齐，包括相对定位和绝对定位。以下是两种常见的方法：
方法一：使用Flexbox
Flexbox是一个用于创建灵活布局的CSS3模块。使用Flexbox，可以很容易地对元素进行居中对齐。
HTML:
<div class="flex-container ...
CSS页面中点击超链接如何跳转新的页面
New
点击超链接后，重新打开一个新的网页，不是在原本的网页进行跳转。
打开创建的网页
a{
/* 去除超链接的下划线 */
text-decoration: none;
}
</style>
</head>
<body>
<div>
点击一下试试
<!-- 跳转到 百度网址-->
<a href="http://www.baidu.com" ...
浅谈display:inline-block元素之间空隙的产生原因和解决办法
New
display:inline-block是一种布局方法，它相比于与浮动、定位最大的不同就是其没有父元素的匿名包裹特性，这使得display:inline-block属性的使用非常自由，可与文字，图片混排，可内嵌block属性元素，可以置身于inline水平的元素中。
在CSS布局中，如果我们想要将一些元素在同一行显示，其中的一种方法就是把要同行显示的元 ...
CSS3模拟小仓鼠一直奔跑的动画特效(实例代码)
New
最近在丽泽桥的花鸟虫鱼市场看见小仓鼠一直在奔跑，觉得它好累啊，但是却又乐此不疲的在跑着，就像我们这些打工族一样。之前见过有人把手机放在小仓鼠的滚轮上记步数，也是挺聪明的。今天就通过CSS3来实现一只一直奔跑着的小仓鼠。
1. 实现思路
本文中的小仓鼠并非一个图片，而是CSS3制作而成，看上去很有意思的一个动画， ...
css九宫格布局的五种方法
New
要实现的九宫格效果图如下：
公共样式：
div{
width: 300px;
height: 300px;
}
ul{
padding: 0;
width: 100%;
height: 100%;
}
li{
list-style: none;
text-align: center;
line-height: 100px;
margin: 3px;
background-color: #243F49;
...
CSS实现背景图片透明文字不透明效果的两种方法
New
网页设计中经常要在背景图上放一些文字介绍，这就需要背景图片能有透明效果以便突出显示文字信息，经多方查阅，终于找到了2种有趣的方法。
1.在文字层添加rgba样式实现半透明效果
方法：
背景图片层添加样式：background-size: cover; 和 position: relative;在文字层添加样式 background:rgba(255,255,255, ...
css实现flex布局自动换行
New
如何让flex布局让超出宽度的子元素自动换行？
父级div设置了display:flex，子元素的总宽度超过父元素的宽度之后，所有子元素的width都失效了，变成了平分父元素的宽度(类似flex=1)。
解决：给父元素加上flex-flow:row wrap 之后就可以让子元素保持设置的宽度并且换行
...
flex和传统方式实现左右两栏式
New
1.混合浮动+普通流
混合浮动+普通流父级：宽度固定left:宽度固定。浮动起来right:宽度和父级一样，设定margin-right:left的宽度px,宽度随父级变化而变化（固定+自适应）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap{
margin:0 au ...
CSS点击切换或隐藏盒子的卷起、展开效果
New
<template>
<div class="main">
<el-button @click="onCllick">切换</el-button>
<transition name="slideDown">
<div class="info" v-if="isShow">1111</div>
</transition>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
export default defin ...
关于css中的 background-attachment 属性详解
New
1、background-attachment的官方说明
设置背景图像是否固定或者随着页面的其余部分滚动
这句话很简洁，简洁到我无法去理解，所以我决定用我自己的想法去理解。
2、background-attachment的值
background-attachment有三个值：
scroll：背景图片随着页面的滚动而滚动，这是默认的。fixed：背景图片不会随着页面的滚动而滚动 ...
CSS实现音频播放时柱状波动效果
New
通过CSS的动画属性animation可以实现音频播放时的动画效果，同时配合JS操作动画的animation-play-state属性，来控制动画的暂停和播放。
网页布局采用的flex布局。若在客户端展示，可使用定位布局（本人遇到flex布局会出现底部轻微颤动的bug）
.voice-playing{
height: 50px;
width: 40px;
display: flex;
...
使用CSS实现一个简单的无限滚动效果
New
一、基本思路
无限滚动效果的基本思路是，当用户滚动到页面底部时，自动加载更多内容，实现页面的无限延伸。我们可以通过 CSS 的 @keyframes 规则和动画来实现这一效果。
二、实现步骤
以下是使用 CSS 实现无限滚动效果的详细步骤和代码示例：
1.HTML 结构
首先，在 HTML 中创建一个容器元素，用来包裹滚动的内容：
<div cl ...
使用CSS实现文字渐变色效果
New
文字渐变色效果（Text Gradient Color）
要在文本中实现渐变色效果，您可以使用CSS中的background-clip属性和CSS渐变来实现。下面是一个示例，展示如何创建文本渐变色效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1. ...
CSS中float用法详解
New
目录float浮动消除浮动float浮动
指将指定元素悬浮于所在整体之上，即将垂直排列的元素转换为水平同行显示平时写出的HTML是具有先后顺序的，对于这个顺序我们称之为标准流而浮动则是脱离标准流的另一个独立标准下面给出float定义：
float:left 左浮动
float:right 右浮动
float:none 无浮动
设置两个div1，div2相邻盒子 ...
使用CSS实现打字机效果
New
实现效果
在线演示
实现
HTML 元素：
<div class="typewriter">
<h1 class="typing">The cat and the hat.</h1>
</div>
实现打字机效果的关键是两个动画效果，文字出现的动画，和光标闪烁出现的动画。
这两个动画的实现方式也很简单，文字出现的打字机动画只通过控制元素长度即可。光标闪烁出现可以通过添加右边框，并且 ...
使用CSS3实现文字带轮廓边框特效的方法
New
"使用CSS3实现文字带轮廓边框特效的方法如下：
<style>
.outlined-text {
font-size: 48px;
font-weight: bold;
text-transform: uppercase;
color: #fff;
position: relative;
display: inline-block;
}
.outlined-text::before,
.outlined-text::after {
content: attr(data-text);
...
CSS使用样式穿透的多种方法
New
通常在引入第三方 UI 组件库（如 element-ui或者easyUI等等），需要自定义组件样式时，但由于样式使用了 scoped 属性（为避免组件之间的样式相互影响），导致无法直接覆盖原组件的样式，这时就需要用到样式穿透。
CSS使用样式穿透的方法有以下几种：
1、使用 >>>符号：
.container >>> .el-input__inner {
width: 160px ...
CSS 中的 display、visibility,和opacity 的区别解析
New
CSS 中的 display、visibility 和 opacity 是用来控制元素显示和隐藏的属性，它们有着不同的作用和效果。
display：
display 属性用于定义元素应该生成的框的类型。它可以控制元素是以什么方式显示，例如 block、inline、inline-block 等。通过改变 display 属性，可以改变元素在布局中所占的空间 ...
CSS3几种实现子容器水平垂直居中的方法
New
前言
本文主要讲解有几种方法可以实现容器与子容器水平垂直居中，这些方法的使用方式。那么好，本文正式开始。
子容器
Flexbox 布局
<div style="display: flex;justify-content: center;align-items: center;border:1px solid gray;height:100px;width:100px;">
<div>1</div>
</div>
在上述代码中我们实现了垂直水平居中 ...
新CSS Math方法中rem()和mod()的使用
New
CSS 添加了许多新的数学函数来补充旧有的函数（如 calc() 和最近的 clamp() ）。这些函数最终都表示一个数值，但其工作原理的细微差别并不总是一开始就很清楚。本文介绍每个函数的常见用例以及不太常见的用例。
rem() 函数的基础知识
余数的数学概念来自除法，表示一个数不能平均除以另一个数时的余数。例如，在 9 ÷ ...
