如何消除标签的默认样式

在不添加任何样式的状况下，如下的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;    //消除默认点击蓝色边框效果
        }