微信小程序的样式

本是古典何须时尚 2022-07-13 14:00 264阅读 0赞

# 微信小程序中css的使用技巧总结 #

这篇文章介绍了最近很火的微信小程序中css的使用技巧总结，有需要的同学可以参考一下本文

微信小程序 css使用技巧

**1:用纯CSS创建一个三角形的原理把上、左、右三条边隐藏掉（颜色设为 transparent）**

<table> 
 <tbody> 
  <tr> 
   <td style="list-style:none; margin:0px; padding:0px"> 
    <div style="list-style:none; margin:0px; padding:0px"> 
     <div style="list-style:none; margin:0px; padding:0px">
       .demo { 
     </div> 
     <div style="list-style:none; margin:0px; padding:0px">
       &nbsp; 
     </div> 
     <div style="list-style:none; margin:0px; padding:0px">
       width:0; 
     </div> 
     <div style="list-style:none; margin:0px; padding:0px">
       &nbsp; 
     </div> 
     <div style="list-style:none; margin:0px; padding:0px">
       height:0; 
     </div> 
     <div style="list-style:none; margin:0px; padding:0px">
       &nbsp; 
     </div> 
     <div style="list-style:none; margin:0px; padding:0px">
       border-width:20px; 
     </div> 
     <div style="list-style:none; margin:0px; padding:0px">
       &nbsp; 
     </div> 
     <div style="list-style:none; margin:0px; padding:0px">
       border-style:solid; 
     </div> 
     <div style="list-style:none; margin:0px; padding:0px">
       &nbsp; 
     </div> 
     <div style="list-style:none; margin:0px; padding:0px">
       border-color:transparenttransparentredtransparent; 
     </div> 
     <div style="list-style:none; margin:0px; padding:0px">
       &nbsp; 
     </div> 
     <div style="list-style:none; margin:0px; padding:0px">
       } 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

**2:设置最高高度..超过后可以滑动**

**3: text-overflow 当属性规定当文本溢出包含元素时发生的事情**

**4:overflow: hidden当强制不换行的时候,使用overflow:hidden隐藏超过界面的部分**

**5: margin-bottom失效**

**6:强制不换行**

自动换行

强制英文单词断行