CSS使用的一些小技巧/高级进阶（持续更新）-原创手记-慕课网

最近闲暇时间在看鑫爷的《CSS世界》，内容真的是非常精彩，很多细节分析的非常透彻，值得推荐。在日常开发中实现某种效果有很多方式，但是下面的css code我以前都很少用到，原来css还可以这么玩。

实现hover改变成另一张图片效果

/**css**/img: hover { 　
     content: url( laugh-tear. png);
 }/**html code**/< img src=" laugh. png">

局限性：content 属性改变的仅仅是视觉呈现，当我们以右键或其他形式保存这张图片的时候，所保存的还是原来 src 对应的图片。

显示网站logo

< h1>logo</ h1>
 h1 { 　 
   content: url( logo. svg);
 }

优点：
1，不会影响网站SEO。
2，使用.svg矢量图为了适应移动端 retina 屏幕（如果用.svg会模
糊）。
注：千万不要自以为是地把重要的文本信息使用content 属性生成，因为这对可访问性和SEO都很不友好，content 属性只能用来生成一些无关紧要的内容，如装饰性图形或者序号之类；同样，也不要担心原本重要的文字信息会被content替换，替换的仅仅是视觉层。

设置内容无法选中、无法复制

  user-select: none

“三道杠” 小图标示意

image.png

.icon-menu { 　     display: inline-block; 　     width: 140px; 
     height: 10px; 　     padding: 35px 0; 　     border-top: 10px solid; 　     border-bottom: 10px solid; 　     background-color: currentColor; 　     background-clip: content-box; 
}

双层圆点图形示意

image.png

.icon-dot { 　     display: inline-block; 　 
      width: 100px; 
      height: 100px; 　 
      padding: 10px; 　      border: 10px solid; 　 　 　 
      border-radius: 50%; 　 
      background-color: currentColor; 　 
      background-clip: content-box; 
}

去掉最右边的margin-right：20

image.png

  /**方案一：使用css3 nth-of-type属性（不考虑兼容IE8**/li: nth-of-type(3n) { 
　 margin-right: 0;
 }

  /**方案二：通过给父容器添加margin属性， 增加容器的可用宽度来实现**/ul { 　     margin-right: -20px; 
} ul > li { 　     float: left; 　     width: 100px; 　 
     margin-right: 20px;
 }

margin：auto的妙用

水平垂直居中

image.png

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>
        .father {            position: relative;            width: 300px;            height: 150px;            border: red solid 1px;
        }        .son {            position: absolute;  /**key code here**/
            background-color: orange;            width: 100px;            height: 100px;            top: 0;            right: 0;            left: 0;            bottom: 0;            margin: auto;  /**key code here**/
        }    </style></head><body>
    <div class="father">
        <div class="son"></div>
    </div></body></html>

左／右对齐效果。

image.png

...        .father {            width: 300px;            height: 200px;            border: red solid 1px;
        }        .son {            width: 100px;            height: 100px;            background-color: orange;            margin-right: 50px; /**左对齐margin-right、margin-left值交换**/
            margin-left: auto;  /**key code here**/
        }
...

水平居中

image.png

...        .father {            width: 300px;            height: 200px;            border: red solid 1px;
        }        .son {            width: 100px;            height: 100px;            background-color: orange;            margin-right: auto; /**key code here**/
            margin-left: auto;  /**key code here**/
        }
...

垂直居中

image.png

...        .father {            width: 300px;            height: 200px;            writing-mode: vertical-lr;  /**key code here**/
            border: red solid 1px;
        }        .son {            width: 100px;            height: 100px;            background-color: orange;            margin: auto;  /**key code here**/
        }
...

实现最高渲染性能的去除下边框css

div { 　 
    border: 1px solid; 　 
    border-bottom: 0 none;  /**key code here**/
 }

优雅的增加icon按钮点击区域

点击区域大小从 16 × 16 一下子提升到 38 × 38，

image.png

.icon- clear { 　     width: 16px; 　 
      height: 16px; 　 
      border: 11px solid transparent; 　 /**key code here**/}

最高性能等边三角图形绘制

image.png

 div {      width: 0;      border: 10px solid;      border-color: #f30 transparent transparent;
   }

最高性能等腰三角图形绘制

image.png

        div {            width: 0;            border-width: 20px 10px;            border-style: solid;            border-color: #f30 transparent transparent;
        }

又或者是这种三角形（对话框气泡下的三角形）

image.png

        div {            width: 0;            border-width: 20px 10px;            border-style: solid;            border-color: #f30 #f30 transparent transparent;
        }

最高性能梯形图形绘制

image.png

        div {            width: 10px;            height: 10px;            border: 10px solid;            border-color: #f30 transparent transparent;
        }

逼真的 3D 效果

image.png

        div {            width: 10px;            height: 10px;            border: 10px solid;            border-color: #f30 #00f #396 #0f0;
        }

被遗忘的`ex`单位

实现箭头居中文字垂直方向（不受字体、字号影响）

image.png

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>

        .icon-arrow {            display: inline-block;            width: 20px;            height: 1ex;            background: url(arrow.svg) no-repeat center/20px 20px;
        }    </style></head><body>
    <div style="font-size: 18px">
       箭头居中对齐        <i class="icon-arrow"></i>
    </div></body></html>

永远居中的`dialog`（可兼容到IE7）

image.png

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>demo</title>
    <style>

       .container {           position: fixed;           top:0;           right: 0;           left: 0;           bottom: 0;           background-color: rgba(0,0,0,.5);           text-align: center;           font-size: 0;           white-space: nowrap;           overflow: auto;

       }       .container:after {           content: '';           display: inline-block;           height: 100%;           vertical-align: middle;
       }       .content {           width: 240px;           height: 120px;           padding: 20px;
       }       .dialog {           display: inline-block;           vertical-align: middle;           border-radius: 6px;           background-color: #fff;           font-size: 14px;           white-space: normal;
       }    </style></head><body>
    <div class="container">
        <div class="dialog">
            <div class="content">这dialog永远居中</div>
        </div>

    </div></body></html>

去除页面默认滚动条(PC端有效)

/**good code**/
 html {            overflow: hidden;
        }/**bad code**/
 html, body {    
            overflow: hidden;
        }

作者：giants_one
链接：https://www.jianshu.com/p/63964f90fd6d