今天完成

参照《CSS编码规范》优化之前任务一、二、四的代码；

安装visual studio code及相关插件；

了解到Beautify file对代码优化符合编码规范的作用；

聊黑了BFC

明天计划

任务五；

重装visual studio code（遇到未知错误）；

遇到的问题：

1、使用visual studio code上传下载代码失败

暂未解决留待明天

2、配置crtl+~快捷键直接导出brash.git时出现错误nvalid escape sequence (valid ones are \b \t \n \f \r \" \' \\ )

这是一个正则表达式错误，字符串中的反斜线被解释为Unicode 转义或其他字符转义。因此必须在字符串字面值中使用两个反斜线。

收获：

1、修改输入框placeholder文字默认颜色-webkit-input-placeholder

html5为input添加了原生的占位符属性placeholder，高级浏览器都支持这个属性。

2、了解到代码规范（主要记录下之前没有掌握和插件可能不会优化的部分）

       （1）选择器的嵌套层级应不大于 3 级，位置靠后的限定条件应尽可能精确。

       （2）同一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 等

       （3）当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。

（4）url() 函数中的绝对路径可省去协议名。

（5）font-family 属性中的字体族名称应使用字体的英文 Family Name，其中如有空格，须放置在引号中。

示例：

body {

    background: url(//baidu.com/img/bg.png) no-repeat 0 0;

}

3、外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

假设有一个空元素，它有外边距，但是没有边框或填充，在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：如果这个外边距遇到另一个元素的外边距，它还会发生合并：

4、 vsCode快捷键

Fn+F1 --->Butiful file规范代码格式

alt+b   run by浏览器

crtl+~跳出控制台