今天完成的事件

昨天的问题：

为什么这按钮不在父类给了flex布局下不能移动在右边去 而且还是在flex代码可以运用情况下对按钮没有作用，通过和师兄的讨论了解到，因为我HOVER：ul下拉宽给了100% 而导致父类是宽被占满了 如图：

我们看到在没有给margin情况下  按钮被占满了 所以父类的flex是不起作用的，如果子类的宽满了  那么父类的flex布局是对子类元素起不了作用，

最后应用浮动float: right;解决了。

问题：下拉宽的在出现的时候不能把下面元素挤下去，

如图

这个是改完的：

原因在于 我把父类限制了高度，所以不能把它挤下 如果要达到这个效果父类是不能限制高度。

今天学习到scss:是CSS扩展语言，占时还不知道如果运用 通过师兄的了解 是可以帮助加快css写发 如重复的代码可以用scss的话就不用在重新写个类在写一遍。明天继续研究怎么写scss.

代码规范：

这个很重要，在我改任务10的时候由于代码不规范发现我写的媒体查询在修改的时候出现大量重复类的代码导致每次分辨率不一样的时候出现不同情况，而且在我要修改代码的时候需要看HTML代码 在去找CSS代码看是啥意思。

代码规范主要我看到命名规范和属性规范这2点：我就写下主要的

命名规则

1所有命名最好小写

2图片要加ALT标签

3尽量用英文命名

4给每个表单和表格位移标记

网页命名：

属性命名：

同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。

解释：

• Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
• Box Model 相关属性包括：border / margin / padding / width / height 等
• Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
• Visual 相关属性包括：background / color / transition / list-style 等

另外，如果包含 content 属性，应放在最前面。

这里很重要  属性命名要按照定位最前面也就是，绝对定位，相对定位 flex布局这些给盒子定位写在最前面其次就是移动给盒子移动比如 flex的相关居中靠左或者靠右等，然后在是里面的高宽 ，外边框或者内边框等距离呀，再次就是文本的属性比如文字大小，文字的居中等等然后在是其他如背景颜色文字颜色等。

类的命名：

这个很重要类的名字最主要遵守的规则，就是一眼能知道这个单词的属性是用来做什么的 比如我想改文字大小可以这样命名 font-size15px或者font15px那么就知道这个属性是用来改名字大小的，每个类命名最好能让人一眼看到这个单词就知道里面的属性是用来干嘛的，如果单词太长可以用——来链接不要连着写。

明天计划：用scss重构任务4并且规范自己的代码。