CSS盒模型之input篇

问题

input 设置 width: 100%; 时实际宽高溢出父元素容器范围

当给容器下的input元素设置 width: 100%; input会凸出一块，宽高都有偏差，无法上下对齐。

// html
<div class="main">
  <input type="text" />
</div>

// css
body, html {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}
.main {
  width: 100px;
  height: 100%;
  border: 1px solid #000;
}
input {
  width: 100%;
}

效果图如下：

导致这个情况的原因是因为盒子模型的问题。

解疑 （为什么）

盒模型有两种：

• 标准盒模型
• 怪异盒模型

1、标准: 「 content 」+ padding + border + margin

2、怪异：「 content + padding + border 」 + margin

相同结构，但是设置的width|height作用的区域不同，标准的只作用于content，怪异的作用在border及其内区域。

上面type='text'的input框，width: 100% 只作用在content内容区域，padding: 1px 2px; 和 border: 2px; 这两者没包括在里面，额外增加在content以外的区域。所以input的实际宽度是 2px(左border宽) + 2px(左padding宽) + 100px(父元素的100%) + 2px(右padding) + 2px(右border宽) = 108px。

那么，我们再在html代码上加上一个submit的input元素，看看会不会也是如此:

// html
<div class="main">
  <input type="text" />
  <input type="submit" />
</div>

效果如下：

当type='submit'的input框设置同样设置width: 100%时；它是能够和父元素对齐的。
width: 100%作用在border以内，所以padding和border都会包含在width: 100%以内。

那么可以看出：input[type='text']时是遵循标准盒模型，input[type='submit']时是遵循怪异盒模型。

解答 （怎么做）

要想input[type='text']被包在父元素里面不溢出，那么就是把标准模型转 化成 怪异模型

• 把标准模型转 化成 怪异模型 | box-sizing: border-box;

• 把怪异模型转 化成 标准模型 | box-sizing: content-box;

---

不同type的input

type	描述	模型
text	默认值。单行的文本区域，输入中的换行会被自动去除	标准
submit	用于提交表单的按钮	怪异
button	没有默认行为的按钮，上面显示value属性的值，默认为空	怪异
checkbox	复选框，可设为选中或未选中	怪异
color	用于指定颜色的控件; 激活时会打开取色器	怪异
date	输入日期的组件(年、月、日，不包括时分秒); 激活时打开日期选择器或年月日的数字滚轮	标准
datetime-local	输入日期和时间的控件，不包括时区。激活时打开日期选择器或年月日的数字滚轮	标准
email	编辑邮箱地址的区域。类似 text 输入，但在支持的浏览器和带有动态键盘的设备上会有确认参数和相应的键盘。	标准
file	让用户选择文件的控件。使用 accept 属性规定控件能选择的文件类型。	怪异
image	带图像的 submit 按钮。显示的图像由 src 属性规定。如果 src 缺失，alt 属性就会显示。	怪异
month	输入年和月的控件，没有时区。	标准
number	用于输入数字的控件。如果支持的话，会显示滚动按钮并提供缺省验证（即只能输入数字）。拥有动态键盘的设备上会显示数字键盘。	标准
password	单行的文本区域，其值会被遮盖。如果站点不安全，会警告用户。	标准
radio	单选按钮，允许在多个拥有相同 name 值的选项中选中其中一个。	标准
range	此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用 min 和 max 来规定值的范围。	怪异
reset	此按钮将表单的所有内容重置为默认值。不推荐。	怪异
search	用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。	标准
tel	用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。	标准
time	用于输入时间的控件，不包括时区。	标准
url	用于输入 URL 的控件。类似 text 输入，但有验证参数，在支持动态键盘的设备上有相应的键盘。	标准
week	用于输入以年和周数组成的日期，不带时区。	标准

总结

标准: 「 content 」+ padding + border + margin 怪异：「 content + padding + border 」 + margin

盒模型有两种,一个是标准，一个是怪异; 标准设置的width|height只作用于content, 而怪异设置的作用于border及其内区域。

标准 -> 怪异: box-sizing: border-box; 怪异 -> 标准: box-sizing: content-box;

----------------- . -----------------