CSS中visibility:hidden、display:none、opacity:0、rgba设置元素隐藏的区别
New
共同点：
visibility:hidden、display:none、opacity:0三者都可以使元素隐藏
区别在于：
1、visibility:hidden 保留dom节点，元素在文档流中占据空间，不引起重排和回流；父元素设置该属性时，子元素同样会生效，但可以通过visibility:visible;修改子元素的显示效果；
2、display:none 不保留dom节点，元素直接从文档流中删 ...
CSS处理文字段落尾行行末缩进，点击查看更多展开效果
New
需求：
如图：第三行文末需要展示省略号，并且有查看更多按钮，切换显示隐藏。
常规css处理方法：
控制文字行数：
// 多行显示
.text_morerow {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2; // 控制显示行数
-webkit-box-orient: vertical;
word-break: break-all;
...
CSS中外边距塌陷的八种解决方法
New
什么是margin-top塌陷
margin-top塌陷是在CSS的盒子模型中出现的一种现象，描述的是当父元素包裹着一个子元素的时候，当给子元素设置margin-top属性时，此时只是想让子元素的边框距离父元素边框有一段距离，而却出现了父元素的顶端距离body这个边框出现了位移，这就是margin-top塌陷的现象。
满足以下条件就会产生外边距塌 ...
html+css实现点赞特效的示例代码
New
本文主要介绍了html+css实现点赞特效的示例代码，分享给大家，具体如下：
html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title> ...
css实现两个div并列显示的多种方法
New
方法一：float浮动，float:left;为左浮动，也可以设置为float:right;右浮动，也可以实现两个div并列一行。
#div1{
width:50%;
height:300px;
background:blue;
float:left;
}
#div2{
width:50%;
height:300px;
background:green;
float:left;
}
方法二：display:table-cell
#parent{ ...
css中hover变大效果
New
html代码：
<div id="body_img">
<img src="img/11.jpg" alt="">
</div>
css代码：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#body_img img{
width: 600px;
height: ...
CSS页面去除滚动条详细步骤
New
步骤一：给元素设置高度 + overflow: auto;
如果只是去除垂直方向上的滚动条，可以设置 overflow-y
PS：水平方向溢出设置：overflow-x ；水平和处置方向溢出设置一致时，可以设置：overflow
代码示例：
一个类名为 ‘scroll-box’ 设置了一定高度，它里面的内容如果超出了设定的高度，就会出现滚动条，上下翻滚可 ...
css属性pointer-events实现点击穿透的示例代码
New
目录常用属性案例一案例二参考pointer-events文档
pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target
常用属性
/* Keyword values */
pointer-events: auto; /* 与pointer-events属性未指定时的表现效果相同 */
pointer-events: none; /* 元素永远不会成为鼠标事件的target ...
CSS设置背景颜色透明的两种方法实例详解
New
在css中设置背景颜色透明的方法有两种： 一种是通过rgba方法设置，另一种是通过backgroundh和opacity设置
下面分别是css中 两种方法实现的背景颜色透明实例
1，通过background和opacity设置背景颜色透明
background属性中属性值比较简单，所以我们简单看看opacity属性
opacity属性参数的“不透明度&rdquo ...
CSS3属性中的text-overflow:ellipsis详解
New
语法：
text-overflow:clip | ellipsis
默认值为clip 不显示省略标记
clip:当前对象内文本溢出时不显示省略标记,而是将溢出部分裁剪。
ellipsis:当对象内文本一处时显示省略标记(...)。
一、常见的单行文本溢出显示省略写法：
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
<!DOCTYPE html>
<htm ...
css实现文字大小自适应的示例代码
New
在页面编写中经常会碰到页面自适应的问题，也就是页面内部的元素会随着窗口的放大缩小而放大缩小，box可以通过calc + 百分比的形式做到页面自适应，但是box内的字体却无法做到这点，往往box自适应大小了，内部的字体还是原来的大小，看起来会非常别扭，下面就来css实现一下页面文字的自适应大小。
clamp()函数
这里主要用到 ...
纯CSS杂志封面折叠效果
New
本文主要介绍了纯CSS杂志封面折叠效果，分享给大家，具体如下：
如图所示，这是一个杂志封面图的折叠效果，折叠前后的图片内容完全不违和，瞬间对这个图片内容的排版设计很是称赞，但这块不再本次文章的讨论范围，本次文章是要用纯CSS实现这个折叠效果。
按图片的效果进行代码还原很多方式都可以实现，以下是本次实现的主 ...
css中div盒子height:100%高度无效解决办法
New
需要分成2种情况来看待
一、flex布局情况下
1、在父元素设置一个固定px高度例如height: 500px2、在子元素设置height: auto
那么为什么height: 100%不生效呢？原因是flex布局也是自适应的，他的单位默认是auto和百分比无法计算得出一个合理值，因此高度设置height: 100%失效了。
'auto' * 100/100 = NaN
二、非flex布局情况 ...
css中不确定盒子宽高上下左右居中的八种方法小结
New
第一种：利用绝对定位和margin:auto实现
html：
<div class="box">
<img src="./img/77.jpeg" alt="" class="img">
</div>
css：
<style>
body{
margin: 0;
}
.box{
height: 100vh;
background-color: hotpink;
position: relative;
}
.img{
position: absolute;
...
CSS实现元素水平垂直居中的几种方法
New
1. 使用Flexbox布局
Flexbox是CSS的强大布局模型，它为我们提供了简单而灵活的方法来实现元素的水平和垂直居中。
html复制代码
<div class="container">
<div class="centered-element">
<!-- 内容 -->
</div>
</div>
css复制代码
.container {
display: flex;
justify-content: center;
align-items: center ...
css实现单行文本溢出显示省略号的示例代码
New
可以使用CSS中的text-overflow属性来实现单行文本溢出显示省略号。
具体实现步骤如下：
首先，将需要显示省略号的元素的宽度设置为固定值或最大宽度。
.ellipsis {
width: 200px;
/* 或者 */
max-width: 200px;
}
接着，使用white-space属性将元素的文本内容强制放在一行中，防止换行。
...
CSS中图片旋转超出父元素解决办法
New
下面的两种解决办法都会导致图片缩小，可以给图片进行初始化的宽高设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
...
diaplay:table布局神器的绝妙应用场景
New
一、CSS display属性与表格布局相关的属性值解释
table 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。table-row-group 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。table-header-group 此元素会作为一个或多个行的分组来显示（类似 <thead>）。ta ...
CSS动态流光线条效果和颜色渐变效果的实现代码
New
一、实现动态流光线条效果
动态流光线条效果可以为元素添加一个闪耀流动的光线效果，使其更加吸引人的注意力。
/* CSS 代码 */
@keyframes glowing {
0% {
background-position: 0 0;
}
50% {
background-position: 400% 0;
}
100% {
background-position: 0 0;
}
}
.element {
background-image ...
使用CSS实现锯齿形边框的示例代码
New
前言
不知道大伙有没有见过下面这种效果。
没错，这回给大伙带来的是一个锯齿形边框，类似于传统邮票的边框，有一圈锯齿形状，具体效果可参考下面的图片。其实看到这种效果，相信很多人第一反应是采用伪元素的方式添加小三角形来实现锯齿状，确实是这样的，下面就带大家来实现它。
效果预览
结构构建
HTML这一部分很简单 ...
