今天完成的事情：

明天计划的事情：

尽量完成任务8.
遇到的问题和收获：

使用调试模式的时候右上角还有伪类选项，可以查看各项模块的详细数据。

使用弹性盒子面临一个元素不会自动换行的问题，搜索到一个新的属性：flex-warp：warp，这样弹性项目在达到最大宽度后就会自动换行。

使用margin：auto来使父级盒子内的小盒子居中。

投票页的盒子需要随视窗缩小所以使用了相对视窗的高宽度属性：vh，vw，宽和高使用这个单位之后就会达到自适应大小的效果。

写结束页的透明框使用的是opacity属性调整透明度，由于写在父元素上，子元素继承该属性，而子元素再次设定opacity的话他的透明度将会是两者的乘积。比如父元素的opacity:0.5，子元素opacity:0.2，那么子元素实际的opacity=0.5x0.2=0.1，根据网上的说法，设定position：absolute脱离文档流，但因为还是子元素属性继承opacity所以这个方法无效了。只能转换思路，把两个按钮提取出来，不把他设定为子元素，使用position：fixed固定在视窗上。

遇到一个小问题就是雪碧图的大小问题，在切那四个小图标的时候，切下来有大有小，设定雪碧图的话就会导致大小不可控，可能要切下来统一大小先，但是没去尝试，单独使用img属性调控了，宽高也是用的VW单位，达到自适应效果。

在写标签跳转的时候，使用的span作为雪碧图的原地址，应用CSS样式进行选择图片，父元素为弹性盒子所以可以设置宽高，我忽略了span原本是一个行内元素的属性，在套用了A标签包裹图标的时候，使span失去了弹性盒子项目的属性，无法设置宽高，图片消失，后给span添加了一个display：block就解决了。

看了部分关于CSS  BEM的命名方法，虽然有些部分看不太懂：

理想的状态下，我们开发一套组件的过程中，我们应该可以随意的为其中元素进行命名，而不必担心它是否与组件以外的样式发生冲突。

BEM解决这一问题的思路在于，由于项目开发中，每个组件都是唯一无二的，其名字也是独一无二的，组件内部元素的名字都加上组件名，并用元素的名字作为选择器，自然组件内的样式就不会与组件外的样式冲突了。

这是通过组件名的唯一性来保证选择器的唯一性，从而保证样式不会污染到组件外。

这也可以看作是一种“硬性约束”，因为一般来说，我们的组件会放置在同一目录下，那么操作系统中，同一目录下文件名必须唯一，这一点也就确保了组件之间不会冲突。

BEM的命名规矩很容易记：block-name__element-name--modifier-name，也就是模块名 + 元素名 + 修饰器名。

一般来说，根据组件目录名来作为组件名字：

比如分页组件：

/app/components/page-btn/

那么该组件模块就名为page-btn

我理解为在为选择器命名的时候，根据正在布局的模块进行命名，这样每个选择器名就不会冲突了。

BEM的命名中包含了模块名，长长的命名会让HTML标签会显得臃肿。

驼峰式:

.blockName-elementName--modifierName { /* ... */ } 

还有单下划线：

.block-name_element-name--modifierName { /* ... */ } 

还有修饰器名用单横线连接：

.blockName__elementName-modifierName { /* ... */ } 

使用各种显眼的方法来进行辨认自己的选择器。