input输入框大小设置_前端需要知道的冷知识2 input | margin重叠 | 大小写 | 盒模型...

注：测试浏览器版本号——chrome 75.0.3770.80；opera 60.0.3255.109；firefox 67.0；ie 11。

接上篇文章，我们继续来讲一些平常可能会用到但是又比较冷门的知识。

一 input提示语句

我们在使用input输入框和textarea输入框时，有时候需要给用户一些提示，比如这个输入框应该填写的内容，有人说提前预设“value”不就可以了吗？如果不是太抠细节，用“value”属性实现也是可以，但是如果使用“value”做提示，用户输入的时候需要先把预设的值删除，然后才能输入。这样做会使用户体验大打折扣。因此我们需要其他的方法来实现，这个时候“placeholder”属性就派上用场啦！“placeholder”翻译过来就是占位符的意思，我们通过给“placeholder”属性赋值来占据位置。

以上面代码为例，我们得到下图的结果，点击第一个输入框，输入提示光标在最左边，输入文字后提示性语句消失；点击第二个输入框，输入提示光标接在“请输入用户名”后面，输入文字其也不会消失，需要我们手动删除。

二 input[type="text"]输入框兼容性

都知道input输入框是能输入一行文字，input内文字始终在content内上下居中。但是这里有个例外，在ie(本例版本为ie11)中，当content的高度

以下面代码为例

得到结果如下图。我们发现在ie中文字会根据自己行高来判断自己的位置。这点在做兼容的时候需要特别注意。

解决方案是设置input的content高度>=line-height。

三 margin重叠

大家一定有过这样的体验，当两个相邻的盒子都有margin时，他们之间的间距有时候会不等于两个盒子的margin之和。为什么会出现这种情况呢？以下面代码为例，box-1和box-2都有外边距且外边距不一样。

/* css样式 */html,body { margin: 0; padding: 0;}.box-1 { margin:40px; border: 1px solid #000; background: skyblue;}.box-2 { margin:20px; border: 1px solid #000; background: skyblue;}.in-1{ display: inline-block; width: 200PX; height: 100px; border: 1px solid red; margin: 20px; background: yellowgreen;}

第一个盒子

第二个盒子

第三个盒子

第四个盒子

得到结果如下图。我们发现：1. 竖直方向box-1和box-2之间的间距为40px(两盒子中较大的margin值)而不是60px(两盒子margin值之和)；2. 水平方向第一个盒子和第二个盒子之间的间距为40px(两盒子margin值之和)。

我们得到结论：水平方向两盒子间距=两盒子margin值之和；竖直方向两盒子间距=max(盒子1margin值，盒子2margin值)。

上面的结论真的正确的吗？？？

我们知道margin还可以取负值，如果按照上面的结论，假设两个盒子的margin值一个是负值，一个是正值，那么他们之间的间距一定是正值的数值。为了验证上述猜测的正确性，我们将上面的例子做以下修改：

1. 将box-1的margin-bottom值改为-40px并将其他边的margin值改为20px；
2. 将第二个盒子和第四个盒子的margin-left值改为-20px；
3. 将第三个盒子的margin-right值改为-20px；

得到下图的结果。审查元素发现：1. 竖直方向box-1和box-2的间距=-20px；2水平方向不存在规律

再继续修改代码：

1. 将box-2的margin-top值改为-20px；

得到下图的结果。审查元素发现：box-1和box-2的间距=-40px。

综上我们发现竖直方向是有规律的，但是水平方向没有规律，为什么会出现这种情况呢？

查阅W3C规范恍然大悟，里面的结论归纳一下是这样的：

1. 两个相邻的盒子margin值都是正数时，两盒子间距=两盒子较大的margin值

2. 两个相邻的盒子margin值都是负数时，两盒子间距=两盒子较小的margin值

3. 两个相邻的盒子margin值一正一负时，两盒子间距=两盒子margin值之和

注意：根据W3C规范，以上结论有以下前提：

1. margin必须相邻且是竖直方向相邻；
2. 两盒子必须处于普通文档流(normal flow)，
3. 两盒子父元素必须相同；
4. 两盒子必须都是块级元素(不能是inline-block元素)；

四 字母大小写

有些情况我们需要单词全部显示大写，例如文章大标题，按钮提示词等等，有的时候也需要全部小写。为了避免误输入，我们可以设定当前元素的文本自动转换大小写，具体属性值如下：

text-transform: none(默认不改变) | capitalize(首字母大写) | uppercase(全部大写) | lowercase(全部小写) | full-width(全宽度);

以下面代码为例。

tEst enGlish

tEst enGlish

tEst enGlish

tEst enGlish

tEst enGlish

tEst enGlish

得到结果如下图。

五 各元素默认的盒模型

之前的学习我们了解了标准盒模型(box-sizing=content-box)和怪异盒模型(box-sizing=border-box)两种。两种模型的用途各不相同，没有优劣之分。我们的困惑是为什么有时候设置的width是content的width，而有时候是border+padding+content的width呢？下面我们来讲一讲html常见元素默认的盒模型类型。

方法很简单，利用chrome的调试工具中的“computed”查看元素box-sizing属性的值。在四个实验浏览器检查下面两图中的块级元素和行内元素发现只有selcet元素默认的盒模型是怪异盒模型(box-sizing=border-box)，其他元素默认的盒模型均为标准盒模型(box-sizing=content-box)。