深入 radio 和 checkbox

radio 指的是单选框，而 checkbox 指的是复选框。对于 radio 和 checkbox，我们主要学习一个方面就行了，即单选框或复选框与文字垂直居中对齐。

默认情况下，单选框或复选框与它们周围的文本是以 vertical-align:baseline 的方式对齐的，这导致两者在垂直方向上对不齐。既然是 vertical-align 属性导致的问题，那么我们就可以使用 vertical-align 属性来解决，“以其人之道还治其人之身”。 

  1. vertical-align:像素值
  2. 当文字大小为 12px 时，像素值为 -3px
  3. 当文字大小为 14px 时，像素值为 -2px
  4. -apx 表示元素相对于基线向下偏移 apx
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style type="text/css">
    #p1 {
      font-size: 12px;
    }

    #p1 input {
      vertical-align: -3px;
    }

    #p2 {
      font-size: 14px;
    }

    #p2 input {
      vertical-align: -2px;
    }
  </style>
</head>

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

</html>

textarea

固定大小，禁用拖动

固定大小

在 CSS 中，我们可以使用 min-width 和 min-height 来定义 textarea 的最小宽度和最小高度，也可以使用 max-width 和 max-height 来定义 textarea 的最大宽度和最大高度。 

textarea
{
  max-width: 100px;
  max-height: 100px;
  min-width: 50px;
  min-height: 50px;
}

禁止拖动

textarea
{
  width:100px;
  height:80px;
  resize:none;
}

表单对齐

实现方式：

▶ 每一行分为左栏和若干右栏。所有行的左栏长度相等，所有行的右栏所有盒子长度之和相等。左栏一般是一个 label，右栏是若干个文本框。
▶ 所有左栏盒子和右栏盒子都设置为左浮动。
▶ 左栏 text-align 属性定义为 right，使得文字右对齐。
▶ 每一行左栏长度和右栏所有盒子的总长度之和等于行宽，这里的盒子包括 width、padding、border、margin。

<!DOCTYPE html> 
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      form
      {
        width:320px;
        font-family:Arial;
        font-size:14px;
        font-weight:bold;
      }
      /*清除每一个p中的浮动*/
      p{overflow:hidden;}
      label
      {
        float:left;
        width:60px;
        height:40px;
        line-height:40px;
        text-align:right;
        margin-right:10px;
      }
      input:not(#submit)
      {
        float:left;
        height:16px;
        padding:10px;
        border:1px solid silver;
      }
      #tel,#pwd
      {
        width:228px;
      }
      #verifyCode
      {
        width:118px;
        margin-right:10px;
      }
      #submit
      {
        width:100px;
        height:40px;
        border:1px solid gray;
        padding:0;
        background-color:#F1F1F1;
      }
    </style>
  </head>
  <body>
    <form method="post">
      <p>
        <label for="tel">手机号</label>
        <input id="tel" type="text"/>
      </p>
      <p>
        <label for="pwd">密码</label>
        <input id="pwd" type="password"/>
      </p>
      <p>
        <label for="verifyCode">验证码</label>
        <input id="verifyCode" type="text"/>
        <input id="submit" type="submit"/>
      </p>
    </form>
  </body>
</html>

例子中，使用 overflow:hidden 清除每一个 p 元素中的浮动，

第 1 行中的长度情况如图，60px 是左盒子的长度（width+border+padding），250px 是右盒子的长度（width+border+padding）。因此，第 1 行总长度为 60px+250px+10px = 320px，刚好等于行宽 320px，其中 10px 是 margin 值。 image.png
第 3 行中的长度情况如图，60px 是左盒子的长度（width+border+padding）， 140px 是中间盒子的长度（width+border+padding），100px 是右盒子的长度（width+border+ padding）。因此，第 3 行总长度为 60px+140px+100px+10px+10px=320px，刚好等于行宽 320px， 其中 10px 是 margin 值。 image.png