CSS小记。

妖狐艹你老母 2022-11-26 15:58 161阅读 0赞

### 有效的应用方法 ###

--------------------

①使用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][.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);
      }
    }

[.jpg]: https://blog.csdn.net/a57959735/article/details/107400013