input type="text"和type="submit"设置同样高度却不等高
<form action="http://www.baidu.com/baidu" target="_blank">
<input type="text" name="word" size='30'/>
<input type="submit" value="百度"/>
</form>
设置同样高度的样式
.nheader .top_search input[type="text"]{font-size:18px; width:250px;height:34px;}
.nheader .top_search input[type="submit"]{font-size:18px; width:60px;height:34px;}
显示时
<input type="text" name="word" size='30'/>高度变为38px，因为默认34px中不包含border的高度，显示时会加上border的高度上下两个2px*2=4px;
<input type="submit" value="百度"/>高度为34px，因为默认34px中包含border的高度。
不同的type属性会有不同的默认样式。
这个时候需要加入box-sizing样式进行约束是否包含border的高度：
.nheader .top_search input[type="text"]{font-size:18px; width:250px;height:34px; box-sizing:border-box;}
.nheader .top_search input[type="submit"]{font-size:18px; width:60px;height:34px;box-sizing:border-box;cursor:pointer;}
这样高度就一致了。
定义和用法
box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。
例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。
语法
box-sizing: content-box|border-box|inherit;
| 值 | 描述 |
|---|---|
| content-box |
这是由 CSS2.1 规定的宽度高度行为。 宽度和高度分别应用到元素的内容框。 在宽度和高度之外绘制元素的内边距和边框。 |
| border-box |
为元素设定的宽度和高度决定了元素的边框盒。 就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。 通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 |
| inherit | 规定应从父元素继承 box-sizing 属性的值。 |
<input>和<button>设置同样高度却不能等高
搜索框，就以简单的为例：
<style>
*{margin: 0;padding: 0;}
div{background-color: #ccc;padding: 50px;}
form{width: 200px;position: relative;margin: 0 auto;}
input{width: 100px;height: 40px;background-color: orange;}
button{width: 40px;height: 40px; vertical-align:middle;}
</style>
</head>
<body>
<div>
<form action="">
<input type="text"> <button type="submit"></button>
</form>
</div>
</body>明明和设置同样高度，都为40px就不能显示同样高度，请看下图，明显的看出input要高出一点
可是我就单纯的设置了高度呀，border，padding，margin都没有设置，为什么会出现这样情况？没办法只好各种尝试，结果发现给input和button设置border：0px;这种情况就改变了，浏览器会默认给input加上边框，其实button也有默认的边框，只是他们的默认边框宽度不一样，之后会发现这种情况得到解决；
浙公网安备 33010602011771号