解决设置相同高度情况下<input>和<button>不同高

本文探讨了在HTML和CSS中input与button元素高度不一致的问题,揭示了这一现象背后的原因在于默认边框设置的不同,并提供了解决方案。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

今天在做一个检索的功能时,做一个搜索框
都知道这个功能一个input一个button搞定
但是在设置样式的时候发现
这里写图片描述
哎,我明明设置了同样的高啊,为什么会不同高呢?
于是开始怀疑人生
陷入了漫长的回忆……..
然后在记忆中,仿佛记得我在初学HTML和CSS的时候写淘宝静态页也遇到这个问题
居然这么久过去了,还是不会解决
发现这个还是一个比较重要的知识点,有必要给大家普及一下

所以,为什么呢?

原来,我们在使用这两个标签的时候,这两个标签有许多默认的属性
其中border都是他们默认设置了的属性
而且他们的border值还不一样,所以才导致它们的高度不一样
将border值都设置0后你就会看见奇迹
这里写图片描述
可把它厉害坏了

顺便再说点别的,这两个标签在触发的时候都会有蓝色焦点框,如果大家不需要
设置outline:none即可

<!DOCTYPE html> <html> <head> <style> .container { position: relative; height: 400px; width: 600px; border: 2px solid #333; margin: 20px auto; overflow: hidden; } .box { width: 50px; height: 50px; position: absolute; transition: transform 0.5s ease-in-out; } .control-panel { padding: 20px; text-align: center; } button { margin: 5px; padding: 8px 15px; cursor: pointer; } #box1 { background: #ff4444; } #box2 { background: #44ff44; } #box3 { background: #4444ff; } </style> </head> <body> <div class="container"> <div class="box" id="box1"></div> <div class="box" id="box2"></div> <div class="box" id="box3"></div> </div> <div class="control-panel"> <!-- 红块控制 --> <button onclick="moveBox('box1', 'forward')">红块前进</button> <button onclick="moveBox('box1', 'left')">红块左转</button> <button onclick="moveBox('box1', 'right')">红块右转</button> <span id="pos1">位置: (0, 0) 角度: 0°</span> <!-- 绿块控制 --> <button onclick="moveBox('box2', 'forward')">绿块前进</button> <button onclick="moveBox('box2', 'left')">绿块左转</button> <button onclick="moveBox('box2', 'right')">绿块右转</button> <span id="pos2">位置: (200, 0) 角度: 0°</span> <!-- 蓝块控制 --> <button onclick="moveBox('box3', 'forward')">蓝块前进</button> <button onclick="moveBox('box3', 'left')">蓝块左转</button> <button onclick="moveBox('box3', 'right')">蓝块右转</button> <span id="pos3">位置: (400, 0) 角度: 0°</span> </div> <script> const boxes = { box1: { x: 0, y: 0, angle: 0 }, box2: { x: 200, y: 0, angle: 0 }, box3: { x: 400, y: 0, angle: 0 } }; function moveBox(id, action) { const box = boxes[id]; const step = 50; switch(action) { case 'forward': box.x += Math.cos(box.angle * Math.PI/180) * step; box.y += Math.sin(box.angle * Math.PI/180) * step; break; case 'left': box.angle -= 90; break; case 'right': box.angle += 90; break; } updatePosition(id); } function updatePosition(id) { const elem = document.getElementById(id); const {x, y, angle} = boxes[id]; elem.style.transform = `translate(${x}px, ${y}px) rotate(${angle}deg)`; document.getElementById(`pos${id.slice(-1)}`).textContent = `位置: (${Math.round(x)}, ${Math.round(y)}) 角度: ${(angle % 360 + 360) % 360}°`; } // 初始化位置显示 Object.keys(boxes).forEach(id => updatePosition(id)); </script> </body> </html>修改以上代码,改变方块颜色为金属色且能区分不同的方块,限定方块的移动范围,增加方块的上下左右移动按钮,增加点击单次方块移动距离输入,增加方块碰撞
最新发布
05-31
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值