如何让css按钮居中&CSS小技巧
圆弧派博客 - 专注于网络技术

如何让css按钮居中&CSS小技巧

青帝
2022-12-23 / 0 评论 / 135 阅读 / 正在检测是否收录...

margin:auto的用途

水平垂直居中
margin: auto;
{margin-left:auto;margin-right:auto;}

缩写形式为:

{margin:0 auto;}

0为上下边距,可按自己需要设置成不同的

实现最高渲染性能的去除下边框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**/}

永远居中的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;}

评论 (0)

语录
取消