0%

CSS常用元素和常见错误

发表于 更新于 分类于 阅读次数：
本文字数： 3.4k 阅读时长 ≈ 3 分钟

2017年8月18日 下午3:07

Div + CSS：

  1. DIV 内容
  2. CSS样式

使用css的方式

  1. 内嵌式
  2. 内联式
  3. 外联式

CSS常用操作

  1. 位置三种：float position padding和margin
  2. 大小：width height
  3. Css常用操作对象
    1. text
    2. line
    3. font
    4. list
    5. border
    6. background

设置了，但是在页面中找不到

  1. 考虑设置float，position的那些块的上下层关系，是否挡住了
  2. 空间是可以延伸要浏览器面积之外的

转换/过渡/动画/hover类：

  1. 关于文本效果：css3中有，但是把部分新增属性所有浏览器都不支持

  2. 关于转换_过渡_动画：我感觉就一种代替js的一种简单方式，需要的话去看手册就行了，以前做过，现在都忘干了！

    1. 转换：transform：在style中设置终点，直接显示出终点的效果

    2. 过渡：transition：可以在上面转换（只显示最终效果）基础上，显示出从起点—>终点的过程

      1. 可以看成转换是过渡的特例
      2. 一个标签 两个style来控制（就像c中的函数一样）
        1. 一个用来声明
        2. 一个用来定义过程

    3. 动画：

      1. 同样需要两个style来控制（就像c中的函数一样）
      2. 过渡是动画的特例，因为中间有很多的点，而过渡只有起点和中点

    4. 总结：

      1. 过渡和动画都是通过转换来设置每个点的形状的
      2. 过渡和动画只不过是将他们连接起来

  3. CSS :hover 选择器

    1. 这几个选择器的作用可以理解成位于转换和过渡之间
    2. 转换只有一个最终结果，过渡中间有动画
    3. 而这几个选择器通过给一个标签设置两个style，实现两个style之间的直接转换，没有中间的动画

如何分析一个动画

  1. 一个动画由几部分元素构成
  2. 再分别确定这个元素中，动画有几个过程，将过程分段研究
  3. 然后这个过程有几个因素影响
    1. 位置
    2. 长、宽
    3. 角度
    4. 透明度
    5. 等等很多属性

过渡eg：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
div
{
width:100px;
height:100px;
background:yellow;
transition-property:width 1s linear 2s;
/* Firefox 4 */
-moz-transition:width 1s linear 2s;
/* Safari and Chrome */
-webkit-transition:width 1s linear 2s;
/* Opera */
-o-transition:width 1s linear 2s;
}

div:hover
{
width:200px;
}

动画eg：CSS3 动画第一个例子，从源码中找

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
#animated_div
	{
	width:60px;
	height:40px;
	background:#92B901;
	color:#ffffff;
	position:relative;
	font-weight:bold;
	font:bold 12px '微软雅黑', Verdana, Arial, Helvetica, sans-serif;
	padding:20px 10px 0px 10px;
	animation:animated_div 5s 1;
	-moz-animation:animated_div 5s 1;
	-webkit-animation:animated_div 5s 1;
	-o-animation:animated_div 5s 1;
	border-radius:5px;
	-webkit-border-radius:5px;
	}

@keyframes animated_div
	{
	0%		{transform: rotate(0deg);left:0px;}
	25%		{transform: rotate(20deg);left:0px;}
	50%		{transform: rotate(0deg);left:500px;}
	55%		{transform: rotate(0deg);left:500px;}
	70%		{transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100%	{transform: rotate(-360deg);left:0px;}
	}

@-webkit-keyframes animated_div
	{
	0%		{-webkit-transform: rotate(0deg);left:0px;}
	25%		{-webkit-transform: rotate(20deg);left:0px;}
	50%		{-webkit-transform: rotate(0deg);left:500px;}
	55%		{-webkit-transform: rotate(0deg);left:500px;}
	70%		{-webkit-transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100%	{-webkit-transform: rotate(-360deg);left:0px;}
	}

@-moz-keyframes animated_div
	{
	0%   {-moz-transform: rotate(0deg);left:0px;}
	25%  {-moz-transform: rotate(20deg);left:0px;}
	50%  {-moz-transform: rotate(0deg);left:500px;}
	55%  {-moz-transform: rotate(0deg);left:500px;}
	70%  {-moz-transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100% {-moz-transform: rotate(-360deg);left:0px;}
	}

@-o-keyframes animated_div
	{
	0%   {transform: rotate(0deg);left:0px;}
	25%  {transform: rotate(20deg);left:0px;}
	50%  {transform: rotate(0deg);left:500px;}
	55%  {transform: rotate(0deg);left:500px;}
	70%  {transform: rotate(0deg);left:500px;background:#1ec7e6;}
	100% {transform: rotate(-360deg);left:0px;}
	}

多对多（标签和style之间）

注：这里的style1就用在了两个div的class中
第一个div用了style1，和style2两个css来设置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<style type="text/css">
		.style1{
			background-color: red;
		}
		.style2{
			background-repeat:none; 
		}
	</style>
</head>
<body>
	<div class="style1,style2">
		
	</div>
	<div class="style1">
		
	</div>
</body>
</html>