CSS笔记

蔚落 2021-09-07 06:00 318阅读 0赞

## CSS常用方法 ##

// 隐藏滚动条 &::-webkit-scrollbar { 
            display: none;
        }
    // 单行打点 .ellipsis() { 
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    // 多行打点
    .multi-ellipsis(@lines) { 
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: @lines;
    
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;
    }
    // 清除浮动 .clearfix() { 
      &::after { 
        display: table;
        clear: both;
        content: '';
      }
    }
    
    // 移动端1px  .border-1px:after { 
        content: '';
        position: absolute;
        box-sizing: border-box;
        top: 0;
        left: 0;
        width: 200%;
        height: 200%;
        border: 1px solid #000;
        border-radius: 4px;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
        -webkit-transform-origin: top left;
    }
    
     .border-1px-top:before { 
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        border-bottom: 1px solid red;
        transform: scaleY(.5);
        transform-origin: left top;
    }

// 换行问题  
在默认情况下，英文字符排列是这样的;  
多个英文单词默认自动换行，单行字母不自动换行;  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70]

white-space:nowrap; // 强制不换行
    word-break:break-all; // 自动换行

## [flex和img相关内容][flex_img] ##

## 参考 ##

[vant样式][vant]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mjc1NTY3Nw_size_16_color_FFFFFF_t_70]: /images/20210813/2af7715fc0534c4ebf66fd30d0d2c0ae.png
[flex_img]: https://blog.csdn.net/weixin_42755677/article/details/92642316?ops_request_misc=%25257B%252522request%25255Fid%252522%25253A%252522160986249516780265457241%252522%25252C%252522scm%252522%25253A%25252220140713.130102334.pc%25255Fblog.%252522%25257D&request_id=160986249516780265457241&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_v1~rank_blog_v1-1-92642316.pc_v1_rank_blog_v1&utm_term=flex
[vant]: https://github.com/youzan/vant/tree/dev/src/style