css按钮居中_CSS的一些高级进阶小技巧

最新推荐文章于 2023-06-19 13:23:58 发布

weixin_39635657

最新推荐文章于 2023-06-19 13:23:58 发布

阅读量1k

点赞数

文章标签： css按钮居中

来源 | https://www.jianshu.com/p/63964f90fd6d

最近闲暇时间在看张鑫旭的《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

“三道杠” 小图标示意

.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; 
}

双层圆点图形示意

.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

  /**方案一：使用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的妙用

水平垂直居中

<html lang="en"><head><meta charset="UTF-8"><title>demotitle><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>

左／右对齐效果。

...
        .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**/
}
...

水平居中

...
        .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**/
}
...

垂直居中

...
        .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，

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

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

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

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

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

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

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

最高性能梯形图形绘制

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

逼真的 3D 效果

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

被遗忘的`ex`单位

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

<html lang="en"><head><meta charset="UTF-8"><title>demotitle><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)

<html lang="en"><head><meta charset="UTF-8"><title>demotitle><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;
}

weixin_39635657

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css按钮居中_CSS的一些高级进阶小技巧

来源 |https://www.jianshu.com/p/63964f90fd6d最近闲暇时间在看张鑫旭的《CSS世界》，内容真的是非常精彩，很多细节分析的非常透彻，值得推荐。在日常开发中实现某种效果有很多方式，但是下面的css code我以前都很少用到，原来css还可以这么玩。实现hover改变成另一张图片效果/**css**/img: hover { 　 content...
复制链接

扫一扫