标签内的复选框字段和div之间的区别？

Question

上图显示了一个标签内的复选框。在这里，当我单击复选框以外的空白区域时，该复选框被选中。但是，如果我使用div元素而不是标签并单击空白区域，则该复选框保持不变。在这种情况下，label和div有什么区别！

HTML代码：

<div class="card">
 <h1>Fancy Checkbox</h1>
  <label class="fancy-checkbox">
    <input type="checkbox">
    <i></i>
 </label>

CSS代码：

 @import url('https://fonts.googleapis.com/css?family=Work+Sans:200');
  *,*::after{
     box-sizing:border-box;
            }
   .card{
      width: 600px;
      margin: 30px auto;
      padding: 20px 15px;
      border-radius:4px;
      display:flex;
      flex-direction:column;
      align-items:center;
      font-family: Work Sans;
      box-shadow:0 4px 8px 0 rgba(0,0,0,0.3);
     }

    .fancy-checkbox{
       position:relative;
       margin:15px 0px;
       overflow:hidden;
       display:block;
    }
    input{
     position:absolute;
     visibility:hidden;
     }
  input + i{
  width:100px;
  height:40px;
  border:2px solid #ccc;
  float:left;
  padding: 2px;
  border-radius:20px;
  transition: all 0.25s;
}

input + i::after{
    content:"";
    width:50%;
    height:100%;
    background-color:#ccc;
    float:left;
    border-radius:20px;
    transition: all 0.25s;
   }

我尝试使用div代替标签，但未选中复选框。

Answer 1

<label>元素有点特殊，可以链接到<input>元素。

引自https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

  

标签文本不仅在视觉上与其对应的文本相关联   文字输入；它也以编程方式与之关联。这表示   例如屏幕阅读器将在用户   专注于表单输入，从而更轻松地处理应该输入的数据   输入。

     

由于输入具有关联的标签，因此您可以单击   标签以聚焦/激活输入以及输入本身。这个   命中面积的增加为使用鼠标   激活输入。

     

要将关联到上述样式的元素，   您需要提供一个id属性。然后需要   值与输入ID相同的属性。