在不添加任何样式的情况下,以下的html代码呈现如下:
1
2
3
4
5
6
7
8
9
上面是在谷歌浏览器中的默认样式。可以发现默认带有padding和border。
我们可以添加以下代码来消除默认样式:
*{
margin:0;
padding:0;
font-size: 100%;
}
现在,的默认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;//消除默认点击蓝色边框效果
}