提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
- 一、旋转效果
- 二、animation
- 三、rem适配(配合flexible.js效果更佳)
- 适配是适应宽度,如果高度(即内容多少是可以变的)是变化的,则定位或浮动的高度不能写成响应式或百分比,否则位置会发生变化
- 四、媒体查询
- 五、grid布局
- 六、overflow: auto实现滚动,可以滚动盒子必须有高度
- 七、遮罩层
- 八、input radio修改样式
- 九、Transform和animation
- 十、select修改原来样式
- 十一、nth:chid()后代选择器
- 十二、flex布局
- 十三、移动端字体小10px和pc小于10px
- 十四、文字从右开始
- 十五、对话框
- 十六、text-align: center
- 十七、vh和window.innerHeight
- 十八、定位和浮动
- 十九、input单选框
- 二十、提示框
- 二十一、transition、transform和translate
- 二十二、background-position
- 二十三、vertical-align
- 二十四、var
- 二十五、塌陷
- 二十六、自动换行
- 二十七、首行空两格
- 二十八、display:inline-flex
- 二十九、阴影
- 三十、font-style 斜体
- 三十一、渐变色
- 三十二、旋转
- 三十三、动画总结
- 三十四、闪闪的按钮
- 三十五、无缝上滚动
- 三十六、左右滑动
- 三十七、无缝左右滚动(非手动滑动)
- 三十八、手机出现左右滑动问题
- 三十九、background
- 四十、html
- 四十、后代选择器
- 四十一、switch
- 四十二、vue模态框
- 四十三、百分比
- 四十四、下拉搜索
- 四十五、两行后省略号
- 四十六、文字自动换行
- 四十七、border-image
- 四十八、grid布局
- 四十九、background-position
- 五十、省略号汇总
- 五十一、定位覆盖问题z-index
- 五十二、flex和margin
- 五十三、吸顶效果
- 五十四、浏览器缩放
- 五十五、object-fit
- 五十六、flex影响高度
- 五十七、对齐问题
- 五十八、white-space: wrap对手机字体换行不起效
- 五十九、ios输入框自动放大页面
- 六十、object-fit不起效
- 六十一、图片浮动但文字不悬浮左右问题
- 六十二、滚动出现问题
- 六十三、换行
- 六十四、默认值
- 六十五、设置火狐浏览器独有的样式
- 六十六、对齐问题
- 六十七、占满剩余屏幕尺寸
- 六十八、保持宽高比
- 六十九、父盒子宽度小于子盒子,子盒子不换行原因
- 七十、文本有\n换行符(或有\<br>标签)
- 七十一、css计数器
- 七十二、word-break: break-all和word-wrap: break-word的区别
- 七十三、滚动条无法显示全
- 七十四、flexible文件
- 七十五、不可点击事件
- 七十六、对角线
- 七十七、内容垂直居中属性
- 七十八、下划线特效
开始前介绍一些ui框架:vant:支持vue移动端,部分小程序,react移动端,antdesignVue:vue版web,antdesign:react版web
一、旋转效果
.smallImg {
//旋转中心,一般是图片时才会用到(图片不对称),不写默认是盒子中心
transform-origin: 50% 60%;
//动画持续时间,动画变化曲线
transition: all 3s;
}
.smallImg:hover {
//绕Z轴旋转
transform: rotateZ(360deg)
}
<img src="small.png" alt="" class="smallImg">
二、animation
@keyframes 规定动画
animation-name 规定 @keyframes 动画的名称(必须的)
animation-duration 规定动画完成一个周期所花费的秒或毫秒,默认是 0(必须的)
animation-timingfunction 规定动画的速度曲线,默认是“ease”
animation-delay 规定动画何时开始,默认是 0
animation-iteration-count 规定动画被播放的次数,默认是 1,还有 infinite
animation-direction 规定动画是否在下一周期逆向播放,默认是 "normal", alternate 逆播放
animation-play-state 规定动画是否正在运行或暂停。默认是 "running", 还有 "paused"
animation 所有动画属性的简写属性,除了animation-play-state 属性
@keyframes a {
0% {
width: 300px;
}
50% {
width: 800px;
}
100% {
width: 300px;
}
}
<!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>
<style>
div{
height: 200px;
height: 100px;
overflow: hidden;
}
table{
animation: up 15s linear infinite ;
}
@keyframes up{
0%{
}
100%{
transform: translateY(-50%);
}
}
table:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
let tab=`
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
`
$('tbody').append(tab)
</script>
</body>
</html>
雪人走路动画
效果
资源:
<!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>
<style>
.box1{
background-image: url(./image/雪人.jpg);
height:180px;
width: 123px;
margin: 0 auto;
animation-name: run;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-timing-function: steps(4);
}
@keyframes run{
from{
background-position: 0 0;
}
to{
background-position: -487px 0;
}
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
三、rem适配(配合flexible.js效果更佳)
适配是适应宽度,如果高度(即内容多少是可以变的)是变化的,则定位或浮动的高度不能写成响应式或百分比,否则位置会发生变化
查看连接
注意:设计稿宽度可以随意设置,就是用于比例计算而已
rpx 是微信小程序独有的,且不需要计算,会自适应
设计稿宽度:400px
移动设备:400px
//如果不想x,也可以设置设计稿宽度调整比例
首先,通过设计稿宽度,设置html的 font-size的值为 移动设备 / 设计稿宽度 * x = x px(x可为任意值,下方实例中使用为10,即 1rem = 10px)。
当相同的代码运行在屏幕为小于400px的设备上时,js动态设置html的 font-size= 移动设备 / 设计稿宽度 * x,整体比例不变,以此达到移动适配的效果
rem插件,rem大小设置要和当前屏幕的html的font-size大小保持一致,不一致也行,反正都是成比例变化的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div{
width: 1rem /* 100px -> 1rem */;
height: 1rem /* 100px -> 1rem */;
background-color: pink;
}
</style>
</head>
<body>
<div>
</div>
<!-- 引入flexible.js 修改源码,原来分为10分先改成24份 -->
<!-- flexible.js可在github下载 -->
<script src="./index.js"></script>
</body>
</html>
适配总结:
省去写媒体查询,最方便:
1.引入flexible.js(修改为24份更有效)
2.rem插件随意设置一个值(手机50,电脑100)
3.开始写即可。
其他解决方案:
1.autofit,不需要flexible.js
2.px2rem(需要flexible.js):
添加链接描述
看这个
vue2直接可以用
配置参考
四、媒体查询
//包含小的,不包含大的
@media screen and (min-width:960px) and (max-width:1200px){
body{background:yellow;}
}
五、grid布局
点击参考
grid布局常用作移动端布局
<!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>
<style>
@media screen and (max-width:350px) {
html{
font-size: 100px;
}
}
@media screen and (min-width:350px) {
html{
font-size: 120px;
}
}
.content{
display: grid;
//行可能是不确定的,auto-fill自动填充
grid-template-rows: repeat(auto-fill,1rem );
grid-template-columns: 1.2rem 1.2rem ;
column-gap: .2rem ;
row-gap: .1rem ;
justify-content: center;
}
.content div{
text-align: center;
background: green;
}
</style>
</head>
<body>
<div class="content">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</div>
</body>
</html>
六、overflow: auto实现滚动,可以滚动盒子必须有高度
<div style="margin-bottom: 50px;height: 200px; overflow: auto;">
<ul id="couponsContainer" >
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
</div>
七、遮罩层
<!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>
<style>
.zhezhaoDiv{
background-color: rgba(0,0,0,0.7);
/* 占满全屏 */
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.zheContent{
width: 100px;
height: 100px;
background-color: #fff;
position:absolute;
/* 居中 */
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
overflow: hidden;
}
.couponsContainer{
overflow: hidden;
}
</style>
</head>
<body>
<button id="btn1" >显示</button>
<div class="zhezhaoDiv">
<div class="zheContent">
<div class="radioTitle">请选择当前可用优惠券</div>
<!-- height: 85%;overflow:auto 实现滚动 -->
<div style="height: 85%;overflow:auto" id="radioContents">
<div class="tangkuands">
<ul id="couponsContainer" style="margin-bottom: 50px;">
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
<li>111</li>
</ul>
<button id="btn" style="position: absolute; bottom: 0px;">隐藏</button>
</div>
</div>
</div>
</div>
<div>
sadasdasdasd
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
$('#btn').click(function(){
$('.zhezhaoDiv').hide()
})
$('#btn1').click(function(){
$('.zhezhaoDiv').show()
})
</script>
</body>
</html>
八、input radio修改样式
查看csdn
1.input radio 只允许修改宽度和高度,而且宽度和高度必须相等才会有变化
2.使用appearance: none隐藏整个radio,重写样式,input还是显示的,只是radio消失了
原理:通过绝对定位覆盖原多选框
input[type="radio"] {
width: 20px;
height: 20px;
margin: 0 4px 0 0;
appearance: none;
position: relative;
}
/** 未被选中的样式*/
input[type="radio"]::before {
content: "";
position: absolute;
top: 0;
left: 0;
background: #fff;
width: 100%;
height: 100%;
border: 1px solid #d9d9d9;
border-radius: 4px;
}
/** 选中的样式 */
input[type="radio"]:checked::before {
content: "\2713"; /* 2713表示勾勾✓ */
background-color: #fff;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 1px solid #7d7d7d;
border-radius: 4px;
color: #7d7d7d;
font-size: 20px;
font-weight: bold;
text-align: center;
line-height: 20px;
}
九、Transform和animation
Transform的 scale属性不能作用于 inline元素上,例如span
并且动画 animation 也不能作用于inline元素上
可以给span加display:inline-block;属性
十、select修改原来样式
select {
/*很关键:将默认的select选择框样式清除*/
appearance:none;
/* 兼容 */
-moz-appearance:none;
-webkit-appearance:none;
/* 去除掉原来样式就可以直接写样式了 */
border: .0082rem /* 1px -> .0082rem */ solid #aae7fc;
border-radius: .0328rem /* 4px -> .0328rem */;
/*在选择框的最右侧中间显示小箭头图片*/
background: url("../images/下-三角.svg") no-repeat scroll right center transparent;
background-size: .1641rem /* 20px -> .1641rem */ .1641rem /* 20px -> .1641rem */;
/*为下拉小箭头留出一点位置,避免被文字覆盖,上下也要有间隔让字体居中*/
padding: .0164rem /* 2px -> .0164rem */ .1231rem /* 15px -> .1231rem */;
//选择框被字体颜色包含下拉框
color: #aae7fc;
}
十一、nth:chid()后代选择器
//需要从1开始,top_left 是父元素,选取第二个div子元素
.top_left div:nth-child(2){
width: .5744rem /* 70px -> .5744rem */;
height: .2872rem /* 35px -> .2872rem */;
line-height: .2872rem /* 35px -> .2872rem */;
border: 1px solid #5dd5ff;
background: #5dd5ff;
}
.top_left div:nth-child(3){
width: .8205rem /* 100px -> .8205rem */;
height: .1641rem /* 20px -> .1641rem */;
line-height: .1641rem /* 20px -> .1641rem */;
border: 1px solid #5dd5ff;
background: #5dd5ff;
}
十二、flex布局
- justify-content 主轴元素对齐方式
- align-content 交叉轴行对齐方式//多行
- align-items 交叉轴元素对齐方式//单行
主要用
justify-content: space-around;
align-content: space-around;
如果item之间间隔大,可以使用item的父元素(flex的元素)使用padding进行压缩上下左右大小,注意此时盒子会变大。
如果盒子本身没有指定宽度或高度,则此时padding不会撑大盒子
十三、移动端字体小10px和pc小于10px
<span>123</span>
span{
display: inline-block;
font-size: .0821rem /* 10px -> .0821rem */;
transform: scale(0.8);
}
十四、文字从右开始
- direction:
语法:
direction : ltr | rtl | inherit
取值:
ltr : 默认值。文本从左到右流入
rtl : 文本从右到左流入
inherit : 文本流入方向由继承获得
十五、对话框
<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>
<style>
div{
width: 300px;
height: 100px;
border: 5px solid aqua;
position: relative;
border-radius: 5px;
}
//下三角
div::before{
content: '';
display: block;
position: absolute;
bottom: -45px;
left: 50px;
border: 20px solid ;
border-color: aqua transparent transparent;
}
//白色下三角
div::after{
content: '';
display: block;
position: absolute;
bottom: -38px;
left: 50px;
border: 20px solid ;
border-color: #fff transparent transparent;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
十六、text-align: center
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.parent {
width: 500px;
height: 150px;
text-align: center;
background-color: pink;
border-bottom: 1px solid black;
}
strong {
background-color: blue;
}
em {
display: inline-block;
background-color: blue;
}
p {
width: 200px;
height: 50px;
background-color: blue;
}
</style>
</head>
<body>
<!-- 问题1:text-align: center的使用 -->
<div class="parent">
<!-- 1.块级元素下使用text-align: center,使得其文本内容居中对齐 -->
123
</div>
<div class="parent">
<!-- 2.块级元素下使用text-align: center,使得包含在其中的行内元素或行内块元素居中对齐 -->
<strong>行内元素</strong>
</div>
<div class="parent">
<!-- 2.块级元素下使用text-align: center,使得包含在其中的行内元素或行内块元素居中对齐 -->
<em>行内元素转行内块元素</em>
</div>
<div class="parent">
<!-- 3.块级元素下使用text-align: center,包含在其中的块级元素不能居中对齐,
但是这个子代块级元素p会继承text-align: center,使得其文本内容居中对齐-->
<p>hahaha</p>
</div>
</script>
</body>
</html>
十七、vh和window.innerHeight
vh和window.innerHeight一样
十八、定位和浮动
只需注意:
- 浮动后的元素变为 行内快元素,定位不会
- 只有相对定位relative和粘性sticky才占位置,
不同:
a:相对定位针对自己定位,
b:sticky相对浏览器定位,
相同:
a:定位后还是原来位置占据 - 定位显示在标准文档和浮动上面
- 浮动出现层级问题,只会是块元素,且float元素在前面,其他只会出现位置问题,即浮动元素会在最左面和最右面
十九、input单选框
添加链接描述
accend-color:会改变input单选框原有的选中颜色
二十、提示框
<!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>
<style>
#tip{
position: relative;
width: 200px;
height: 50px;
background: red;
top: 200px;
left: 200px;
}
#tip::before{
content: '';
display: block;
position: absolute;
background: green;
width: 100px;
height: 20px;
top: -35px;
left: 20%;
z-index: 999;
display: none;
/* transform: rotate(90edg); */
}
#tip::after{
content: '';
display: block;
position: absolute;
background: green;
width: 20px;
height: 20px;
top: -25px;
left: 50%;
transform: rotate(45deg) ;
display: none;
}
#tip:hover::after,#tip:hover::before{
display: block;
}
</style>
</head>
<body>
<div id="tip" >
提示
</div>
</body>
</html>
二十一、transition、transform和translate
添加链接描述
translate(x, y) x,y 可设置为百分比值,代表着基于 自身宽度/高度 的百分比
如果使用transition监听基本属性,例如height或width等,其值在发生改变时就会对文档流产生影响,比如下图,鼠标悬停的div长宽变化会把其他的div给“挤开”,甚至最边上的还挤到了下一行。并且,可以长宽属性在发生变化时元素的固定点不是中心,而是左上角
.box {
width: 100px;
height: 100px;
transition: all 0.4s ease;
}
.box:hover {
width: 120px;
height: 120px;
}
而使用transform则不会出现这种情况,如下。因为transform只会影响当前元素的状态,达到类似position: relative;的效果,而且transform是默认基于元素的中心进行转换的,就算想改的话也可以使用transform-origin属性进行修改,具体用法非常简单,这里就不再赘述。
.box {
width: 100px;
height: 100px;
//如果使用translate平移,scale的中心会变得奇怪,margin和定位则不会出现这种情况。
//transform: translate(50%,50%);
transition: all 0.4s ease;
}
.box:hover {
transform: scale(1.2, 1.2);
}
二十二、background-position
二十三、vertical-align
添加链接描述
看这个
看这个:
0.vertical-align用在行内块上,是目标元素与父元素的某个线对齐,默认是基线对齐
1.文字有顶线、中线、基线,有文字的父元素才有线,包括span内的文字
2.图片,输入框,转换成inline-block的没有文字的div等等没有顶线,中线,基线,如果是基线对齐(baseline)那么目标元素的底端与父元素的基线对齐,
所以父元素的文字会变化到img等的低端对齐线上,父元素是被动的一方
3.一个子元素对齐方式改变,会引发父元素的基线等发生变化,其他对齐方式不同的子元素会跟着父元素改变
<!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>
<style>
.father{
width: 500px;
height: 500px;
background: green;
}
.box1{
display: inline-block;
width: 50px;
height: 50px;
background-color: brown;
}
.box2{
display: inline-block;
width: 70px;
height: 70px;
background: pink;
}
</style>
</head>
<body>
<div class="father">
11
<div class="box1"></div>
<div class="box2">11</div>
<span>sasa</span>
</div>
</body>
</html>
重点:
1.当使用table-cell布局或inline元素时,可以使用CSS的vertical-align属性控制元素的垂直对齐方式
2.父元素的基线是如何判断?
在CSS中,父元素的基线是根据该元素的文本内容来确定的。在一个包含文本的元素中,基线是字符底部的位置,也就是字符下方的空白区域的顶部。
例如,如果一个
元素包含一个单词hello,那么该元素的基线就是单词中第一个字母h的底部位置。如果该元素包含多个行内元素,则该元素的基线是这些行内元素中的基线位置的最低值。
在vertical-align属性中,如果将其值设置为baseline,则该元素将沿着其父元素的基线对齐。如果将其值设置为其他值,则该元素将相对于其父元素的基线进行偏移。
需要注意的是,如果一个元素没有文本内容,那么它将无法确定基线位置。在这种情况下,可以手动指定一个基线位置,或者使用其他适当的对齐方式。
3.如何手动的指定父元素的基线?
要手动指定父元素的基线位置,可以使用vertical-align属性在父元素上设置基线的位置。vertical-align属性不仅可以用于子元素的垂直对齐,也可以用于父元素的基线对齐。
当你想要在父元素中垂直对齐文本时,可以将vertical-align属性设置为baseline,这样子元素就会与父元素的基线对齐。例如,如果你有一个div元素,其中包含一些文本,你可以通过以下方式来指定父元素的基线位置:
div {display: inline-block;vertical-align: baseline;}
在上面的代码中,display: inline-block可以使div元素与其他行内元素一样,而vertical-align: baseline则将div元素与其父元素的基线对齐。这样就可以手动指定父元素的基线位置,从而实现更精确的垂直对齐。
二十四、var
二十五、塌陷
添加链接描述
如果父元素和子元素没有间距,
1.子元素margin-top会带着父元素一起下沉,且子元素相对父元素margin-top为0,
2.如果父元素自身有margin-top,且子元素也有margin-top,则父元素会下沉最大的,子元素相对父元素margin-top为0
<!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>
<style>
.d1{
background-color: royalblue;
width: 500px;
height: 400px;
margin-top: 20px;
}
.d2{
background-color:red;
width: 300px;
height: 200px;
margin-top: 60px;
}
/* .firstChild{
height: 0.1px;
} */
</style>
</head>
<body>
<div class="d1">
<div class="firstChild"></div>
<div class="d2">子盒子</div>
</div>
</body>
</html>
二十六、自动换行
1.width:120px
2.word-break:break-all
二十七、首行空两格
text-indent:2em
二十八、display:inline-flex
<!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>
<style>
.out{
width: 100px;
height: 100px;
background-color: aqua;
display: inline-flex;
vertical-align: top;
}
.div2{
background: red;
}
</style>
</head>
<body>
<div class="out">
<div class="div1">
</div>
<span class="div2">
111
</span>
</div>
<script>
</script>
</body>
</html>
二十九、阴影
添加链接描述
box-shadow: x-shadow y-shadow blur spread color inset;
1.x-shadow: 必需的,水平阴影的偏移量,可以为负值,下图表示了在其他参数相同,x-shadow不同情况下的不同表现
2.y-shadow: 必需的,水平阴影的偏移量,可以为负值,下图表示了在其他参数相同,y-shadow不同情况下的不同表现
3.blur: 可选的,模糊距离,不支持负数,下图表示了在其他参数相同,blur不同情况下的不同表现
4.spread: 可选的,阴影的扩展半径,阴影的原理其实就是复制一个当前元素出来,这个属性就是控制的复制出来的元素的半径,一定要记好了啊,支持负数,如果为负数,复制出来的元素就会比原元素小,下图表示了在其他参数相同,spread不同情况下的不同表现
阴影动画
<!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>
<style>
.box19 {
width: 100px;
height: 30px;
background: #89d444;
line-height: 30px;
color: #fff;
user-select: none;
box-shadow: 0px 8px 0 0 #479a48;
border-radius: 5px;
transform: translateY(-8px);
text-align: center;
}
.box19:active {
transform: translateY(0);
box-shadow: 0 0
}
</style>
</head>
<body>
<div class="box19">
点我
</div>
</body>
</html>
三十、font-style 斜体
font-style
normal:正常的字体
italic:斜体。对于没有斜体变量的特殊字体,将应用oblique
oblique:倾斜的字体
两者都是斜体,不必区分
三十一、渐变色
添加链接描述
CSS定义了三种渐变类型:
Linear Gradients (goes down/up/left/right/diagonally) 下降/ 上升/左/右/对角线(记住这个)
Radial Gradients (defined by their center) 由中心定义(了解)
Conic Gradients (rotated around a center point) 绕一个中心点旋转(了解)
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
//Direction - Top to Bottom (这是默认,从上到下)
#grad {
background-image: linear-gradient(red, yellow);
}
Direction - Left to Right (从左到右)
#grad {
background-image: linear-gradient(to right, red , yellow);
}
Direction - Diagonal (对角线)
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
使用多种颜色的stop
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
三十二、旋转
添加链接描述
transform-origin属性:设置旋转中心
看上去transform-origin取值与background-position取值类似。
top = top center = center top = 50% 0
right = right center = center right = 100%或(100% 50%)
bottom = bottom center = center bottom = 50% 100%
left = left center = center left = 0或(0 50%)
center = center center = 50%或(50% 50%)
top left = left top = 0 0
right top = top right = 100% 0
bottom right = right bottom = 100% 100%
bottom left = left bottom = 0 100%
三十三、动画总结
添加链接描述
包含:1.过度 2.动画 3.变形 4.旋转 5.播放
过度和动画的时间都要加s
三十四、闪闪的按钮
<!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>
<style>
.content{
margin-left: 100px;
width: 100px;
height: 100px;
background: gray;
overflow: hidden;
}
.content::after{
content: '';
display: block;
width: 5px;
height: 200px;
float: left;
margin-left: -20px;
transform: rotate(40deg);
transform-origin: 57px 13px;
background: #000;
/* animation: move 3 ease infinite ; */
/* animation: name duration timing-function delay iteration-count direction fill-mode; */
/* 重点时间要单位s */
animation: move 1.5s linear 0s infinite ;
}
@keyframes move {
0%{
margin-left: 0;
}
25%{
margin-left: 50px;
}
50%{
margin-left: 100px;
}
75%{
margin-left: 150px;
}
100%{
margin-left: 200px;
}
}
</style>
</head>
<body>
<div class="content">
</div>
</body>
</html>
三十五、无缝上滚动
重点:1.内部div上滚,而非最外面滚动
2.上滚动50%,而且要克隆一组滚动元素添加内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=sc, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes up {
100% {
transform: translateY(-50%);
}
}
.nav{
height: 100px;
overflow: hidden;
/* background: greenyellow; */
}
.content{
animation: up 3s linear 0s infinite ;
}
li{
height: 30px;
}
</style>
</head>
<body>
<div class="nav">
<div class="content">
<ul>
<li>11111111111</li>
<li>11111111111</li>
<li>11111111111</li>
</ul>
</div>
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
<script>
$('ul li').clone().appendTo('ul')
</script>
</body>
</html>
三十六、左右滑动
overflow:auto :可以滑动
overflow:hiden :禁止滑动
遇到的坑:
苹果手机宽度可能出现不继承情况,要手动写:width:100%
添加链接描述
-webkit-box
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>纯css实现左右滑动</title>
<style type="text/css">
ul{
//防止内容换行,重点
white-space:nowrap;
}
ul,
li {
list-style: none;
}
.slide-box {
margin-top: 50px;
display: -webkit-box;
overflow-x: auto;
/*适应苹果*/
-webkit-overflow-scrolling: touch;
}
.slide-item {
//由于块元素独占一行
//转换成inline-block则无法滚动,因为沾满手机宽度会换行导致宽度不会超出屏幕,不会滑动。
//想办法变成不换行,超出屏幕宽度,使用display: -webkit-box;
/* display: inline-block; */
width: 20%;
height: 300px;
border: 1px solid #ccc;
margin-right: 30px;
background: pink;
}
/*隐藏掉滚动条*/
.slide-box::-webkit-scrollbar {
display: none;
}
</style>
</head>
<body>
<ul class="slide-box">
<li class="slide-item">1</li>
<li class="slide-item">2</li>
<li class="slide-item">3</li>
<li class="slide-item">4</li>
<li class="slide-item">5</li>
</ul>
<p>测试文字,左右滚动时,这里不会动</p>
</body>
</html>
三十七、无缝左右滚动(非手动滑动)
overflow:hide
注意事项:
1.内容如果用标签的话会自动挤下来
2.只用一个标签,内用要overflow:hidden,内容可能换行了,左右移动看起来后面没内容,要使用white-space:nowrap
3.内使用了white-space:nowrap,最外面盒子宽度会被撑大(外部即使设置宽度也没办法限制),最外面盒子也要用overflow:hidden这样就限制了,使用了这个属性宽和高都要设置,宽自动100%,高要看内容设置,防止隐藏高度内容。
.saysomething{
overflow:hidden;
position: relative;
top:10px;
}
.saysomething div{
display: inline-block;
vertical-align: middle;
height: 32px;
font-size: 15px;
margin-top: 10px;
margin-bottom: 10px;
background-color: #6acfff;
border-radius: 4px;
}
.saysomething img{
width: auto;
position: absolute;
top: 0;
left: 0;
margin-top: 0px;
}
.toleft{
position: absolute;
top: -10px;
left: 32px;
text-align: top;
overflow: hidden;
}
@keyframes toleft {
100%{
transform: translateX(-50%);
}
}
.content{
line-height: 13px;
white-space: nowrap;
color: white;
animation: toleft 40s linear 0s infinite ;
}
<div class="saysomething">
<img src="./images/laba.png" alt="">
<div class="toleft">
<div class="content">
用户 13*******刚刚已参与活动!
用户 15*******刚刚已参与活动!
用户 18*******刚刚已参与活动!
用户 13*******刚刚已参与活动!
用户 18*******刚刚已参与活动!
用户 15*******刚刚已参与活动!
用户 18*******刚刚已参与活动!
用户 13*******刚刚已参与活动!
用户 15*******刚刚已参与活动!
用户 18*******刚刚已参与活动!
用户 13*******刚刚已参与活动!
用户 18*******刚刚已参与活动!
用户 15*******刚刚已参与活动!
用户 18*******刚刚已参与活动!
</div>
</div>
</div>
三十八、手机出现左右滑动问题
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
position: relative;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
body {
position: absolute;
top: 0;
left: 0;
}
三十九、background
添加链接描述
比如:background:url(…) no-repeat fixed center/cover
又或者background: #333 0 0 / 100px 100px
或background: url(“./images/bg.png”) no-repeat 0/100% ;
其他属性的缺失或者顺序都不重要 但是在 position 和 size 之间无论是什么写法都需要以一个 “/” 来分割否则无法识别
background-repeat
属性定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。
值 | 说明 |
---|---|
repeat | 背景图像将向垂直和水平方向重复。这是默认 |
repeat-x | 只有水平位置会重复背景图像 |
repeat-y | 只有垂直位置会重复背景图像 |
no-repeat | background-image 不会重复 |
inherit | 指定 background-repeat 属性设置应该从父元素继承 |
background-size
设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
background-size: length|percentage|cover|contain;
值 | 说明 |
---|---|
length | 设置背景图片高度和宽度。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为 auto(自动) |
percentage | 将计算相对于背景定位区域的百分比。第一个值设置宽度,第二个值设置的高度。如果只给出一个值,第二个是设置为"auto(自动)" |
cover | 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。 |
contain | 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 |
auto | 以背景图片的比例缩放背景图片。 |
四十、html
html{
width: 100%;
height: 100%;
}
可以把html高度和宽度 和屏幕保持一致
四十、后代选择器
添加链接描述
1、first-child
first-child表示选择列表中的第一个标签。
2、last-child
last-child表示选择列表中的最后一个标签
3、nth-child(3)
表示选择列表中的第3个标签,上面代码中的3也可以改成其它数字,如4、5等。想选择第几个标签,就填写几。
4、nth-child(2n) 倍数列可以是3,4,5…n
这个表示选择列表中的偶数标签,即选择 第2、第4、第6…… 标签。
5.nth-child(even)
同4系数为2时,这个表示选择列表中的偶数标签,即选择 第2、第4、第6…… 标签。
四十一、switch
<input type="checkbox" class="switch-button" id="switch-button" onclick="handleClick(this)">
<label for="switch-button"></label>
.switch-button{
display: none;/*隐藏表单元素*/
}
.switch-button+label{/*+选择器选择紧跟“+”左边选择器的第一个元素*/
display: inline-block;
position: relative;
transition: all .3s;
width: 60px;
height: 30px;
border: 1px solid #999;
border-radius: 15px;
background-color: #ccc;
}
.switch-button:checked+label{/*选中表单后的样式,:checked表示checkbox被选中后的状态*/
background-color: lightgreen;
}
.switch-button+label::before{/*使用伪元素生成一个按钮*/
content: '';
display: block;
height: 25px;
width: 25px;
position: absolute;
border-radius: 25px;
left: 2px;
top: 2px;
background-color: #fff;
box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
transition: all .3s;
}
.switch-button:checked+label::before{/*checkbox选中时按钮的样式*/
left: 32px;
transition: all .2s linear;
}
//使用单选框,可以选中和取消
function handleClick(e){
console.log(e.checked);
}
四十二、vue模态框
添加链接描述
很好改造成普通html
四十三、百分比
-
margin , padding
百分比值总是相对于父元素块的宽度 -
transform: translate();background-size;border-radius;
相对于自身宽高 -
line-height
行高百分比是基于当前元素字体大小(字体大小 * 所设行高的百分比 = 最终所呈现的行高值) -
当定位为absolute定位时,left,top参考的是【从当前元素往外找遇到的第一个定位为非static的元素,若没有这样的元素则以当前视口为参考】的宽和高
-
若为relative定位,则以父元素的宽,高为参考依据
四十四、下拉搜索
利用标签datalist
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>list属性示例</title>
</head>
<body>
text: <input type="text" name="greeting" list="greetings">
<!-- 使用style="display:none;"将datalist元素设定为不显示 -->
<datalist id="greetings" style="display:none;">
<option value="Good Morning">Good Morning</option>
<option value="Hello">Hello</option>
<option value="Good Afternoon">Good Afternoon</option>
</datalist>
</body>
</html>
四十五、两行后省略号
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
四十六、文字自动换行
当文字很多可能会超出div的宽度,需要设置这个自动换行
word-wrap:break-word;
word-break:break-all;
四十七、border-image
border-image必须配合border使用
border: 1px solid ;
//最后面1 不能少
border-image: linear-gradient(180deg, rgba(2, 86, 255, 0.1) 2%, rgba(2, 86, 255, 0.5) 49%, rgba(2, 86, 255, 0.1) 100%) 1;
四十八、grid布局
//常用,如果不知道几行,高度可以在item内设置
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 30px;
//响应式布局
//外层父元素要写成百分比或rem
grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
//这种写法可以用来做响应式布局,
//auto-fill主轴上指定的宽度或者重复次数是最大可能的正整数,
//minmax最小值255px、最大值1fr代表剩余空间的比例。
//写在item上,以grid-row行为例,从第几列开始 / 第几列+想占几个
.item{
grid-row: 1/3;
grid-column: 1/3;
}
/* 如果1个值代表全部统一行高 如果两个值代表 第一个代表奇数 第二个代表偶数 */
//这样写行数可以避免行数写死,又可以统一行高,也可以使用grid-template-rows: repeat()代替
grid-auto-rows: .7fr .2fr;
grid-auto-rows: minmax(50px,auto);
四十九、background-position
background: url('../../../assets/bl/VendorColumn.png') no-repeat;
//将背景图片的 100%(right) 100% 这个点,和元素的 100%(right) 100% 这个点对齐
background-position: 100% 100%;
五十、省略号汇总
添加链接描述
1.文字单行不换行多余文字显示省略号
white-space: nowrap;
display: block;
overflow: hidden;
text-overflow: ellipsis;
2.文字多行不换行多余文字显示省略号
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 3;//行数
五十一、定位覆盖问题z-index
如果设置z-index很大也不能覆盖其他图层,是因为没有设置背景色background,即使背景色是纯白色也要设置
五十二、flex和margin
flex中使用margin:auto ,把上下左右的空间占据
margin-right:auto :把右的空间占据
五十三、吸顶效果
父元素relative定位,子元素sticky定位
注意:必须绝对的父子关系
<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>
<style>
#container{
position: relative;
width: 200px;
height: 200px;
border: 1px solid black;
overflow: auto;
}
#header{
height: 100px;
position:sticky;
top: 0;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
你好 <br>
你好 <br> 你好 <br>
你好 <br> 你好 <br>
你好 <br> 你好 <br>
你好 <br>
<div id="header">
固定的头部
</div>
<div id="inner">
你好 <br>
你好 <br>
你好 <br>
你好 <br>
你好 <br>
你好 <br>
你好 <br>
你好 <br>
你好 <br>
你好 <br>
你好 <br>
你好 <br>
</div>
</div>
</body>
五十四、浏览器缩放
浏览器缩放和电脑显示设置缩放都是改变的分辨率,统一使用媒体查询
五十五、object-fit
五十六、flex影响高度
flex:align-items默认stretch,即高度一致,如果子元素设置高度,则该效果不起效,或者套个父盒子
五十七、对齐问题
除了margin padding 字体大小也可能影响
五十八、white-space: wrap对手机字体换行不起效
解决方案
word-break: break-all;
word-wrap: break-word;
white-space: pre-wrap;
五十九、ios输入框自动放大页面
原因:输入框字体小于16px
解决方案:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
可能用到el-input聚焦
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
// console.log("aaaa",el.children[0].focus);
//原生
el.focus()
setTimeout(_ => {
//el-input
el.children[0].focus()
})
},
update:function (el) {
// 聚焦元素
// console.log("aaaa",el.children[0].focus);
el.focus()
setTimeout(_ => {
el.children[0].focus()
})
},
})
六十、object-fit不起效
原因:没有设置图片的宽高,
六十一、图片浮动但文字不悬浮左右问题
原因:文字没有换行
解决: word-wrap: break-word;
<div>
<img/>
<p>wqd1dasdwqda</p>
</div>
六十二、滚动出现问题
寻找oveflow属性,auto是对的,其他值是有问题
六十三、换行
两个都要加
white-space: normal;
word-break: break-all;
六十四、默认值
initial:w3c标准初始化
inset:浏览器代理初始化(例如:button浏览器代理的初始化)
inherit:继承
resvet:如果可以继承则inherit,无法继承则initial
消除浏览器代理的初始化:all:resvet
消除继承:all:initial
六十五、设置火狐浏览器独有的样式
@-moz-document url-prefix(){
//样式卸载里面
}
//例如
@-moz-document url-prefix(){
.wordNumber {
left: 1005px;
bottom: -11px;
top: 245px;
word-break: normal;
}
}
六十六、对齐问题
效果图
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="content">
<div class="item">
<div>
<span style="display: block;">
名字
</span>
111111111111111111111111111111111111111111111
</div>
<div>
<span>
年龄
</span>
<span>
18
</span>
</div>
</div>
<div class="item">
<div>
<span style="display: block;">
名字11
</span>
11111
</div>
<div>
<span>
年龄
</span>
<span>
18
</span>
</div>
</div>
<div class="item">
<div>
<span style="display: block;">
名字
</span>
11111111111
</div>
<div>
<span>
年龄
</span>
<span>
18
</span>
</div>
</div>
</div>
</body>
</html>
scss
$minWidth: 200px;
%flex {
display: flex;
}
@mixin myFlexItem($flex: .3333, ) {
display: flex;
flex: $flex;
vertical-align: top;
}
.content{
width: 800px;
}
.item {
margin-top: 20px;
@extend %flex;
div {
@include myFlexItem;
//设置最小宽度(配合flex:0.3333)是为了某个数据过长,不会影响左右的标签位置
min-width: 400px;
span:first-child{
//设置最小宽度,为了列的每一行头部对齐
min-width: $minWidth;
margin-right: 20px;
}
}
}
六十七、占满剩余屏幕尺寸
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* html必须设置高度100% */
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
}
.content{
//高度必须设置
height: 100%;
display: flex;
flex-direction: column;
>div:nth-child(2){
background: #000;
//在需要占满剩余屏幕的标签设置flex,任何数字都可以
//尽量使用后flex布局,flex:1会自动扩大和缩小占满剩余的内容,
//height:100%,写死会有问题
//定位和flex会有冲突,定位时使用height:100%
flex: 1;
}
}
</style>
</head>
<body>
<div class="content">
<div>
111
</div>
<div>
222
</div>
<div>
3333
</div>
</div>
</body>
</html>
六十八、保持宽高比
添加链接描述
重点:当padding-top,padding-bottom.margin-top,margin-bottom的值设为百分比时,计算结果是参照父元素的宽度
下面是5:4比例
html
<div class="father">
<div class="childern">
<div class="sun">
//在这里写内容
</div>
</div>
<div class="childern">
<div class="sun">
//在这里写内容
</div>
</div>
</div>
css
.childeren{
position: relative;
width: 50%;
height: 0;
padding-top: 40%;
display: inline-block;
overflow: hidden;
}
.sun{
position: absolute;
top:0;
left: 0;
width: 100%;
height:100%
}
六十九、父盒子宽度小于子盒子,子盒子不换行原因
- word-wrap: break-word;
- 子盒子flex布局:flex-wrap: nowrap;默认
- 设置了max-width,实际宽度不高于max-width,但显示内容宽度大于max-width,根据实际宽度不会换行
- 或是table标签无法换行
七十、文本有\n换行符(或有<br>标签)
在css中white-space属性用来控制容器的文本中带有空白符、制表符、换行符等的显示
- normal:默认,忽略文本中所有的空白、换行符;只有文本存在 <br> 或文本达到框的约束时,文本才会换行
- nowrap:和normal类似,忽略文本中所有的空白、换行符;遇到框的宽度约束时不会自动换行,文本只有在有 br 时才会换行
- pre:保留文本中的空白、换行符;遇到框的宽度约束时不会自动换行,文本存在\
或文本中有换行符时,文本才会换行 - pre-wrap:和pre类似,保留文本中的空白、换行符;文本存在 <br> 或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行
- pre-line:会略文本中的空白符;文本存在\
或文本中有换行符时,或者遇到框的宽度约束时,文本都才会换行
七十一、css计数器
.one {
/* 用于重置计数器的初始值,这里将计数器命名为 "oneCounter" */
counter-reset: oneCounter;
/* 值 初始化是1, 不写的话,默认值是 0 */
/* counter-reset: oneCounter 1; */
}
.one p::before {
counter-increment: oneCounter 1;
/* counter */
content: counter(oneCounter) " 段 "
}
<div class="one">
<p>北国风光</p>
<p>千里冰封</p>
<p>万里雪飘</p>
<p>望长城内外</p>
<p>惟余莽莽</p>
<p>大河上下</p>
<p>顿失滔滔</p>
</div>
七十二、word-break: break-all和word-wrap: break-word的区别
word-break: break-all和word-wrap: break-word都是CSS属性,用于控制文本内容在容器中的换行行为。它们的区别如下:英文单词
1, word-break:break-all
例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2,word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。
七十三、滚动条无法显示全
可能原因:
- height百分比太大
- max-height:100vh太大改成95vh或其他
七十四、flexible文件
(function flexible(window, document) {
var docEl = document.documentElement
var dpr = window.devicePixelRatio || 1
// adjust body font size
function setBodyFontSize() {
if (document.body) {
document.body.style.fontSize = (12 * dpr) + 'px'
}
else {
document.addEventListener('DOMContentLoaded', setBodyFontSize)
}
}
setBodyFontSize();
// set 1rem = viewWidth / 103
// 把屏幕平均分成10等份。比如1920/10= 192 px,这个时候1rem就是192px,配合vscod插件快速适配,在style中使用媒体查询。
function setRemUnit() {
var rem = docEl.clientWidth / 10
docEl.style.fontSize = rem + 'px'
}
setRemUnit()
// reset rem unit on page resize
window.addEventListener('resize', setRemUnit)
window.addEventListener('pageshow', function (e) {
if (e.persisted) {
setRemUnit()
}
})
// detect 0.5px supports
if (dpr >= 2) {
var fakeBody = document.createElement('body')
var testElement = document.createElement('div')
testElement.style.border = '.5px solid transparent'
fakeBody.appendChild(testElement)
docEl.appendChild(fakeBody)
if (testElement.offsetHeight === 1) {
docEl.classList.add('hairlines')
}
docEl.removeChild(fakeBody)
}
}(window, document))
七十五、不可点击事件
七十六、对角线
background: linear-gradient(
to top right,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) calc(50% - 1.5px),
rgba(0, 0, 0, 0.5) 50%,
rgba(0, 0, 0, 0) calc(50% + 1.5px),
rgba(0, 0, 0, 0) 100%
),#F6F6F6 !important
七十七、内容垂直居中属性
360浏览器不支持
align-content: center;
七十八、下划线特效
<style>
.title span{
background: linear-gradient( to right,#ec695c,#61c454) no-repeat right bottom;
background-size: 0 2px;
transition: background-size 1300ms;
}
.title span:hover{
cursor: pointer;
background-position-x: left;
background-size: 100% 2px;
}
</style>
<body>
<h2 class="title">
<span>
我不认为我会葬身于此,并且我从来没有如此神清气爽,
我仿佛看到重生,因为从今以后我海波东将不受束缚
</span>
</h2>
</body>