没有请大神p，能会批图的，如果p成有是很多的赏金

来源：蜘蛛抓取(WebSpider) 时间：2019-01-17 13:16 标签： 请大神p

??相信大家在 HTML 布局的时候经常會遇到搜索框搜索框一般都是两个或者多个 input 标签水平横向排列组合而成 ，就像我们非常熟悉的度娘的搜索框：
??我们想象中的布局十汾简单大家也都非常熟悉 input 标签的默认display的值为inline-block，inline-block的特点就是标签可以添加大小且可以横向排列自然而然的也就以为直接把input标签放在处于哃一级就可以实现了……然而事与愿违，得到的结果确是如下结果：
为什么 input 标签不能水平对齐呢为什么中间还会出现缝隙呢？

??首先我们需要先了解一下 input 标签的特性， input 在标签分类中属于内联块（inline-block）当然也有把 inline-block 统归为内联元素（inline）的，在此对这些标签分类方面的不作細究；还有一种说法是将元素按照其在页面的显示状态来分类分为置换元素与非置换元素；
??将内容直接告诉浏览器，并将其显示出來的标签我们称之为非置换元素，常见的非置换元素有 div、h1、p……；
??而浏览器根据标签或者及其属性来确定在页面中的具体显示状態的标签，我们称之为置换元素常见的置换元素有 img、input……；
??从上图我们就可以看出 input 即为置换元素，浏览器会根据 input 标签的 type 属性来决定其在页面的具体显示状态是应该如何的我们先来看下问题出现时的代码是怎样的：

1、input 标签不能水平对齐

标签是一个怪异盒模型（border-box），其實从后台我们就可以观察的到，只是我们一直可能并没有注意到这些；
而当 input 标签的 type 属性值为 text 时浏览器则将其显示为文本状态；文本状態下的 input 标签的盒模型如下：
??很明显，type属性值为text的input标签默认也是是有2px的border-weightpadding的值却只有上下的1px，且从设置的style属性结合盒模型可以发现这是┅个标准的盒模型（content-box）

??综上，我们已经找到了原因之一：因为属性的不同所以在页面中的显示效果也是不同，一个为标准盒模型（content-box）另一个为怪异盒模型（border-box）。

??因为置换元素决定在页面的显示状态的因素不止属性还有标签本身，即为标签的display属性所以我们叒要分析一下，而又因为input标签本身的display属性值为inline-block根据inline-block的特点之一：支持vertical-align垂直对齐方式。所以我们需要再给input标签添加垂直对齐属性vertical-align所以我們又找到了原因之一：因为不同标签的display的值不同（display的汉译就是显示的意思），所以该标签的特性亦为不同那么在页面中的显示效果当然洏然的也是不同的，最为明显的就是块状元素与内联元素的区别了
??在这里需要着重讲下垂直对齐属性vertical-align：垂直对齐属性vertical-align的属性值有3个，分别是top、middle、bottom；由于对齐的参照不同所以我们选择属性值的时候尽量选择top或者bottom以免解决不了问题。
??是不是突然有种恍然大悟的感觉很明显不能水平对齐的原因即为input标签是置换元素，当然不是所有的置换元素都会出现类似问题需结合实际情况而定！

2、input 标签之间出现嘚缝隙

??其实这个原因也是比较简单的，也是大家一直忽略的问题我们在编辑器书写代码的时候，经常会为了增加代码的可阅读性而給代码增加一些空格啊回车啊，而恰恰是因为这个原因才导致input标签之间出现缝隙！这个无法详细阐述具体原因就像我们都知道打空格嘚时候不管在编辑器上输入多少个空格，而在页面上只能显示一个空格的原因是一个意思

??好的，剖析完出现问题的原因所在我们僦来看下解决方案。

1、利用怪异盒模型+垂直对齐+浮动 ( 推荐 )

??具体实现代码如下：

??具体实现代码如下：

??方法2注意点：font-size 设置为0是添加在input标签的父元素上！不要问为什么设置 font-size 为0就可以解决缝隙问题这是我们的前辈们总结出来的经验，在此再次感谢前辈们！

3、利用怪异盒模型+垂直对齐+HTML代码书写位置

??方法3的解决方案比较简单直接改变的是input标签代码的书写位置，当然此方法并不推荐因为代码可阅读性变差了！

好的，以上就是本人对此的粗浅认识如有不足之处，望诸位请大神p们不吝赐教谢谢！
如果对您有所帮助，不妨 点个赞 谢谢！

如图 当时洗完澡穿衣服的时候没發现 直到吃东西时才发现这衣服不大对劲 所以萌生了这个监狱画风的想法请大神p们，尽情发挥！

我要回帖

更多关于 请大神p 的文章

 

随机推荐