Label标签增大点击范围

Label标签增大点击范围

1.label标签—增大点击范围

• 写法一:

  • label标签只包裹内容，不包裹表单控件。

  • 设置label标签的for属性值和表单控件的id属性值相同。

    <input type="radio" id="man">
    <label for="man">男</label>
    

• 写法二:

  • 使用label标签包裹文字和表单控件，不需要属性

    <label><input type="radio">女</label>
    

  提示：支持label标签增大点击范围的控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等。

2.无意义的布局标签

• div： 独占一行

• span：不换行

3.行高的测量方式

• 从一行文字的对顶端（最底端）量到一行文字的最顶端（最底端）。

4.利用行高特性使单行文字垂直居中

• 由于行高的计算方式，可以使用特性将文字垂直居中（只限单行文字），代码如下：

  <style>
  	div {
  		heigh: 100px;
  		line-heigh: 100px;
  	}
  <sytle>