如何消除<button></button>标签的默认样式

在不添加任何样式的情况下，以下的html代码呈现如下：

<div class="square-row">
    <button class="square">1</button>
    <button class="square">2</button>
    <button class="square">3</button>
</div>
<div class="square-row">
    <button class="square">4</button>
    <button class="square">5</button>
    <button class="square">6</button>
</div>
<div class="square-row">
    <button class="square">7</button>
    <button class="square">8</button>
    <button class="square">9</button>
</div>

上面是在谷歌浏览器中的默认样式。可以发现<button>默认带有padding和border。

我们可以添加以下代码来消除默认样式：

*{
            margin: 0;
            padding: 0;
            font-size: 100%;
        }

              

现在，<button>的默认padding被消除了，但是可以看到按钮之间还是有默认的间隔，这是inline-block元素默认的间距，可以使用float来消除：

.square{
            float: left;
             30px;
            height: 30px;
        }

可以看到按钮的默认间距已经消失，但是所有按钮浮动为一行，所以要清除浮动：

.square-row:after{
            content: "";
            display: block;
            clear: both;
        }

但是现在还有问题，边框重叠导致边框宽度不一致，而且可以自己定义边框：

.square{
            float: left;
             30px;
            height: 30px;
            border: 1px solid black;  //自定义边框
            margin-right: -1px;  //用来消除左右重叠边框
            margin-bottom: -1px;  //用来消除上下重叠边框
        }

现在还剩最后一个问题，按钮按下会出现选中框，如果要消除可以添加如下：

.square{
            float: left;
             30px;
            height: 30px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
            outline: none;    //消除默认点击蓝色边框效果
        }