input解析

最新推荐文章于 2022-02-11 12:39:35 发布

a54654132

最新推荐文章于 2022-02-11 12:39:35 发布

阅读量493

点赞数

在学习HTML和CSS的时候，好多初学者对input标签进行设置的时候总是有个小细节处理不好。

我大概总结了一下，大家普遍的问题是无法对其，总是差一点点，好多同学呢是直接忽略，感觉差一点点也无伤大雅，

但在我看来呢，这对于一个IT行业的人来说是致命的，因为这种“无伤大雅”的思想是不严谨的，为我IT公民之大忌！

图1为大部分同学都遇到过的情况，图2为大部分想要的效果

图1：

图2：

原因在于input默认边框为2px,同时两个按钮的border算在框内，input默认padding为1px。

实例代码如下：

<!DOCTYPE html>
　　<html>
　　　　<head>
　　　　　　<meta charset="UTF-8">
　　　　　　<title></title>
　　　　　　<style type="text/css">
　　　　　　　　html,body,input{margin: 0;padding: 0;}
　　　　　　　　.box{height: 200px;width: 500px;border: 1px solid red;margin: 100px auto;}
　　　　　　　　input{height: 50px;width: 100px;vertical-align: top;float: left;}
　　　　　　　　.txt{height: 46px;}
　　　　　　</style>
　　　　</head>
<body>
　　<div class="box">

　　　　<input type="text" name="" class="txt" />
　　　　<input type="submit" name="" class="sub" />
　　　　<input type="button" name="" class="btn" value="结果"/>

　　</div>
</body>
</html>