转行前端自我学习记录——freecodecamp项目实践小结

这周花了大部分时间来做freecodecamp（fcc）里面的两个项目，都是比较初级的，主要是静态页面设计，做完发现一个真理：书到用时方恨少，零散的知识点想要串起来，需要大量的实践及经验，就如同武侠小说里的武林秘籍，零散的招式学会了，依然成不了天下第一，只有融汇贯通，达到无招方是境界。做完两个页面，得到几点之前没怎么掌握的知识点：

1、字体粗细的属性font-size，可以用具体数字表示属性值，700是系统默认的字体大小。

2、块元素的外边距值会溢出父元素的边框：如下在Chrome浏览器console控制台能看到段落是有下外边距的，但是段落依然是贴着父元素的底部，并没有应有的距离，此时如果把父元素加上边框border，则正常，或者父元素应有overflow：hidden属性。

图中段落紧贴着父元素底部（灰色边界），设置overflow属性之后正常显示外边距。（内边距不受影响）

3、伪元素before（相应还有after）的content属性。通过Unicode实体字符对应的css编码，实现段落前的短横线插入：

2014是短横线对应的编码，content属性值需要用到转义字符‘\’。

4、CSS3的flex弹性盒模型属性。父元素设置display：flex，子元素（侩级元素）通过flex-grow，flex-shrink、flex-basis三个属性值，可以实现在父元素的区域内按比例排列。比如设置flex：1；（flex为flex-grow，flex-shrink、flex-basis三者的合并模式），可实现元素的均分排列：下图的图片就实现了平均分布在块元素内，不需要通过其他属性值再去设置边距等等。

父元素的flex属性基本常用的有flex-direction，flex-wrap。flex-direction可取row（按行排列/横向）、column（按列排列/纵向）。flex-wrap理解为超出区域是否换行，默认是unwrap（不换行），还有wrap换行。

5、CSS3的box-shaow属性。通过合理设置四个属性值box-shadow：0 0 0 0 color（分别是阴影下 右 后偏移距离 模糊度以及阴影颜色。）可以实现立体背影效果。

6、原生JS实现删除元素类属性（class），添加都知道，通过className+=‘ string’，即可在原来的类名上添加新类名，注意字符串链接的空格。而删除类属性就没那么轻松，需要通过正则表达式，下图中我先把对象的className赋值给一个变量，然后通过replace方法，将需要删掉的类名替换为空字符串，即可删去。

7、CSS3的border-radius圆角属性，可将图片转变成圆形，而不需要通过PS。border-radius可分别设置对象的四个角的圆弧程度，通过border-radius：50%，直接将对象变成圆：