如何让css按钮居中&CSS小技巧
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;}