最近发现为不用类型的input设置相同的尺寸,却得到了不一样的尺寸结果。发现不同类型的input的height和width竟然含义不同。在此小整理一下。
(1)button类型
规律
button类型的input的高度height包含了padding和border。
在Chrome下,paddding自动为1px,border自动为2px。
举例
如果我将其height设置为30px,则得到的其内容高度实际仅为24px。
(2)text类型
规律
text类型的input的高度height仅只内容部分,其会自动补上padding和border。
在Chrome下paddding自动为1px,border自动为2px。
举例
如果我将其height设置为30ox,则input框总高度为36px。
补充:盒模型基本知识回顾
- DOM盒模型的width和height仅指元素内容宽度、高度,不包含padding和border;
- IE盒模型的width和height包含内容、padding、border;
- 由此可见,button类型的input实际上是一个IE和模型,而text类型的input是符合DOM盒模型标准。