在開發移動端項目的時候，很多樣式都是相同的，比如說圖標大小，頭像大小，頁面底部保存(添加按鈕），項目主體顏色等等，對于這些在項目中常用到的，通常都會寫在公共樣式中（public.css）以便代碼復用。本文進行進行下總結（個人經驗哈）

文本超出隱藏

     <!-- 文本一行超出隱藏 --><div class="box2">xxxxxxxxxxxxxxxxx</div>//css.box2 {width: 100px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}

兩行超出隱藏?

  <div class="box">這是一段很長的文本內容，用來測試多行文本截斷的效果。這是一段很長的文本內容，用來測試多行文本截斷的效果。這是一段很長的文本內容，用來測試多行文本截斷的效果。</div><style>.box {width: 200px;border: 1px solid red;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;text-overflow: ellipsis;word-break: break-all;}</style>

一行三列?

   <div class="box"><div class="avtor"></div><div class=""><div>比如這是標題</div><div>商品描述</div></div><div class="boxItem">￥999999</div></div>.box {border: 1px solid;display: grid;grid-template-columns: auto auto 1fr;align-items: center;gap: 10px;padding: 10px;}.avtor {width: 50px;height: 50px;background-color: hotpink;border-radius: 50%;}.box div:nth-child(3) {justify-self: end;}

遮罩層

    <div class="mask"></div>.mask {position: absolute;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.2);z-index: 99;}

注意在使用遮罩層的使用，需要放置在根節點同級下。

如何放在有相對定位父盒子里面就不能遮起來整個頁面了（絕對定位向上尋找相對定位的父盒子的時候沒有則默認相對于body）

   <div style="position: relative;width: 200px;height: 200px;"><div class="mask"></div></div>

?

某個元素需要在遮罩層上使用z-index 值大于遮罩層的z-index的值即可，這里修改下上面box的樣式

    .box {border: 1px solid;display: grid;grid-template-columns: auto auto 1fr;align-items: center;gap: 10px;padding: 10px;position: relative;z-index: 100;background-color: #fff;margin-top: 50px;}

?主題色

無論是開發小程序還是app或者說pc端官網，項目整體風格有一個主題顏色。

   <!-- 主題色 --><div class="cName main-col">這是公司名字</div><div class="list"><div class="item ">全部</div><div class="item main-col">公司簡介</div><div class="item ">產品分類</div><div class="item ">產品分類</div><div class="item ">產品分類</div></div>//css.main-col{color: blueviolet;}.cName{font-size: 20px;}.list{display: grid;grid-template-columns: repeat(5,auto);}

當需要更換主題風格的時候，只需要修改main-col的顏色即可?

  .main-col{color: rgb(32, 235, 116);}

?底部固定按鈕

    <div class="mybtn">保存</div>.mybtn{position: fixed;width: 80%;bottom: 10px;left: 50%;transform: translateX(-50%);background:linear-gradient(to left,#e77a7a,#e26060);text-align: center;border-radius: 15px;padding: 10px 0px ;box-sizing: border-box;margin: auto;color: #fff;}

在移動端開發的時候，可能會還有添加，修改等按鈕，這里就可以直接復用public里面這里的代碼了

?偽元素小圖標

這個具體看項目中有無使用，有的話通常來說都是多個的。

     <div class="header"><div>xxxx</div></div>.header{position: relative;margin-top: 10px;}.header div:nth-child(1){padding-left: 10px;}.header div:nth-child(1)::before{position: absolute;content: '';top: 0;left: 0;width: 3px;height: 100%;background: linear-gradient(to bottom,#7bdfa8,#a2f192);border-radius: 10px 10px 0 0;}

目前就想到這些，后續想起來繼續補充。end?