表单效果

单选框或复选框垂直对齐

浏览器默认都是不对齐的，大部分主流字体是12px 或 14px

（1）当文字大小为12px时，我们给单选框或复选框定义vertical-align:-3px即可解决对齐问题。

（2）当文字大小为14px时，我们给单选框或复选框定义vertical-align:-2px即可解决对齐问题。

其中，vertical-align:-3px表示元素相对于基线向下偏移3px。

/*文字大小为12px*/
#p1{font-size:12px;}
#p1 input{vertical-align:-3px;}

<p id="p1">
    <input id="rdo1" type="radio" /><label for="rdo1">单选框</label>
    <input id="cbk1" type="checkbox" /><label for="cbk1">复选框</label>
</p>

textarea

常用的两个用法：

1. 设置max-width 和 max-height 防止用户随意拖动textarea,破坏布局
2. 设置resize:none; 可以禁止拖动
3. 设置width 和 height 、overflow:auto 使用在各个浏览器的样式相同

表单对齐

大公司的做法

（1）每一行表单分为左栏加若干右栏。所有行的左栏长度相等，所有行的右栏所有盒子长度之和相等。左栏一般是一个label，右栏是若干个文本框。

（2）所有左栏盒子和右栏盒子都设置为左浮动。

（3）左栏text-align属性定义为right，使得文字右对齐。

（4）最重要一点，每一行中左栏长度和右栏所有盒子的总长度之和等于行宽。这里的盒子是包括width、padding、border和margin的。