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的时候,尤其要注意。

       个人愚见,欢迎相互交流,批评指正。

 

posted @ 2016-03-07 10:37  21cn  阅读(343)  评论(0编辑  收藏  举报