css中input与button在一行高度不一致的解决方法

时间: 2018-04-02阅读: 1812标签: 宽高

在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,先看代码

<style>
input,button{
	width:100px;
        height: 60px;
}
</style>
<input type="text" value="测试"/>
<input type="button" value="按钮"/>
<button>按钮</button>

在谷歌浏览器中显示如下:



很明显的看出高度不一样。这是由于button在高度计算上始终使用了Quirks模式。在Quirks模式下,边框的计算是在元素的宽度内的,而不像标准模式一样计算在外部(button的高度包含边框的高度,而文本框text则不包含边框高度。),所以需要加2行代码-webkit-box-sizing:border-box;-moz-box-sizing:boder-box;如下:

<style>
input,button{
	-webkit-box-sizing:border-box;
        -moz-box-sizing:boder-box;
        width:100px;
        height: 60px;
}
</style>

现在高度就一致了:


box-sizing:border-box说明;

当我们设置box-sizing: border-box;时,border和padding则是被包含在宽高之内的。内容的宽和高可以通过定义的“width”和 “height”减去相应方向的“padding”和“border”的宽度得到。内容的宽和高必须保证不能为负,必要时将自动增大该元素border box的尺寸以使其内容的宽或高最小为0。  


备注:除了上面方式外,我们还可以通过设置border:0;padding:0;或者根据Quirks模式的区别,设置不同的height值,同样可以达到高度一致的效果


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/580

网页中的各种上下左右宽高值

offset只读属性。width/height——显示出来的屏幕尺寸,top/left——相对于定位父元素的绝对位置.client只读属性。width/height——不带边框的offset,也不包含滚动条宽度top/left——内边距的外边缘与边框外边缘的距离,通常是边框宽度

css中width为auto或者100%的区别

css中width为auto或者100%的区别四个理论:某div不显示设置宽度那么width为auto;某div的width在默认情况设置的是盒子模型中content的值;某div的width为100%表示的是此div盒子内容部分的宽度为其父元素的宽度

基于max-height实现不定高度元素的折叠/合并,展开/收缩的动画效果

基于实现元素的展开收缩,max-height,给定足够大的高度,就是言义上的任意高度,相对height来说比较灵活,两者的区别就是计算高度的过程,一个是由人为计算,一个由盒子内容高度去计算知识这种写法必须给定足够存放内容的高。

理解css中min-width和max-width,width与它们之间的区别联系

css中,min-width是用来限制元素的最小宽度,max-width用来限制元素的最大宽度,也就是说当元素的width大于max-width,或者小于min-width。就被它们的值所代替,尤其适用于网站的自适应。下面将具体介绍下关于min-,max-的区别和联系

JS中的offset

一、offsetWidth与offsetHeight:获取的是元素的实际宽高 = width + border + padding ,二:offsetLeft与offsetTop;offsetLeft:获取自己左外边框与父级元素的左内边框的距离 ,offsetTop:获取自己上外边框与父级元素的上内边框的距离

使用js如何设置、获取盒模型的宽和高

使用内联样式的元素的宽和高。浏览器渲染以后的元素的宽和高,无论是用何种方式引入的css样式都可以,但只有IE浏览器支持这种写法。计算一个元素的绝对位置(相对于视窗左上角)

js获取屏幕以及元素宽高的方法

网页正文部分上:window.screenTop ,网页正文部分左:window.screenLeft,屏幕分辨率的高:window.screen.height ,屏幕分辨率的宽:window.screen.width ,屏幕可用工作区高度:window.screen.availHeight

js获取元素,页面,屏幕,浏览器的宽度、高度方法总汇

js获取常用的获取网页,屏幕,滚动条等宽高,js获取元素的宽高等方法:clientHeight和clientWidth用于描述元素内尺寸, offsetHeight和offsetWidth用于描述元素外尺寸,lientTop和clientLeft返回内边距的边缘和边框的外边缘之间的水平和垂直距离...

css保持div等高宽比

那么css如何实现高度height随宽度width变化保持比例不变呢?即给定可变宽度的元素,它将确保其高度以响应的方式保持成比例(即,其宽度与高度的比率保持恒定)。下面以高宽 2:1 为例,通过2种方式来实现这种效果。

js获取浏览器/界面宽高的问题_以及兼容性实现方案

js获取浏览器/界面宽高的问题:clientHeight和clientWidth获取可视区域大小,scrollHeight和scrollWidth获取网页内容高度和宽度。offsetHeight和offsetWidth,获取网页内容高度和宽度(可视区域包括滚动条等边线,会随窗口的显示大小改变)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广