input怪胎--内部宽度详解
前段时间在写网页页面时,在写到input标签时,给他们都定一个相同的宽高,但是发现其type类型不一样时,其表现出来的宽高完全不一样,先上测试代码:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>test</title> <style type="text/css" rel="stylesheet"> div, input { width: 300px; height: 200px; padding: 20px; margin: 60px; border: 10px red solid; text-align: center; font-size: 36px; } </style> </head> <body> <div>DIV</div> <input type="button" value="button"> <input type="submit" value="submit"> <input type="text" value="text"> <input type="password" value="password"> </body> </html>
其结果图如下:
我明明将所有的input都设置了 width: 300px; height: 200px; 但是对于设置了padding的情况,不同类型的type 处理方式不同,现总结如下(不完全包含,望补充,ps以后遇到再一一补充):
当 type="button",type="submit",时:
input 将设置的width 和 height 当做我们见到的宽高,内部的“width”与“height” =设置的“”width"与“height” 减去 padding;
当 type="text",type="passport",时:
我们所看到的 宽与高 等于 设置的“width”与“height” 加上 padding.
这对于设置 前面是一个类型为type="text",后面为一个 提交框,且设置了内边距padding的时候,尤其要注意。
个人愚见,欢迎相互交流,批评指正。