CSS小记。

有效的应用方法

---

①使用flex布局white-space失效的问题：在white-space的元素下添加min-width:0;

②使用fixed定位让flex布局失效的解决方法：

在flex布局外添加一个有宽度的盒子，让该父盒子定位。

③去除微信小程序button的默认样式：

button::after {
  border: none;
}
button {
  border-radius:0;
  padding:0;
  margin:0;
  background-color: transparent;
  line-height: 20rpx;
}

④实现左右布局，中间留一段空的缝隙：

<div class="parent">
	<div class="child"></div>
</div>
.parent{
  display:flex;
  flex-warp:warp;
  padding:7px;
  justify-content:space-between;//分别贴着左右分布
}
.child{
  width:49%;
}

⑤解决左右布局高度不一造成的样式混乱：

.item{
  display:flex;
  flex-direction:column; //改变主轴方向
  justify-content:space-between;//分别贴着上下分布
}

⑥触摸卡片向上缓缓抬起。

.item-box {
      max-width: 210px;
      transition: all 0.4s;
      margin-right: 40px; //这行过渡
 }
    .item-box:hover {
      transform: translateY(-30px); //这行抬起
      border-top: 4px solid #FFC000;
      border-radius: 22px 22px 0 0;
 }

⑦绝对定位的文字居中。

.item {
    position: relative;
    width: 210px;
   p {
     width:100%; //加上宽度则text-align:center在绝对定位中生效。
     text-align:center;
     position: absolute;
     top: 175px;
     left:0;
     font-size: 18px;
   }
}

⑧下划线效果。

.item-title{
  position: relative;
}
.item-title::after {
  content: '';
  top: 30px;
  left: 0px;
  position: absolute;
  width: 138px;
  height: 1px;
  background: #FFC000;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.5s;
}
.item:hover .item-title::after {
   transform: scaleX(1);
   transform-origin: left;
 }

⑨第几个子元素。

.item:nth-child(1),item:frist-child{}//第一个
.item:nth-child(odd){}//奇数行
.item:nth-child(even){}//偶数行
.item:last-child{}//最后一个

⑩背景图上画超出他高度的内容：

.form {
  height: 780px;//定义比图大的高度
  background: url('../../static/images/team/beijing.png') no-repeat bottom center;
  margin-bottom: 130px;
  margin-top: 80px;

  .form-box {
    justify-content: flex-start;
    padding-top: 54px;
    box-sizing: border-box;
    width: 920px;
    height: 740px;
    background: #FFFFFF;
    box-shadow: 0px 1px 20px 5px rgba(185, 185, 185, 0.2);
    border-radius: 8px;
  }
}

谁敢说没效的应用方法

---

①伪元素的妙用，可以在块级元素周围加颜色横杆或者特殊形状的三角形等。
外链自己的文章…关联表.jpg

.content{
  position:relative;
}
.content:before{
  content:"";//必须加上这行才能成效
  position:absolute;
  top:20px;
  left:0;
  width:10px;
  height:2px;
  background:#ccc;
}

②禁止textarea拉伸： style="resize:none"
③屏幕自适应缩放。

@media screen and (max-width: 1024px){
  div#app {
    transform:scale(0.8)
  }
}

④main.js中条件判断引入不同的css。

const flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); //判断是否是手机端
if (!flag) {
  require('styles/reset.css');
} else {
  require('styles/reset_mobile.css');
}

⑤一闪一闪的效果。

.active {
     animation: hidden 1s infinite;
 }
@keyframes hidden {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.5);
  }
  100% {
    transform: scale(1);
  }
}