Html 标签和div内的复选框字段之间的差异？

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

HTML代码：

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

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

元素有点特殊，可以链接到

元素

引自

标签文本不仅在视觉上与其对应的 文本输入；它也以编程方式与之关联。这意味着 例如，当用户 将重点放在表单输入上，从而更容易确定数据应该是什么 进来了

因为输入有一个与之关联的标签，所以可以单击 标签以聚焦/激活输入以及输入本身。这 增加的命中区域为任何使用鼠标移动的人提供了优势 激活输入

要将

与上述样式中的

元素关联， 您需要给

一个

id

属性。然后，

需要一个 对于值与输入id相同的属性

或者，您可以将

直接嵌套在

中，在这种情况下，不需要

的
和
id
属性，因为关联是隐式的：

你能添加你的编码吗
 @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;
   }