Web前端开发学习心得_web前端开发心得体会

1.重点

一、定位

(1).绝对定位：absolute,元素相对于其最近的开启了定位的包含块元素为基准进行定位（一般用于子元素凭借父元素定位，例如小米的轮播左菜单）

我一般用于层级混乱时，设一个绝对定位会很好用，作为覆盖元素。

(2).相对定位：relative,元素相对于自身本身的位置！最开始占据文档流的位置来进行定位（一般用途就是当作父元素给子元素定位，基本的例子就是多个菜单弹窗，这是一个基本页面都会做的一个地方。）

二、弹性盒子

(1).弹性容器：父元素开启了flex属性，也称为伸缩盒

虽然我的网页里没有用到这相关的知识，但是我觉得这个的用处还是很多的，例如：基本的排列布局，不需要自己再去抠细节的算距离，其次就是防止版块容不下产生不必要的问题，这个属性都可以很好的解决，也可以很从容的解决页面的缩放，自适应布局，不会造成页面的变形。

(2).弹性容器的css属性

这个属性还是比较多的，但是又是我们平时写能够会用到的，所以还是得下来自己多去敲一敲。

flex-direction    换轴
flex-wrap         换行
justify-content   主轴排列方式
align-items       侧轴排列方式
align-content     分配侧轴空隙
align-self        覆盖当前得align-items

       三、动画属性和过渡属性

        还是基本的网页导航栏弹窗问题，例子：小米商城

        

如果是简单的把这个弹窗做出来，就用一个简单的hover来调就行了，但是这个的效果是弹出来的窗口缓慢下来，里面的字体也是随着弹窗的变大而出现。所以大概会有两种可以做到的方法。       

(1).过渡属性：transition,去设置hover弹出来的盒子运动的时间曲线达到缓慢下刷的效果，但是这种做的话不能控制里面的文本内容，只能控制外面的盒子变化，除非里面是图片，然后把图片设为背景图。

(2).动画属性：@keyframes  xxx,元素{animation:}

@keyframes move{
0%{
    width: 250px;
    height: 0px;
    color: white;
}
50%{
    width: 250px;
    height: 50px;
    color:white;
}
90%{
    width: 250px;
    height: 90px;
    color:#FF6A00;
}
    100%{
        width: 250px;
        height:100px;
        opacity: 1;
    }
}

---

就是设置在盒子运动到一半的时候，字体的颜色由背景色变为想要的颜色，就能达到看着是盒子下刷的时候带出来的效果。

注意：只能带来视觉差不多的效果。

总的来说，通过这一阶段的学习，对于基础的html和css，我学习的更加的深层次了，了解了其中的含义和关系，能正确的设置框架和布局。

因为我做的是苹果商城的页面，运用hover属性是比较多的，确实设置之后看起来是比较高级一些，灵活一些，但是很多想完成的东西会做不到，就比如苹果商城的滑动模块，看似很简洁的功能，但是必须要js才能做到，所以还得好好学习后面的知识来完善我想做到的高级简介感的页面。