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 阅读(366) 评论(0) 收藏举报

刷新页面返回顶部

input怪胎--内部宽度详解

公告