关于在审查元素中看到的::before与::after

审查元素中看到的这两个标签，表示内容并不在元素中，而是在css中，可以查看style看到具体内容。

一般来说这样做是为了清除浮动（clearfix）的代码，防止后边的容器因为浮动出现布局的混乱。

添加在选择到的元素内部之前和之后。

如下写法：

div:before {
  content: "020";
  display: block;
  height: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  visibility: hidden;
}

div:after {
  clear: both;
}

display有table属性。box-sizing:border-box属性

另：input type=checkbox的元素，checked="checked"这个属性只有在页面载入时才会添加上，动态勾选并不会令此属性添加上，不要用属性选择器去判断是否勾选，用伪类选择器可以很好的判断到:checked。

checked 属性规定在页面加载时应该被预先选定的 input 元素。

checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。

checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。

且此checked只要有值即为勾选，所以如果使用属性选择器的话，尽量避免[checked="checked"]这种，要使用的话可以用[checked]判断该属性存在

设置checked属性可以改变勾选状态