css3基础总结-3

一、定位

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 使用方式相比，具有如下特点：

• 兼容性良好，支持 IE8+，及所有现代浏览器。
• 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
• 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
• 不过因为本质上还是使用的字体，所以多色图标还是不支持的。

3、symbol引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

• 支持多色图标了，不再受单色限制。
• 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
• 兼容性较差，支持 IE9+，及现代浏览器。
• 浏览器渲染 SVG 的性能一般，还不如 png。

四、弹性布局

弹性布局：为了使布局更加方便、简洁

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