1. input 与 button 为什么有空隙?
- 要明白为什么,需要了解一下几点基础知识(耐心看完,你会发现竟如此简单)
    1. input 与 button 都属于行级块元素,都具有文本特性,
    2. html中有一个被称之为:空白文本分隔符的东东(即:html中,无论你在两个行级或行块级元素之间写多少个回车和空格都会被折叠一个空格,我在这里称它为空白文本分割符)
    3. 关键也就来了:我们在写的html代码中,你会发现我们的input 与 buton元素之间是不是有个回车,而这个回车就是我上面所说的空白文本分割符,他是有大小的,所以会出现 input 与 buttom之间有空隙的现象
- 解决办法:
    - 知道了为什么,那么解决办法就相当的容易了,直接删除我们html代码中input 与 button 之间的回车即可.
 
2. input 与 buttom 为什么 设置的 等高 却 不等高? 等高却对不齐?
- 我希望你可认真按照下面的方法跟着探索(你会发现,竟~哈哈哈)
    1. 创建一个test.html
    
    2. 敲上input 和 button两个元素,定义宽高,因为我们要测试为什么高度一致却对不齐,所以,我们给它们等高,等边框,宽度随意,
    
    [注意:input与button之间有缝隙问题,要对齐,先去掉缝隙,如何解决:具体参考上个问题]
 1 <!DOCTYPE html>

 2 <html lang="en">

 3

 4 <head>

 5     <meta charset="UTF-8">

 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">

 7     <title>Document</title>

 8     <style>

 9          * {

10             padding: 0;

11             margin: 0;

12         }

13         input {

14             width: 180px;

15             height: 40px;

16             border: 1px solid #008c8c;

17         }

18

19         button {

20             width: 50px;

21             height: 40px;

22             background: inherit;

23             border: 1px solid black;

24             /* box-sizing: content-box; */

25         }

26     </style>

27 </head>

28

29 <body>

30     <input type="text"><button>按钮</button>

31 </body>

32

33 </html>

以上代码在浏览器中查看,你会发现明明设置的是等高,但input却比button高度要高一些(为什么呢,继续往下看)
3. 右键检查(或F12使用开发者工具),选中input元素,查看他的盒子模型,你会发现,咦,这玩意除了我们设置的宽高,居然还有自带的padding,这时候你会想,是不是padding的问题,(其实button也是有自带的padding的),
为了排除padding的影响,我们在代码中插入*{
    padding:0;
    margin:0;
}
这时候你会发现,咦,好像还是对不齐,看来不是padding的问题(其实,我们在开发中,一般都会初始化所有元素的padding和margin),所以这一点很明显不是影响input 和 button对不齐的原因
4. 此时,我们在选中button元素,查看他的盒模型,咦,一会惊奇的发现,卧槽,怎么它的宽度是48px,高度是38px了呢,我们明明设置的是 50px 和 40px啊,但是你在细心观察你会发现,咦,边框加上好像就是我们设置的50px和40px了,哇,这不就是box-sizing:border-box的表现吗?(我们此时在Computed中查看计算样式 box-sizing 发现还真是 border-box)
到了这里,我们的问题终于有点眉目了,不要放弃,坚持就是胜利,距离大神只差一步,我们每次探索问题的每一步
5. 这点需要知道:
Chrome浏览器box-sizing默认是content-box,即padding 和 border都是不算在我们设置的width 和 height中的,
而 box-sizing : border-box,即 padding 和 border 是算在width 和 height中的; 
6. 到了这里相必大家也都知道为什么 input 和 button 对不齐的,这也就是为什么我们查看button的盒模型时,它的width变为38px的原因了,
7. **此时,我们把button的width改为 42px(记得改高度,我就不在写代码了)
8. 最后你会发现还是有一丢丢的对不齐,按理来讲它应该对齐了呀,
哈哈哈,此时才发现,我们只是解决了第一个小问题,为什么不等高,
其实,我们起初就以为他们是对不起,而忽略了等不等高的问题,不着急继续
9. 给input设置 vertical-align:1px;你会发现,卧槽,完美对齐了,
,以上的都是自己摸索的过程,但也只完美的解决了第一个隐藏问题,为什么不等高,但为什么对不齐,其实我也不太清楚,只是凑巧用学过的属性,用到了这里,虽然解决了,但还是不清楚所以然,忘有大家有清楚的可以指导一下,谢谢大家(记得留言探讨哦~)

