前端基础知识

一、学习过程

元素水平垂直居中方式总结

一、利用绝对定位垂直居中

1.盒子大小确定的水平垂直居中

注意：父元素为position：relative；

**二、用transform：translate（-50%，-50%）居中 + 绝对定位（**这种居中方式还可以用与不确定盒子大小而被内容所撑开的居中）

注意：父元素为position：relative；

三、利用flex实现元素水平垂直居中

①方案一

②方案二

四、利用设置line-height：垂直居中（适用于文字单行文本）

将父元素的行高设置为盒子高的大小

五、设置相等的上下padding值（适用于文字）

六、父元素添加伪元素：：before或者：：after（待确定）

七、设置vertical-align属性

vertical-align属性

二、学习心得

这周详细学习了css3与和html5的相关标签，弹性盒子，2d3d转换，动画，过渡，媒体查询以及新增的属性等，非常多的小细节，总的来说不难，但需要记。但这些东西还都是离散的，需要我们通过案例来实现，以及记住。当然敲案例才是学习的最好方式，在案例中有许多新知识，可以充分的让我们学习新东西。不断完善自己的知识体系。所以接下来再练练布局以及细节的知识，多总结具有相同特性的知识。已经学习java2个月，希望可以一直坚持下去，成为优秀的前端开发工程师。送自己一句话“路漫漫其修远兮，吾将上下而求索”。

三、学习计划

用一，两天时间结尾css与html，再多做动画，看看考核代码，明白一步步代码的作用。以及进入js学习。