1、固定定位：fixed 相对于浏览器进行具体数值的定位，会脱离正常的文档流
我要评论 position:fixed;
right:100px;
top:100px;
必须与left、right、top、bottom配合使用才能起到固定定位的作用，将元素定位到浏览器的具体位置上。
2、相对定位：relative 相对于自己当前的定位。不会脱离文档流，只是样子离开了，就好像灵魂出窍一样。
position:relative;
right:100px;
top:100px;
必须与left、right、top、bottom配合使用才能起到固定定位的作用，将元素定位到浏览器的具体位置上。
3、绝对定位：absolute 相当于设置了定位的父元素或者是祖先元素进行定位，会脱离文档流。
（子绝父相：子元素使用绝对定位，父元素使用相对定位）
css中：
#parent{
width: 600px;
height: 600px;
background-color: skyblue;
margin: 100px auto;
position:relative;
}
img{
width: 100px;
height:150px;
/*绝对定位*/
position: absolute;
top: 450px;
left:500px;
}
html中：
<div id="parent">
<img src="../../立方体与选项框/img/1.jpg"/>
</div>
注：当把父元素改成固定定位或者静态定位时，都不能将图片按预期精确定位到父元素的右下角。
4、静态定位：默认情况，不做定位
5、粘性定位：sticky（新出，兼容性不强）
粘性定位的效果类似于结合了固定定位和相对定位的效果，它不脱离文档流，只是样式进行了移动，在进行页面滑动时，样式不会跟随滑动，而是固定不变。
1、animation：综合性的动画设置
animation：donghua1 3s linear;
2、animation-name：设置动画名称
3、animation-duration：设置动画的时间周期
4、animation-timing-function：设置动画变化的速度（属性值和过渡transition的属性值一致）
属性：
ease：（默认值），速度为从慢到快再到慢
linear：速度为线性速度
ease-in：从慢到快的过程
ease-out：从快到慢的过程
cubic-bezier()：通过设置贝塞尔曲线数值或直接在浏览器调节获取贝塞尔曲线，自定义速度变化趋势
5、animation-delay：设置延迟时间
6、animation-iteration-count：设置动画的循环次数
属性：数值（1，2，3…）：直接设置循环次数的数值
infinite：无限循环
7、animation-direction：设置动画的运动方向
属性：normal：默认值
alternate：奇数次正常运动，偶数次反向运动
reverse：反向运动
alternate-rrverse：奇数次反方向，偶数次正方向
8、animation-fill-mode：
属性：forwards 使得动画保留最后一帧的效果。
backwards 使得动画结束后保留第一帧的效果
实例一：利用动画制作loading效果，效果图如下：
实例二：制作帧动画效果
使用图片：
缺点：占用带宽大；放大的时候有可能出现失真的效果；图片改变颜色不方便。
使用字体图标：
占用带宽小，不会失真，可以方便地改变颜色
常用的字体图标库：阿里巴巴矢量图标库。
iconfont三种编码方式的特点：
1、unicode引用：
Unicode 是字体在网页端最原始的应用方式，特点是：
兼容性最好，支持 IE6+，及所有现代浏览器。
支持按字体的方式去动态调整图标大小，颜色等等。
但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。
注意：新版 iconfont 支持多色图标，这些多色图标在 Unicode 模式下将不能使用，如果有需求建议使用symbol 的引用方式。
2、font-calss引用
font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。
与 Unicode 使用方式相比，具有如下特点：
3、symbol引用
这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：
font-size, color 来调整样式。弹性布局：为了使布局更加方便、简洁
1、弹性容器：
display：flex 设置此元素的容器即为弹性容器。
2、弹性子元素：
弹性容器中的直接子元素即为弹性子元素。直接子元素指的是第一层级的子元素。
弹性容器中的弹性子元素的排列方式只有两种：全都为一行或者全都为一列，这取决于弹性主轴方向的设置。
3、弹性主轴方向：
flex-direction：row 主轴方向是从左至右
flex-direction：column 主轴方向是从上到下
flex-direction：row-reverse 主轴方向是从右到左
flex-direction：column-reverse 主轴方向是从下到上
4、设置主轴的内容分布： justify-content
属性：
flex-start 向主轴的开始位置靠拢（默认）
center 向主轴的中心位置靠拢
flex-end 向主轴的结束位置靠拢
space-around 平均分布，特点：两边有间距且间距为中间间距的一半
space-between：平均分布，特点：两边没有边距
space-evenly：平均分布，特点：两边有边距且与中间边距一样。（新，并不是所有浏览器都支持）
5、设置侧轴的内容分布：align-items
属性：
flex-start 向侧轴的开始位置靠拢（默认）
center 向侧轴的中心位置靠拢
flex-end 向侧轴的结束位置靠拢
stretch：拉伸（默认） ，如果设置高度，则拉伸无效
6、弹性的换行：flex-wrap
属性：
nowrap：不换行。（默认值）
wrap：换行
设置侧轴的多行分布：align-content
属性：flex-start 多行内容向侧轴的开始位置靠拢（默认）
center 多行内容向侧轴的中心位置靠拢
flex-end 多行内容向侧轴的结束位置靠拢
space-around 平均分布，特点：两边有间距且间距为中间间距的一半
space-between：平均分布，特点：两边没有边距
space-evenly：平均分布，特点：两边有边距且与中间边距一样。
flex-wrap：wrap
align-content：flex-start
7、弹性元素排序：order
利用order属性可以调节弹性子元素的排序位置，设置在子元素上，最终根据order值从小到大进行排序。
8、单独设置子元素侧轴排布：align-self
属性：
center：居中
flex-start：靠近侧轴开端
flex-end：靠近侧轴结束端
stretch：拉伸
继承：默认仅继承与文字相关的属性。
本文地址：https://blog.csdn.net/qq_42760119/article/details/107291273
如对本文有疑问， 点击进行留言回复！！
清除新版Google Chrome浏览器中表单控件（input，button...）默认的黑色边框
荐 20200714——git/mac配置/项目运行步骤/一些报错
antd 菜单组件 使用时报错：Cannot read property ‘isRootMenu‘ of undefined
CSS|div的style=“background-image: url(img/a.bmp)图片显示不出来
硬件仪表盘账号建立指导（一） --WHQL认证测试结果提交账号（一）
cookie的规范Cookie的不可跨域名性或Cookie与域名的关系
网友评论