css中input属性？csstransform属性
大家好，感谢邀请，今天来为大家分享一下css中input属性的问题，以及和csstransform属性的一些困惑，大家要是还不太明白的话，也没有关系，因为接下来将为大家分享，希望可以帮助到大家，解决大家的问题，下面就开始吧！
input标签写CSS时需要注意的几点
飞鱼的声纳顶部的搜索框让我头疼了很长时间，原因是总不能获得跨浏览器的统一样式。主要的问题有这么两个：一是input标签的高度不能统一，Firefox和IE中的高度始终不能一致；二是在IE浏览器中属性为text的input标签中的输入文字不像标准浏览器中的那样垂直居中显示，而是靠输入框的左上角显示。
为了彻底解决搜索框的这些问题，我以GreenGaint主题搜索框的样式为准，重写了一遍代码并且以像素为单位测量了一下在没有任何样式表的情况下＜input标签在默认浏览器中的实际差别。
结果发现：input标签在type为text时，在Firefox和Safari中的默认高度为22像素（包括上下边框）宽度为146像素（包括左右边框），而在IE中的默认高度为24像素，而宽度却和Firefox和Safari是一致的，也是146像素。当 input标签在type为submit时，在Firefox中的高度为23像素（包括阴影），宽度为75像素。在Safari中高度为21像素，宽度为73像素，在IE中高度为为25像素、宽度为73像素。
那么在样式化input标签时又该注意哪些问题呢？先来看下面经过样式化后，在不同浏览器中都有着良好表现的搜索框。
总结一下，在给input标签写CSS时需要注意的有以下几点：
一、不要给属性为text的input标签设置高度，这样无法让IE浏览器下输入框中的文字垂直居中显示。尽管你后来想要通过设置padding属性来让文字居中，你会发现根本没法让它在Firefox和IE中取得一致的效果。正确的做法是直接给input标签设置padding属性，通过内边距属性来调节input标签的高度，而且这时IE中的文字也是居中显示的。
二、input标签不会继承父元素的字体样式和大小，需要直接给input标签声明font-family和font-size属性。
三、给属性为text的input标签设置合适的width属性和padding属性，确保其中的文字在合适的范围内出现。尤其是使用了背景图片后，要让文字框的大小和背景图片的大小相当，这样看上去更加美观。
在HTML中input是什么意思
input标签用于搜集用户信息。根据不同的 type属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。
标签定义及使用说明标签规定了用户可以在其中输入数据的输入字段。
元素在元素中使用，用来声明允许用户输入数据的 input控件。
输入字段可通过多种方式改变，取决于 type属性。
提示和注释注意:元素是空的,它只包含标签属性。
提示:你可以使用元素来定义元素的标注。
HTML 4.01与 HTML5之间的差异在 HTML 4.01中,"align"数据已经不再使用。HTML5中不支持该属性。可以使用CSS来定义元素的对齐方式。
在 HTML5中,添加了几个属性，并且添加了对应的值。
HTML与 XHTML之间的差异在 HTML中，标签没有结束标签。
在 XHTML中，标签必须被正确地关闭。
详情可以查看什么是input标签_w3cschool
input元素hidden属性和text属性的取值问题,
css中display和visibility语法，他们都可以隐藏和显示html元素。看齐来他们很相似，所以很多人还是会搞错。
谈们的属性分别如下：
display:none|block;
display:none;时隐藏该html元素，确切的说，是在浏览器中消除该元素，不占屏幕的空间。若其下有其他元素，就会上移到该空间区域（好像桌子上有100块钱，现在我把它放在抽屉里藏起来，桌子上放100钱的地方可以放在其他任何东西）。
dispaly:block;显示已经隐藏的html元素，如果别的元素占有了该空间时，他将下移，空间重新别原来的元素占有。（把100块钱重新从抽屉里那出来放回桌子上）
visibility：hidden|visible;
visibility:hidden;隐藏该元素，正真的隐藏，但他还占有那块空间。这时，（桌子上有100块钱，这是我盖了桌布把他隐藏起来，钱还在那里）。
visibility:visible;让元素显示（拿掉了桌布，看到了100块钱）。
接下来用代码来举个例子，代码：
<html>
<head>
<script type="text/javascript">
function testDisplay()
{
var divD= document.getElementById("testD");
if(divD.style.display=="none")
{
divD.style.display="block";
}
else
{
divD.style.display="none";
}
}
function testVisibility()
{
var divV= document.getElementById("testV");
if(divV.style.visibility=="hidden")
{
divV.style.visibility="visible";
}
else
{
divV.style.visibility="hidden";
}
}
</script>
</head>
</body>
<div id="testD" style="border:#ddd 1px solid">
<div style="display:block;border:#ccc 2px solid">
<div style="visibility:visible;border:#aaa 2px solid">
Display
</div>
</div>
</div>
<div id="testV" style="border:#ddd 1px solid">
<div style="display:block;border:#ccc 2px solid">
<div style="visibility:visible;border:#aaa 2px solid">
Visibility
</div>
</div>
</div>
<input type="button" value="TestDisplay" onclick="testDisplay()"/>
<input type="button" value="TestVisibility" onclick="testVisibility()"/>
</body>
</html>
运行一下框中的代码就可以看到，当testD隐藏时，里面所有的框都隐藏，而且下面的divV和按钮都上移，而当divV隐藏的时候，只有他自己隐藏了，里面的其他元素都没有隐藏。（这里主要是把里面的div元素style属性设置为display和visible，如果去掉也会隐藏，但是，按钮还是不会上移，可以试一下。）
如果你还想了解更多这方面的信息，记得收藏关注本站。