如何消除標籤的默認樣式

在不添加任何樣式的狀況下，如下的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;    //消除默認點擊藍色邊框效果
        }