今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

开始任务10

首先学习了css模拟html checkbox的功能。

纯css实现的主要手段是利用label标签的模拟功能。

label的for属性可以关联一个具体的input元素，即使这个input本身不可被用户可见，有个与它对应的label后，用户可以直接通过和label标签交互来替代原生的input。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。

简而言之就是

隐藏原生input，通过input的id，关联对应label标签，然后对label标签进行样式定义

这里使用了相邻兄弟选择器。

通过+号可以选择紧接在另一个元素后的元素，而且二者有相同的父元素。这里的checked并不是对label元素生效，而label通过id关联到相应的input元素，通过input元素的checked显示相应的效果。

也就是input触发checked的时候。label的before伪元素改变背景颜色。

- -但是这种方式会导致

而我们需要的是一个单选框。

....搞了半天发现是因为没有对input设置name类型。。。

对所有的input设置相同的name值就可以实现单选了。

什么是伪元素？

before、after伪元素指定了一个dom元素文档树之前或者之后的内容。

content属性是用来放置我们需要输入的内容。

而且在使用伪元素的时候，必须制定伪元素的content属性，即使为空，也要写成content:"";

根据理解：

一个dom元素文档树之前或者之后的内容，指的就是这个元素是可以盛放别的元素，或者内容。

作为dom元素，伪元素的渲染都是在容器元素中进行的，像select，input，textarea，里面并不能放置其他的元素。所以它们不支持伪元素。

以下是浏览器的支持情况。

IE 不支持的元素有：img，input，select，textarea。

FireFox 不支持的元素有：input，select，textarea。

Chrome 不支持的元素有：input[type=text]，textarea。

因为浏览器的兼容问题，最好不要对表单元素使用伪元素，如果想使用伪元素的话，在表单元素外边套一个容器div。

明天计划的事情：（一定要写非常细致的内容） 

请假
遇到的问题：（遇到什么困难，怎么解决的） 

布局结构
收获：（通过今天的学习，学到了什么知识）

对布局结构的熟悉程度的加深