目 录CONTENT

文章目录

常用易忘CSS小技巧

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 8126 阅读 / 5090 字

常用易忘CSS小技巧

  1. 解决inline-block元素设置overflow:hidden属性导致相邻行内元素向下偏移

    .wrap{
        display: inline-block;
        overflow: hidden;
        vertical-align: bottom;
    }
    
  2. 超出部分显示省略号

    /* 单行文本 */
    .wrap{
        overflow: hidden;   /*超出部分隐藏*/
        text-overflow: ellipsis;  /*超出部分显示省略号*/
        white-space: nowrap;  /*规定段落中的文本不进行换行 */
    }
    /* 多行文本 */
    .wrap{
        width: 100%;
        overflow: hidden;
        display: -webkit-box;    /*将对象变成弹性盒子*/
        -webkit-box-orient: vertical;   /*设置弹性盒子排列方式*/
        -webkit-line-clamp: 3;  /*用来聘用制在一个元素中显示的文本行数*/
        word-break: break-all;  /* 让浏览器实现任意位置换行,break-all为允许单词换行*/
    }
    
  3. css实现不换行、自动换行、强制换行

    /* 不换行 */
    .wrap{
        white-space: nowrap;
    }
    /* 自动换行 */
    .wrap{
        word-wrap: break-word;
        word-break: normal;
    }
    /* 强制换行 */
    .wrap{
        word-break: break-all;
    }
    
  4. CSS实现文本两端对齐

    .wrap{
        text-align: justify;
        text-justify: distribute-all-lines;  /*IE6~8*/
        text-align-last: justify;   /*一个块或行的最后一行对齐方式*/
        -moz-text-align-last: justify;
        -webkit-text-align-last:justiry;
    }
    
  5. 实现文字竖向排版

    /* 单选展示 */
    .wrap{
        width: 25px;
        line-height: 18px;
        height: auto;
        font-size: 12px;
        padding:8px 5px;
        word-wrap: break-word;
    }
    /* 多行展示时 */
    .wrap{
        height: 210px;
        line-height: 30px;
        text-align: justify;   
        writing-mode: vertical-lr; /*从左向右*/
        writing-mode:tb-lr;         /*IE从左向右*/
        /* writing-mode: vertical-rl; 从右向左*/
        /* writing-mode: tb-rl;    从右向左*/
    }
    
  6. 使元素鼠标事件失效

    .wrap{
        /* 如果tab能够选中该元素,如button,然后按回车还是能执行事件,如click */
        pointer-events: none;
        cursor: default;
    }
    
  7. 禁止用户选择

    .wrap{
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select:none;
        -moz-user-select: none;
        -moz-user-select: none;
        user-select: none;
    }
    
  8. Text-transform和Font Variant

    p {text-transform: uppercase;}  /*将所有字母变成大写*/
    p {text-transform: lowercase;}  /*将所有字母变成小写*/
    p {text-transform: capitalize;} /*首字母大写*/
    p {font-variant: small-caps;}   /*将字体变成小型的大写字母*/
    
  9. 将一个容器设为透明

    .wrap{
        opacity: 0.5;
        filter: alpha(opacity=50);
        -moz-opacity:0.5;
        -khtml-opacity:0.5;
    }
    
  10. 自定义滚动条

    
    /* 整个滚动条 */
    ::-webkit-scrollbar{
        width: 5px;
    }
    /* 滚动条的轨道 */
    ::-webkit-scrollbar-track{
        background-color: #990000;
        border-radius: 5px;
    }
    /* 滚动条的滑块 */
    ::-webkit-scrollbar-thumb{
        background-color: #009900;
        border-radius: 5px;
    }
    
  11. 让 HTML 识别 string 里的 '\n' 并换行

    body{
        white-space: pre-line;
    }
    
  12. 实现一个三角形

    .wrap{
        border-color: transparent transparent green transparent;
        border-style: solid;
        border-width: 0px 300px 300px 300px;
        width: 0px;
        height: 0px;
    }
    
  13. 移除被点链接的边框

    a {outline: none;}
    a {outline: 0;}
    
  14. 使用CSS显示链接之后的URL

    a::after{
        content: "("attr(href)")";
    }
    
  15. select内容居中显示、下拉内容右对齐

    select{
        text-align: center;
        text-align-last: center;
    }
    select option{
        direction: rtl;
    }
    
  16. 修改input输入框中光标的颜色不改变字体的颜色

    input{
        color: #fff;
        caret-color: red;
    }
    
    
  17. 修改input 输入框中 placeholder 默认字体样式

    /* webkit为核心的浏览器 */
    input::-webkit-input-placeholder{
        color: gray;
    }
    /* firefox 4~18版本*/
    input::-moz-placeholder{
        color: gray;
    }
    /* firefox 19+版本*/
    input::-moz-placeholder{
        color: gray;
    }
    /* IE浏览器 */
    input:-ms-input-placeholder{
        color: gray;
    }
    
  18. 让div里的图片和文字同时上下居中

    .wrap{
        height: 100px;
        line-height: 100px;
    }
    img{
        vertical-align: middle;
    }
    
  19. transfrom的rotate属性在span标签下失效

    span{
        display: inline-block;
    }
    
  20. 边框字体同色

    .wrap{
        width: 200px;
        height: 200px;
        color: black;
        font-size: 30px;
        border: 50px solid currentColor;
    }
    

0

评论区