input 与 button 的问题 （空隙/不等高/对不齐）及 解决办法的更多相关文章

  1. wpf button的mouse(leftbutton)down/up,click事件不响应解决办法

    按照WPF的帮助说明,某些控件的路由事件被内部处理了,已经被标记为Handled,自行定义的事件处理代码便不再起作用了,有时候会很郁闷!         不过WPF提供了必要的方法.         ...

  2. 服务器CPU使用率高的原因分析与解决办法

    我们的服务器在使用操作系统的时候,用着用着系统就变慢了,打开“ 任务管理器 ”一看,才发现CPU使用率达到80%以上.这是怎么回事情呢?遇到病毒了吗?硬件有问题?还是系统设置有问题呢?在本文中将从硬件 ...

  3. 在写移动端时，a标签或者input标签等 在手机上点击背后会有阴影的解决办法

    a,input{-webkit-tap-highlight-color:rgba(255,0,0,0);} 被背景设置成透明的就行了

  4. input属性设置type="number"之后, 仍可输入e, E, -, + 的解决办法

    <el-input v-model="scope.row.variables.leaderbuweiscores.score" @keyup.native="cha ...

  5. 遭遇input与button按钮背景图失效不显示的解决办法

    笔者从事网页前端代码页面工程师已有多年,作为一个网页重构人员常常会遇到一些莫名其妙的DIV+CSS(正确的说法是XHTML+CSS)在 IE.FireFox火狐. 谷歌浏览器CHROME.苹果浏览器S ...

  6. 表单提交按钮input和button、a的差异

    现在普遍的在网页中,表单提交数据的按钮最常见实用有三种,一种是input,一种是button,最后一种,是其他如a标签,div标签,span标签代替而来.在以前的日子里,大家都习惯于用input,因为 ...

  7. input、button、a标签 等定义的按钮尺寸的兼容性问题

    在项目中有遇到这类问题,搜索了一下解决方式,采用链接:https://segmentfault.com/q/1010000000190931 里各位楼主的答案,摘抄如下: 例子如下: HTML: &l ...

  8. 解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 && 一般的浏览器input和button的高度不一致问题

    解决chrome浏览器对于自动填充的input表单添加的默认的淡黄色背景问题 如果我们把一个表单设置位 autofocus ,这时这个表单在获取焦点后就会产生淡黄色的背景,我们就是使用!importa ...

  9. css中input与button在一行高度不一致的解决方法

    在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,先看代码: <style> input,button{ width:100px; h ...

随机推荐

  1. Android和。net加密。

    来源: Github: https://github.com/Pavel-Durov/CodeProject-Android-and-NET-Encryption 直接: Source Code (A ...

  2. java进阶(26)--ForEach

    JDK5.0后新特性 一.普通for循环

  3. Scala小记（一）

    Scala小记----初识Scala 一,什么是Scale? Scala是一门面向对象的,使用JVM运行的函数式编程语言,(函数式编程语言:指的就是那些将方法或者说是函数来作为参数 进行传递的编程语言 ...

  4. layui+tp5表单提交回调

    layui 前段页面form表单提交数据如果监听表单提交 ,tp5后台操作完成后使用 $this->success('success'); 后前端的页面不会出现layui的layer弹窗提示su ...

  5. day31 Pyhton 面向对象的基础 三大特性

    一.内容回顾 封装 1.概念 笔记 2.__名字 在类的外部就不能用了 3.私有化的 不能被子类继承,也不能在其他任何类中调用 三个装饰器方法(装饰类中的方法) 1.不被修饰的  普通方法,会使用对象 ...

  6. 【全网免费VIP观看】哔哩哔哩番剧解锁大会员-集合了优酷-爱奇艺-腾讯-芒果-乐视-ab站等全网vip视频免费破解去广告-高清普清电视观看-持续更新

    哔哩哔哩番剧解锁大会员-集合了优酷-爱奇艺-腾讯-芒果-乐视-ab站等全网vip视频免费破解去广告-高清普清电视观看-持续更新 前言 突然想看电视,结果 没有VIP 又不想花钱,这免费的不久来啦. 示 ...

  7. spring boot:shardingsphere+druid整合seata分布式事务(spring boot 2.3.3)

    一,shardingshpere为什么要整合seata? 分库分表是数据库扩展中最常用的处理方法, shardingshpere作为使用最广泛的分表中间件, 如果不支持分布式事务,则它的数据一致性就会 ...

  8. PHP获取当前毫秒级别时间戳

    PHP提供了一个microtime()函数,调用时不带可选参数,本函数以"msec sec"的格式返回一个字符串,其中 sec 是自 Unix 纪元(0:00:00 January ...

  9. Spark如何进行动态资源分配

    一.操作场景 对于Spark应用来说,资源是影响Spark应用执行效率的一个重要因素.当一个长期运行的服务,若分配给它多个Executor,可是却没有任何任务分配给它,而此时有其他的应用却资源紧张,这 ...

  10. NLP任务梳理总结

    NLP任务 前处理任务 前处理任务的结果可作为下游任务输入的额外特征. POSTa(词性标注) 往模型中输入句子,对每一个token进行词性的识别. 识别出的词性可以用于下游任务. Word Segm ...