Web前端开发学习心得

最新推荐文章于 2023-12-22 22:53:36 发布

szhaoxiaoyiya

最新推荐文章于 2023-12-22 22:53:36 发布

阅读量1.3k

点赞数 2

文章标签： web

本文链接：https://blog.csdn.net/szhaoxiaoyiya/article/details/125994599

版权

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;
    }
}

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