网页按钮使用div还是button的争议，以及button样式的正确写法

2019独角兽企业重金招聘Python工程师标准>>>

使用div的好处是：一般做网页人都进行大量div使用，对div的效果已经了如执掌了。不好处是：语义化差，不能享受浏览器的自带效果（如Tab键切换）。

使用button的好是：语义化好，有浏览器的自带效果。不好处是：很多人想当然的按照div的习惯使用，导致兼容性差（Bootstrap也有这个错误还甩锅给火狐）。

 

个人观点：

前端开发者应当掌握button样式的写法，业务开发者应当使用封装好的class。用div的要改成a标签而不是div。

 

本文主要是想介绍一下button样式的写法

首先标签的type属性不可省略

<button type="button">按钮</button>

通常在div中会使用padding实现垂直居中。button是自带居中的，应当固定height的值。

在旧浏览器中button是带有厚的border，薄为0的padding。所以早期的网页有*{padding:0}不会影响按钮。但是在新的浏览器中button自带的border较薄，padding比较厚。所以不能使用*{padding:0}，这回导致按钮很小。

一般按钮的样式会加上边框和背景，按照通常的用法border:1px solid #000;即可。

效果：

http://raw.githack.com/linsk1998/ting/master/css/button.html

转载于:https://my.oschina.net/linsk1998/blog/2239544