当前位置: 萬仟网 > IT编程>网页制作>CSS > css3基础总结-3

css3基础总结-3

2020年07月14日  | 萬仟网IT编程  | 我要评论

一、定位

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

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
Copyright © 2017-2020  萬仟网 保留所有权利. 粤ICP备17035492号-1
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com