如何消除標簽的默認樣式

在不添加任何樣式的情況下，以下的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;
            width: 30px;
            height: 30px;
        }

 

可以看到按鈕的默認間距已經消失，但是所有按鈕浮動為一行，所以要清除浮動：

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

但是現在還有問題，邊框重疊導致邊框寬度不一致，而且可以自己定義邊框：

.square{
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid black;  //自定義邊框
            margin-right: -1px;  //用來消除左右重疊邊框
            margin-bottom: -1px;  //用來消除上下重疊邊框
        }

現在還剩最后一個問題，按鈕按下會出現選中框，如果要消除可以添加如下：

.square{
            float: left;
            width: 30px;
            height: 30px;
            border: 1px solid black;
            margin-right: -1px;
            margin-bottom: -1px;
            outline: none;    //消除默認點擊藍色邊框效果
        }