CSS3

CSS3 Days_1 (0107)

浏览器私有前缀

	-webkit-  	现行版本chrome opera safari;
	-moz-    	firefox;
	-ms-		IE;
	-o-			早期版本opera;

	tips:对于CSS3的支持,移动端要优于PC端;
		www.caniuse.com

属性选择器

TagName[href="value"];
TagName[href^="value"];		属性值首位为value;
TagName[href$="value"];		属性值末尾为value;
TagName[href*="m"];			所有属性值中包含了m的都被选中;
TagName[href];

伪类选择器

li:first-child();
li:last-child();
li:nth-child(n);			第n个子元素;
li:nth-child(-n+5);			前五个;
li:nth-child(3n);
li:nth-last-child(-n+5);	后五个;
li:nth-child(even);			偶数;
li:nth-child(odd);			奇数;

tips:n为正整数,元素的选取第一个的索引为1,和数组不同;

li:empty;			当li标签内部为空时;
li:not(.special)	选择到没有该内容的元素;

h2:target{}			当点击了对应的a标签时,对应的h2将会变为其他样式;
	
	

伪元素选择器

e::before
e::after

伪元素特点:	1、依附于真实的元素;
			2、必须加入content:"";
			3、伪元素默认是行内元素;
			4、一个真实元素只能有两个伪元素;

常用样式

border:1px solid transparent;	完全透明;

超出隐藏:

white-space:nowwrap;
overflow:hidden;
text-overflow:ellipsis;

	tips:必须是块级及行内块级元素,有具体的宽度,即可使用该样式;
	仅支持单行,不支持多行;

一些其他:

opacity:具备继承属性,符合的值会影响到子盒子;

hsl:一种新的颜色表示方式;

	h:色调,0-360;
	s:饱和度,0%-100%;
	l:亮度,0%-100%;
	a:alpha,透明度;

		eg:hsl(300,50%,50%);

颜色表示方式汇总

英文单词:	red		green	hotpink etc...;
十六进制:	#000000;
rgb:		rgb(255,0,255);
rsl:		hsl(300,50%,50%);

阴影(shadow)

1、

box-shadow:10px 10px 20px 5px	#fff000	inset;

五个参数:	x轴,y轴,模糊,扩展半径,颜色,是否内嵌;

	tips:inset表示内嵌,加入了该属性,阴影将以内阴影的形式表现;

2、

text-shadow:10px 10px 15px green;
			x轴,y轴,模糊,颜色;

	tips:和box-shadow相比,text没有了扩展半径和inset属性;

3、多层阴影

text-shadow:10px 10px 10px rgb(255,255,255),
			20px 20px 20px rgb(126,126,126);

PullAhead_Knowledge:transition:all 0.2s;
			表示过渡,在0.2s内执行变化;

新的盒子模型(box-sizing)

box-sizing:content-box;		经典盒子模型;
			border-box;		新的盒子模型;

width:calc(100% - 80%);
	tips:calc的计算公式里的计算符号左右必须有空格;

CSS3 Days_2(0108)

border-radius,边框半径

border-radius:20px 20px;
		左上角右下角,右上角左下角;
border-radius:10px 20px 30px;
		左上角,右上角左下角,右下角;

border-radius:10px 20px 30px 40px;	上右下左;

border-bottom-right-radius:10px;
border-bottom-right-radius:10px 20px;
				当设定了两个值的时候,边框表现为椭圆;

border-radius:30px 30px 30px 30px/40px 40px 40px 40px;
				分别代表了x轴和y轴,一般很少用这种方式;

border-image,边框背景

border-image-source:url("border.png");

border-image-slice:27 27 27 27;(其值不带单位)

border-image-repeat:stretch;	拉伸;
					repeat;		直接平铺;
					round;		缩放平铺;(推荐使用)
		
	tips:source表示边框背景的路径;
		slice表示边框背景如何切,27代表了位置;
		repeat表示背景的平铺方式;

