css3知识总结

css3知识总结

1. css3的新特性

calc()函数：用于动态计算长度值

 - 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)；
 - calc()函数支持 "+", "-", "*", "/" 运算；
 - calc()函数使用标准的数学运算优先级规则；

div {
	background-color: blue;
	height: calc(100% - 50px);
	width: calc(100% - 100px);
}

var（）函数：用于设置自定义的属性值，当一个属性值在多处被使用，可以降低维护难度

 - var(自定义属性的名称, 值) 需要注意：属性必需以 -- 开头，写在:root括号中

:root {
	--myWith: 200px;
	--myHeight: 200px;
	--myColor: blue;
}
div {
	background-color: var(--myColor);
	width: var(--myWith);
	height: var(--myHeight);
}

attr() 函数：获取属性值

a::before {
	content: attr(name);
}
a:after {
    content: '的链接是' attr(href)  '这个地址';
}

<a name="good" href="www.baidu.com">百度</a>

filter(滤镜) 属性

• filter:blur(px) 给图像设置高斯模糊。

img {
	filter: blur(5px); 
}

• filter: grayscale(100%); 变灰

  resize 指定一个 div 元素，允许用户调整大小

div {
    resize:both;
    overflow:auto;
}

2. 变形、过渡、动画

变形 transform

• 不会改变文档流中的结构
• GPU渲染而成，体验流畅
• 不是动画属性，是静态变形
  写法transform:变形函数1 变形函数2

平移函数 translate(x,y) 基于X、Y坐标重新定位元素的位置

• x,y 取 %为单位,是以自身宽高为参照物 x 向右，y向下移动

缩放函数 scale(sx,sy) sx横向坐标（宽度）方向的缩放倍数 > 0 sy纵轴坐标（高度）方向的缩放

倾斜（斜切）函数 skew(ax, ay) ax水平方向（X轴）的倾斜角度 使用deg表示 ay垂直方向（Y轴）的倾斜角度

旋转函数 rotate(a) 参数a单位使用deg表示 参数a取正值时元素相对原来中心顺时针旋转 如果为负值，则为逆时针

			div {
				transform:  scale(.5);
				/* 缩小 */
				transform: translate(100px);
				/* 向右平移100px */
				transform: rotate(-1800deg);
				/* 逆时针旋转1800° */
				transform: skew(45deg);
				/* 向右倾斜45° */
			}

过渡 transition

过渡是两种状态之间的补间动画，优点：动画细腻，内存开销小
运用伪类触发

写法 transition: [参与的属性 完成过渡所需时间 时间函数 延迟时间 ]

• 参与的属性CSS属性

  • property：如（width、height、background-color、left、top、border-radius 所有数值类的属性，颜色，变形）
  • all：指定所有元素支持transition-property属性的样式，一般为了方便都会使用all

• 完成过渡所需要的时间

  • 单位 ‘s’或‘ms’ 秒

  • 可以通过给过渡添加一个函数来指定动画的快慢方式
    linear 规定以相同速度开始至结束的过渡效果
    ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（默认值）
    ease-in 规定以慢速开始的过渡效果
    ease-out 规定以慢速结束的过渡效果
    ease-in-out 以慢速开始和结束的过渡效果

div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	text-align: center;
	line-height: 100px;
	transition: .3s;
}
div:hover{
	transform: translate(100px);
	/* 向右平移100px */
}

动画

  动画是由关键帧组成，简称帧动画，由每一帧的画面组成

关键帧动画的创建

@keyframes animationname {
from {/CSS样式写在这里/}
to {/CSS样式写在这里/}
}

写法：
animation: 关键帧名称 动画时间 时间函数 延迟时间 重复次数（infinite无限次） 播放顺序（alternate反向） 动画开始之前和结束之后发生的操作

动画开始之前和结束之后发生的操作 可取以下的值：
normal 原始状态到原始状态
backwards 起始帧到原始状态 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值
forwards 起始状态到结束帧
both 起始帧到结束帧

.son {
	width: 50px;
	height: 50px;
	background-color: blue;
	animation: move  1s linear infinite ;
}
@keyframes move {
	0% {
		transform: translate(0,0) ;
	}
	25% {
		transform: translate(400px) ;
	}
	50% {
		transform: translate(400px,400px) ;
	}
	75% {
		transform: translate(0,400px) ;
	}
	100%{
		transform: translate(0,0);
	}
}

3. 响应式web设计

响应式web设计的使用场景

1. 微信公共号内嵌
2. 手机浏览器访问
3. 扫二维码跳转到落地页
4. 平板电脑浏览器访问

视口 Viewport

   viewport 是用户网页的可视区域。
需添加以下代码

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

• 视口宽度和设备保持一致
• 视口的默认缩放比例1.0
• 不允许用户自行缩放
• 最大允许的缩放比例1.0
• 最小允许的缩放比例1.0

min-width 大于等于该宽度应用的样式
max-width 小于等于该宽度应用的样式

移动端后响应式

• @media

• % 百分比

• vh vw 把屏幕等分成100份，1份宽就是1vw，1份高就是1vh

• rem em rem为根节点尺寸 em会根据其父属性改变而改变

• flex 弹性布局

• orientation：portrait | landscape
  可以创建适应不同设备的方向(横屏landscape、竖屏portrait等)的布局。

@media screen and (min-width:400px) {
				div {
					width: 300px;
					height: 300px;
					background-color: green;
				}
}

@media screen and (orientation:landscape) {
	div {
		width: 50%;
		height: 150px;
		background-color: blanchedalmond;
	}
}

• 媒体查询的link写法

<link rel="stylesheet" href="./w200.css" media="(max-width:200px)">
<link rel="stylesheet" href="./w400.css" media="(min-width:400px)">
<link rel="stylesheet" href="./w200w400.css" media="(min-width:200px) and (max-width:400px)">

• rem

html {
	font-size: 16px;
}
body {
	font-size: 1rem;
}
@media screen and (min-width:1024px) {
	ul {
		height: 50px;
		font-size: 1.2rem;
		/* 字体为18px  */
	}
}