CSS Snippet

Ethan in Shenzhen

Sat Apr 09 2022

# 垂直居中方法

transform

.item{
    top: 50%;
    position: absolute;
    transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */
}

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
    * { margin:0; padding:0; }
    html,body { height:100%; color:#fff; }
    .main { background:#ccc; height:100%; min-height:100%; }
    .main_m { padding-bottom:60px; background:#333; height:10px ;}
    .footer{ width:100px%; height:50px; background:black; margin-top:-50px; }
    </style>
</head>

<body>
    <div class="main">
        <div class="main_m">这里加内容，这里用了padding-bottom把footer的高度留出来</div>
    </div>
    <div class="footer">这是底部</div>
</body>

</html>
// 重点在于给footer外的main设置min-height: 100%

# fixed失效原因

移动端如果父元素transform属性不是none，fixed会失效

# input在web可以输入，wap无法输入原因

user-select:none

# 渐变边框

实现: 利用元素设置背景色 + 伪类渐变

.vw {
  border-radius: 10rpx;
  background-color: #fff;
  text-align: center;
  margin: 0 8rpx 16rpx;
  padding: 20rpx 0;
  position: relative;
}

.vw::after {
  content: '';
  border-radius: 10rpx;
  background: linear-gradient(90deg, rgba(242, 194, 194, 1) 0%, rgba(232, 232, 232, 1) 100%);
  position: absolute;
  top: -3rpx;
  bottom: -3rpx;
  left: -3rpx;
  right: -3rpx;
  z-index: -1;
}

# 垂直居中方法

# 让footer元素在页面内容高度不足情况下，始终保持在底部，而超出高度时能随高度撑开

# fixed失效原因

# input在web可以输入，wap无法输入原因

# 渐变边框