优点:可以代替以前只能给边框设置颜色、大小、点画线的局限性;
缺点:切割图片需要一定的调试,且依赖于所使用图片;

background,背景

背景尺寸

background-size:500px 500px;
				500px auto;
				100%  auto;
				cover;		(铺满,自动调整)
				contain;	(完全显示图片,自动调整)

	tips:当html,body内有一元素宽高都为100%的盒子,为了撑开盒子的宽高,html,body都应该设置一个宽高100%;

线性渐变

background-image:linear-gradient(to right,#000 25%,#fff 50%);

	tips:25%和50%都分别指渐变的起点,可以写px值;
	在实际中,渐变一般会用图片直接做,用一个宽度为2px的长条,进行repeat平铺;

圆形渐变

background-image:radial-gradient(20px at center,red,yellow);
background-image:radial-gradient(40px 20px at center,red,yellow);

tips:有两个px参数时,该渐变是一个椭圆;

背景的定位原点、裁切原点

background-origin:padding-box;
				border-box;
				content-box;

background-clip:padding-box;	(很少用)
				border-box;
				content-box;

背景定位

background-postion:left top;

多重背景

background-position:left bottom,
					right top,
					right bottom;
background-image:url("images1.jpg"),
				url("images2.jpg"),
				url("images3.jpg");

二者还可以连写:
background:url("images/bg1.png") top left no-repeat,
           url("images/bg2.png") top right no-repeat,
           url("images/bg3.png") bottom right no-repeat;

transition,过渡

常用

transiton:all 0.5s;		所有变化在0.5s中进行;

四个属性

transition-property:width;		代表了需要改变的属性;
transition-duration:0.3s;		改变所需要的时间;
transition-delay:2s;			延时;

transition-timing-function:ease;	改变的轨迹函数;
						linear;
						ease-in;
						ease-in-out;

	tips:过渡最好加在原始状态;
在调试器的elements中,右键可以查看在:hover等事件下的属性;
在open-cubic-bezier-editor中,可以查看其轨迹统计(transition样式的紫色图标);

连写形式

transition:height 0.3s 1s ease-in;
		改变的属性,变化时间,延时,轨迹函数;

CSS3 Days_3 (0110)

2D变换

平移

transform:translateX(600px);
transform:translateY(600px);

transform:translate(600px,200px);
transform:translate(50%,50%);

旋转

transform:rotateX(45deg);
transform:rotateY(45deg);

	tips:旋转方式判定,左手定则,大拇指指向X或Y方向,
如果角度从小到大,大拇指指向X或Y的正方向,从大到小为反方向。
其他手指指向的方向即为旋转的方向。

缩放

transform:scale(2);			边长变为2倍;
transform:scale(0.5);		边长变为0.5倍;

transform:scale(-1);		为负数将会镜像翻转,上→下,左→右;

倾斜

transform:skewX(45deg);
transform:skewY(45deg);
transform:skew(45deg,45deg);

transform-origin:left bottom;		旋转原点。
					right top;
					0 	0;
					10% 10%;

3D转换

旋转

transform:rotateX(45deg);	
		rotateY(45deg);
		rotateZ(45deg);

	tips:与2D转换类似,用左手定方向;

视角

perspective:规定了视角和元素在translateZ(0)方向的距离;

CSS3_第1张图片

eg:transform:perspective(100px) translateZ(76px);

tips:perspective中的距离应该大于translateZ的值,即100px>76px,
否则该元素将会在视线的后面,无法看到。
perspective应该放在子元素中,父元素会出问题。

3D呈现

transform-style:preserve-3d;
	tips:指定了该值将会给元素和该元素旗下的子元素开辟一个3D空间。

transform-style:flat;		(很少用到)
	tips:当需要两个元素进行空间上的交叉的时候,可以使用该样式。

动画

连写

animation: move 4s linear  2;
		动画名称,动画总时间,动画轨迹函数,动画次数;

分开写

animation-name:	move;		动画名;

animation-duration:	4s;		动画进行时间;

animation-timing-function: ease;		缓动
						ease-in;		开始慢,渐渐变快;
						linear;			线性;
						ease-out;		开始快,渐渐变慢;
						ease-in-out;	开始和结束都慢,中间快;

animation-delay: 5s;					动画延时;
animation-iteration-count: infinite;
							2;			(数字,表示动画次数)

animation-fill-mode: backwards;			指定动画完成之后,停下来的位置;
					forwards;
	tips:forwards为停在终点,backwards为停在起点;

animation-direction: reverse;			动画方向,reverse为反向;

animation-play-state:paused;			动画状态,paused为暂停;
					running;

Web字体

1、fontmin软件(压缩字体用);
2、Zcool.com.cn下载一个ttf格式的字体文件;
3、将ttf格式字体文件拉倒fontmin软件中,软件将自动生成各种格式的字体文件;

4、配置字体资源,
	@font-face {
	  font-family: 'wanlum';
	  src: url('webfont.eot');
	  src: url('webfont.eot?#iefix') format('embedded-opentype'),
		   url('webfont.woff') format('woff'),
		   url('webfont.ttf') format('truetype'),
		   url('webfont.svg#FontName') format('svg');
	  font-style: normal;
	  font-weight: normal;
  }
	配置好后,在后面的元素中指定该字体名即可调用该字体;
  p{
	  font-family: 'wanlum';
  }
快捷键:@f+tab;

icomoon.io

伸缩布局


概念

1、横向为主轴,竖向为侧轴;
2、侧轴必定垂直于主轴;
3、主轴可以调整方向;
4、主轴是伸缩容器的方向;
5、伸缩项目:存在于伸缩容器中的直接子元素;
6、主轴起始点;
7、侧轴起始点;

伸缩布局思路

1、考虑布局方式,传统布局or伸缩布局方式;	
2、将元素变为伸缩容器;						display: flex;
3、规定伸缩容器的方向;						flex-direction: row;
4、规定伸缩容器中伸缩项目在主轴方向的对齐方式;	flex-wrap: wrap;
5、控制是否换行;								
	若换行,规定换行后的布局方式;		align-content:flex-start;
	若不换行,规定不换行的布局方式;	align-items:flex-start;

其他
	6、可以指定伸缩项目所占空间;		flex:1;
	7、可以指定伸缩项目的顺序;		order:5;
	8、规定某个特殊伸缩项目的对齐方式;	align-self:flex-start;

display: flex;						规定该元素为伸缩布局;

flex-direction: row;				方向,主轴为行;
flex-direction: row-reverse;		行翻转;
flex-direction: column;				主轴为列;
flex-direction: column-reverse;		列翻转;

justify-content: flex-start;		主轴对齐方式,起始点;
justify-content: flex-end;			终止点;
justify-content: center;			
justify-content: space-between;		元素两端marin相等;
justify-content: space-around;		空间环绕;

CSS3_第2张图片


flex-wrap: nowrap;		不换行;
flex-wrap: wrap;		换行;

换行的布局方式:
		align-content: flex-start;
        align-content: flex-end;
        align-content: center;
        align-content: space-between;
        align-content: space-around;

不换行的布局方式:
		align-items: flex-start;
        align-items: flex-end;
        align-items: center;

tips:不换行只有三种;

1、伸缩项目所占空间:
	flex:1;		表示该元素占1份空间;

2、次序:
	order:5;	次序,为正整数,越小表明越靠前;

3、某个特殊伸缩项目的对齐方式:
	align-self:flex-start;	违反align-items或align-content,单独设值;

水平居中方式总结

1、	margin:0 auto;

2、	position:absolute;
	left:50%;
	top:0;
	margin-left:calc(width / 2);

3、伸缩布局		display:flex;
				justify-content:center;

4、对于行内元素	text-align:center;

aLi.style.webkitTransform,指的就是transform属性;

视角原点
	perspective-origin:top left;

转载于:https://my.oschina.net/zhongjunhui/blog/857919

你可能感兴趣的:(CSS3)