常用css样式

样式制作模板

1. 文字显示为两行, 超出部分显示省略号

     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
   

2. 单行显示, 超出部分省略号

       display: block;
       text-overflow: ellipsis;
       white-space: nowrap;
       overflow: hidden;
   

3. 正确显示人民币符号

    font-family:  Arial,Microsoft YaHei,sans-serif ;
   

4. 禁止拖动图片

   document.getElementsByTagName('img')[0].onmousedown = function(e){
       e.preventDefault()
   };
   

5. 禁止选中

   -moz-user-select:none;
   -webkit-user-select:none;
    user-select:none; 
   

6. 图片错误时显示默认图片

   <img src="图片的url地址" onerror="this.src='默认图片的url地址'"/>
   

7. table 表格初始化

       table { border-collapse: collapse;}
   

   <table border="1">
      <tr>
          <th width="460px";height="100px">Id:</th>
          <td>{{id}}</td>
      </tr>
   </table>
   
   注意
   1. 给td设置了width却被内部元素顶开
   	解决方案: 表格的定宽是要用width+maxwwidth , 单独一个属性定不住
   2. 加表格hover边框时候要给tr加而不是table, 如果tr猎术对应不对的话是会出现某个tr某一侧边框缺失
   	解决方案: colspan合并属性赋予正确的值, 不要让同一个table中的列数不等
   3. 关于1px边框时隐时现
   	解决方案: border 1.6px solid #eee 或者使用 border.css
   

8. 多颜色边框

      border: 5px solid transparent;
      -moz-border-top-colors: red blue white white black;
      -moz-border-right-colors: red blue white white black;
      -moz-border-bottom-colors: red blue white white black;
      -moz-border-left-colors: red blue white white black;   
   

   参考网址

   https://blog.csdn.net/a271720559/article/details/80905920

9. 解决display破坏动画

   setTimeout(function () {
   	$(consts.addrConWrap).css("height","initial");
    }, 1);
   

10. 旋转中心 origin

    transform-origin:50% 50%;        设置旋转中心为元素中心。
     
    transform-origin:0% 0%;        设置旋转中心为元素左上角。
     
    transform-origin:100% 100%;        设置旋转中心为元素右下角。
    

11. 三角形

    .triangle {
      position: absolute;
      // 20px决定着三角形锐利程度
      border: 20px solid transparent;
      border-bottom: none;
      border-top: 30px solid yellowgreen;
      // 是否是扇形
      border-radius: 20px;
    }
    
    生成工具: https://www.jiangweishan.com/tool/sanjx/index.html
    

12. 超出部分不显示滚动条单可以滚动

        <div class="outer-container">
            <div class="inner-container">
                <div class="content">
                   ...
                </div>
            </div>
        </div>
    

    .outer-container,.content {
      width: 200px; height: 200px;
    }
    .outer-container {
      position: relative;
      overflow: hidden;
    }
    .inner-container {
      position: absolute; left: 0;
      overflow-x: hidden;
      overflow-y: scroll;
    }
    .inner-container::-webkit-scrollbar {
      display: none;
    }
    

13. 投影效果

      -webkit-box-reflect: below 0 -webkit-linear-gradient(transparent 20%,rgba(0,0,0,.5));
      box-reflect: below 0 linear-gradient(transparent 60%,rgba(0,0,0,.3));
    

14. 强制换行

    {
    
    word-break:break-all; /*支持IE，chrome，FF不支持*/
    
    word-wrap:break-word;/*支持IE，chrome，FF*/
    
    }
    
    

15. 渐变

    background:-webkit-linear-gradient(top,#FFF,#cb1919);
    background:-o-linear-gradient(top,#FFF,#cb1919);
    background:-ms-linear-gradient(top,#FFF,#cb1919);
    background:-moz-linear-gradient(top,#FFF,#cb1919);
    background:linear-gradient(top,#FFF,#cb1919);
    

    第一个参数：设置渐变的起始位置

    第二个参数：设置起始位置的颜色

    第三个参数：设置终止位置的颜色

16. 取消手机页面点击a出现虚线的问题

    -webkit-tap-highlight-color: transparent;
    
    -webkit-touch-callout: none;
    
    -webkit-user-select: none; 
    

17. 媒体查询

    @media screen and (max-width: 960px){
        body{
            background: #000;
        }
    }
    

18. 移动端字体优化

    font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;
    
    详情: https://blog.csdn.net/qq_37788558/article/details/76165761
    

19. clearFix

    .clear-fix:after {
      content: " ";
      display: block;
      clear: both;
      height: 0;
    }
    
    .clear-fix {
      zoom: 1;
    }
    

搜集的一些别人的

css/css3常用样式总结 https://blog.csdn.net/h_qingyi/article/details/53509434

c3常用属性列表 https://www.cnblogs.com/xihulangzi/articles/610255.html

常用制作的样式 https://www.cnblogs.com/qdlhj/p/8013172.html