用div与button标签作为按钮的一些区别

8 篇文章 0 订阅

如果button在form表单内部,则可以不用JS绑定onclick属性就可以提交表单内容;
而如果不在form表单内部,又不考虑语义化,那么作为按钮,用div和button来写按钮似乎就没什么太多的区别,只存在一些外观上的细微区别。
button标签的外观如下:
在这里插入图片描述
下面分别对button和div进行同样的css修饰:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="button.css">
</head>
<body>
	<button>按钮1</button>
	<div>按钮2</div>
</body>
</html>
*{
	padding: 0;
	margin: 0;
	margin-bottom:5px;
}

button{
	height: 50px;
	width: 200px;
	color: #fff;
	background-color: #00BFFF;
	line-height: 50px;
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	border: 1px solid #1E90FF;
	border-radius: 4px;
}

div{
	height: 50px;
	width: 200px;
	color: #fff;
	background-color: #00BFFF;
	line-height: 50px;
	text-align: center;
	font-weight: 600;
	font-size: 16px;
	border: 1px solid #1E90FF;
	border-radius: 4px;
}

在外观上二者的形式如下:
在这里插入图片描述
似乎并没什么区别,但细微观察会发现,二者还是存在如下区别:
1.div的默认box-sizing属性为content-box,而button默认为border-box,因此div会比button看上去大一些;

2.button的cursor属性默认值类似于default,鼠标悬停在button上方为默认形式,而div的cursor则是text类型,并且div的user-select为text属性,即可以内部文本可以被选中,而button的默认为none,不可选中内部文本;

3.如果不给button设置background-color或border属性,则它存在一个默认的点击动画,鼠标点击时背景颜色或边框会动态变化以呈现出点击的动画效果,而div则不会。

4.但是如果给button设置了background-color和border属性,这些默认的点击动画将会消失。

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值