使用按钮的5个理由

按钮是使用最广泛的HTML元素，推荐在有点击交互的地方使用它。但是，仍然有大多数网站使用div，例如博客，几乎无处不在。既然div是按钮，为什么不直接用按钮呢？以下是使用按钮的5个理由1.禁用功能Button支持禁用。这也是表单元素的共性。直接设置disabled属性就可以实现禁用的效果button而且这种禁用不仅可以禁用鼠标点击，还可以禁用键盘访问，是真正的禁用。如果要改变disabled样式，需要使用:disabled伪类而不是disabled属性button:disabled{}/*不推荐*/button[disabled]{}因为有时候按钮被disabled了，不一定来自于本身，有可能因为父元素，比如fieldsetbuttonbutton，可以看到当fieldset被disabled时，所有包含的form元素是Disabled的，这些表单元素本身是没有disabled属性的，所以要禁用一个按钮，必须通过:disabled伪类另外，在div中，一般是通过pointer-events:none;来实现的，但是this只能禁用鼠标行为div.disabled{pointer-events:none;}当然对于div来说，这个方法已经足够了，因为div本身不会聚焦到2.盒模型的默认盒属性和居中特性是border-box，可以进一步扩展实际上，几乎所有的表单元素的box属性都是border-box。所以在给按钮设置具体尺寸的时候，不需要设置这个按钮{padding:5px10px;宽度：100%；框大小：边框框；/*不需要*/}然后，按钮中的默认值是垂直居中和水平居中。几乎所有的按钮都是居中的，所以不需要设置任何居中属性就可以实现水平和垂直居中按钮{width:100px;高度：100px；文本对齐：居中；/*不需要*/line-height:50px;/*不需要*/}第三，键盘访问按钮支持键盘访问。使用tab键切换焦点时，会有明显的焦点提示（轮廓）。并且在focused状态下，按钮的click事件可以通过键盘enter或者space键触发（以下是键盘操作，使用tab进行focus，然后通过enter或者space键触发click）。所以，为了保持键盘访问的可见性，最好不要做这个Do按钮{outline:0;/*最好不要这样做*/}默认情况下，这个轮廓只有在键盘获得焦点时才会出现，而鼠标在单击焦点时不会出现。如果需要改变焦点的颜色，改变outline-color即可，这个不会影响浏览器按钮的默认时序{outline-color:salmon;}最好不要改变整个outline，这样不管是键盘焦点还是鼠标点击焦点都会导致轮廓出现（一般设计不喜欢鼠标点击有轮廓）/*最好不要这样*/button:focus{outline:1pxsolidsalmon;}如果想完全控制键盘焦点的样式，可以使用这个伪类：focus-visible，兼容性稍差button:focus-visible{outline:5pxsolidsalmon;}四、表单特征按钮有一些形式特征。合理利用这些特性，可以实现很多不需要js的交互，比如这样的表单