CSS用的少量小技巧/高级进阶(持续升级)

作者 : 开心源码 本文共3966个字,预计阅读时间需要10分钟 发布时间: 2022-05-11 共54人阅读

最近闲暇时间在看鑫爷的《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;        }

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » CSS用的少量小技巧/高级进阶(持续升级)

发表回复