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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

/*
设置文字的大小,浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小，在页面中，每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度，并不是字体的大小.一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体的不同，显示效果也不能	
 * */
font-size: 30px;
				
/*
 * 通过font-family可以指定文字的字体
 * 当采用某种字体时，如果浏览器支持则使用该字体，
 * 如果字体不支持，则使用默认字体
 * 该样式可以同时指定多个字体，多个字体之间使用,分开
 * 当采用多个字体时，浏览器会优先使用前边的字体，
 * 如果前边没有在尝试下一个
 */
font-family: arial , 微软雅黑;
				
/*
 * 浏览器使用的字体默认就是计算机中的字体，
 * 	如果计算机中有，则使用，如果没有就不用
 * 在开发中，如果字体太奇怪，用的太少了，尽量不要使用，
 * 	有可能用户的电脑没有，就不能达到想要的效果。
 */	
font-family: "curlz mt";

/*
 * font-style可以用来设置文字的斜体
 * 	- 可选值：
 * 	normal，默认值，文字正常显示
 * 	italic 文字会以斜体显示
 * 	oblique 文字会以倾斜的效果显示
 * 	- 大部分浏览器都不会对倾斜和斜体做区分，
 * 	也就是说我们设置italic和oblique它们的效果往往是一样的
 *  - 一般我们只会使用italic
 */
font-style: italic;
				
/*
 * font-weight可以用来设置文本的加粗效果：
 * 	可选值：
 * 		normal，默认值，文字正常显示
 * 		bold，文字加粗显示
 * 	该样式也可以指定100-900之间的9个值，
 * 	但是由于用户的计算机往往没有这么多级别的字体，所以达到
 * 	也就是200有可能比100粗，300有可能比200粗
 */
font-weight: bold;
				
/*
 * font-variant可以用来设置小型大写字母
 * 	可选值：
 * 		normal，默认值，文字正常显示
 * 		small-caps 文本以小型大写字母显示
 * 小型大写字母：
 * 		将所有的字母都以大写形式显示，但是小写字母的大写，
 * 		要比大写字母的大小小一些。
 */
font-variant: small-caps ;

/*
 * 在CSS并没有为我们提供一个直接设置行间距的方式，
 * 我们只能通过设置行高来间接的设置行间距，行高越大行间距越大
 * 使用line-height来设置行高 
 * 行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，
 * 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示 
 * 行间距 = 行高 - 字体大小
 */
.p1{
	font-size: 20px;
	/*
	 * 通过设置line-height可以间接的设置行高，
	 * 	可以接收的值：
	 * 		1.直接就收一个大小
	 * 		2.可以指定一个百分数，则会相对于字体去计算行高
	 * 		3.可以直接传一个数值，则行高会设置字体大小相应的倍数
	 */
	/*line-height: 200%;*/
	line-height: 2;
}

/*
 * 对于单行文本来说，可以将行高设置为和父元素的高度一致，
 * 	这样可以是单行文本在父元素中垂直居中
 */
line-height: 200px;

/*
 * 在font中也可以指定行高
 * 	在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值
 */
font: 30px "微软雅黑";
line-height: 50px;

 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
58
59
60
61

/*
 * text-transform可以用来设置文本的大小写
 * 	可选值：
 * 		none 默认值，该怎么显示就怎么显示，不做任何处理
 * 		capitalize 单词的首字母大写，通过空格来识别单词
 * 		uppercase 所有的字母都大写
 * 		lowercase 所有的字母都小写
 */
text-transform: lowercase;

/*
 * text-decoration可以用来设置文本的修饰
 * 	可选值：
 * 		none：默认值，不添加任何修饰，正常显示
 * 		underline 为文本添加下划线
 * 		overline 为文本添加上划线
 * 		line-through 为文本添加删除线
 */
text-decoration: line-through;

a {
/*超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline如果需要去除超链接的下划线则需要将该样式设置为none* */
	text-decoration: none;
}

/**
 * letter-spacing可以指定字符间距
 */
letter-spacing: 10px;
				
/*
 * word-spacing可以设置单词之间的距离
 * 	实际上就是设置词与词之间空格的大小
 */
word-spacing: 120px;

/*
 * text-align用于设置文本的对齐方式
 * 	可选值：
 * 		left 默认值，文本靠左对齐
 * 		right 文本靠右对齐
 * 		center 文本居中对齐
 * 		justify 两端对齐
 * 	- 通过调整文本之间的空格的大小，来达到一个两端对齐的目的
 */
text-align: justify ;

/*
 * text-indent用来设置首行缩进
 * 	当给它指定一个正值时，会自动向右侧缩进指定的像素
 * 	如果为它指定一个负值，则会向左移动指定的像素,
 * 	通过这种方式可以将一些不想显示的文字隐藏起来
 *  这个值一般都会使用em作为单位
 */
text-indent: -99999px;

text-overflow : clip | ellipsis
　　参数：
　　clip : 　不显示省略标记（...），而是简单的裁切
　　（clip这个参数是不常用的！）
　　ellipsis : 　当对象内文本溢出时显示省略标记（...）

1
2
3

p{
	color: red;
}

1
2
3

#p1{
	font-size: 20px;
}

1
2
3

.classname{
    color:red;
}

1
2
3

\#p1 , .p2 , h1{
	background-color: yellow;
}

1
2
3

span .p3 {
	background-color: yellow;
}

1
2
3
4
5
6
7
8

/*
 * 为没访问过的链接设置一个颜色为绿色
 * 	:link
 * 		- 表示普通的链接（没访问过的链接）
 */
a:link{
	color: yellowgreen;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/*
 * 为访问过的链接设置一个颜色为红色
 * 	:visited
 * 		- 表示访问过的链接
 * 
 * 浏览器是通过历史记录来判断一个链接是否访问过,
 * 由于涉及到用户的隐私问题，所以使用visited伪类只能设置字体的颜色
 * 
 */
a:visited{
	color: red;
}

1
2
3
4
5
6

/*
 * :hover伪类表示鼠标移入的状态
 */
a:hover{
	color: skyblue;
}

1
2
3
4
5
6

/*
 * :active表示的是超链接被点击的状态
 */
a:active{
	color: black;
}

1
2
3
4
5
6

/*
 * 文本框获取焦点以后，修改背景颜色为黄色
 */
input:focus{
	background-color: yellow;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

/**
 * 为p标签中选中的内容使用样式
 * 	可以使用::selection为类
 * 	注意：这个伪类在火狐中需要采用另一种方式编写::-moz-select
 */
			
/**
 * 兼容火狐的
 */
p::-moz-selection{
	background-color: orange;
}
			
/**
 * 兼容大部分浏览器的
 */
p::selection{
	background-color: orange;
}
			

1
2
3
4
5
6
7

/*
 * 为p中第一个字符来设置一个特殊的样式
 */		
p:first-letter {
	color: red;
	font-size: 20px;
}

1
2
3
4
5
6

/*
 * 为p中的第一行设置一个背景颜色为黄色
 */		
p:first-line {
	background-color: yellow;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

/*
 * :before表示元素最前边的部分
 * 	一般before都需要结合content这个样式一起使用，
 * 	通过content可以向before或after的位置添加一些内容
 * 
 * :after表示元素的最后边的部分
 */
p:before{
	content: "我会出现在整个段落的最前边";
	color: red;
}			
p:after{
	content: "我会出现在整个段落的最后边";
	color: orange;
}

1
2
3
4
5
6

/*
 * 为title属性值以ab开头的元素设置一个背景颜色为黄色
 */
p[title^="ab"]{
	background-color: yellow;
}	

 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

/*
 * 为第一个p标签设置一个背景颜色为黄色
 * 	:first-child 可以选中第一个子元素
 *  :last-child 可以选中最后一个子元素
 */
body > p:first-child{
	background-color: yellow;
}
p:last-child{
	background-color: yellow;
}
			
/*
 * :nth-child 可以选中任意位置的子元素
 * 		该选择器后边可以指定一个参数，指定要选中
 * 		even 表示偶数位置的子元素
 * 		odd 表示奇数位置的子元素
 * 		
 */
p:nth-child(odd){
	background-color: yellow;
}
			
/*
 * :first-of-type
 * :last-of-type
 * :nth-of-type
 * 	和:first-child这些非常的类似，
 * 	只不过child，是在所有的子元素中排列
 * 	而type，是在当前类型的子元素中排列
 */
p:first-of-type{
	background-color: yellow;
}
p:last-of-type{
	background-color: yellow;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

/*
 * 为span后的一个p元素设置一个背景颜色为黄色
 * 后一个兄弟元素选择器
 * 	作用：可以选中一个元素后紧挨着的指定的兄弟元素
 * 	语法：前一个 + 后一个
 * 
 */
span + p{
	background-color: yellow;
}
			
/*
 * 选中后边的所有兄弟元素
 * 	语法：前一个 ~ 后边所有	
 */
span ~ p{
	background-color: yellow;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/*
 * 为所有的p元素设置一个背景颜色为黄色，除了class值为hello的
 * 
 * 否定伪类：
 * 	作用：可以从已选中的元素中剔除出某些元素
 * 	语法：
 * 		:not(选择器)
 */
p:not(.hello){
	background-color: yellow;
}
			

1
2
3
4
5
6
7
8
9

/*
 * 使用width来设置盒子内容区的宽度
 * 使用height来设置盒子内容区的高度
 * 
 * width和height只是设置的盒子内容区的大小，而不是盒子的整个大小，
 * 	!!!盒子可见框的大小由内容区，内边距和边框共同决定
 */
width: 300px;
height: 300px;

 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

/*
 * 为元素设置边框
 * 	要为一个元素设置边框必须指定三个样式
 * 		border-width:边框的宽度
 * 		border-color:边框颜色
 * 		border-style:边框的样式
 */			
/*
 * 设置边框的宽度
 */
border-width:10px ;			
/*
使用border-width可以分别指定四个边框的宽度
如果在border-width指定了四个值，
则四个值会分别设置给 上 右 下 左，按照顺时针的方向设置的
如果指定三个值，
 	则三个值会分别设置给	上  左右 下
如果指定两个值，
 	则两个值会分别设置给 上下 左右	
如果指定一个值，则四边全都是该值	
除了border-width，CSS中还提供了四个border-xxx-width
xxx的值可能是top right bottom left专门用来设置指定边的宽度	
 * */
border-width:10px 20px 30px 40px ;
border-width:10px 20px 30px ;
border-width: 10px 20px ;
border-width: 10px;
				
border-left-width:100px ;			
/*
 * 设置边框的颜色
 * 和宽度一样，color也提供四个方向的样式，可以分别指定颜色
 * border-xxx-color
 */
border-color: red;
border-color: red yellow orange blue;
border-color: red yellow orange;
border-color: red yellow;
				
/*
 * 设置边框的样式
 * 可选值：
 * 		none，默认值，没有边框
 * 		solid 实线
 * 		dotted 点状边框
 * 		dashed 虚线
 * 		double 双线
 * 
 * style也可以分别指定四个边的边框样式，规则和width一致，
 * 	同时它也提供border-xxx-style四个样式，来分别设置四个边
 */
border-style: double;
border-style: solid dotted dashed double; 

/*设置边框
大部分的浏览器中，边框的宽度和颜色都是有默认值，而边框的样式默认值都是none
 * */
border-width:10px ;
border-color: red;
border-style: solid;
				
/*
 * border
 * 边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
 * 而且没有任何的顺序要求
 * border一指定就是同时指定四个边不能分别指定
 * border-top border-right border-bottom border-left
 * 可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
border : border-width || border-style || border-color 
 */
border: red solid 10px   ;
border-left: red solid 10px   ;			
border-top: red solid 10px;
border-bottom: red solid 10px;
border-left: red solid 10px;			
border: red solid 10px;
border-right: none;

/*border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法：border-collapse:collapse; 
collapse 单词是合并的意思
border-collapse: collapse; 表示相邻边框合并在一起

边框会额外增加盒子的实际大小。因此我们有两种方案解决:
1. 测量盒子大小的时候,不量边框.
2. 如果测量的时候包含了边框,则需要 width/height 减去边框宽度*/

 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

/*
 * 内边距（padding），指的是盒子的内容区与盒子边框之间的距离
 * 	一共有四个方向的内边距，可以通过：
 * 		padding-top
 * 		padding-right
 * 		padding-bottom
 * 		padding-left
 * 			来设置四个方向的内边距
 * 
 * 内边距会影响盒子的可见框的大小，元素的背景会延伸到内边距,
 * 	盒子的大小由内容区、内边距和边框共同决定
 * 	盒子可见框的宽度 = border-left-width + padding-left + width + padding-right + border-
 *  可见宽的高度 = border-top-width + padding-top + height + padding-bottom + border-bott

当我们给盒子指定 padding 值之后，发生了 2 件事情：
1. 内容和边框有了距离，添加了内边距。
2. padding影响了盒子实际大小。
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
解决方案：
如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小即可。
 */				
/*设置上内边距*/
padding-top: 100px;
/*设置右内边距*/
padding-right: 100px;
padding-bottom: 100px;
padding-left: 100px;
				
/*
 * 使用padding可以同时设置四个边框的样式，规则和border-width一致
 */
padding: 100px;			
padding: 100px 200px;				
padding: 100px 200px 300px;		
padding: 100px 200px 300px 400px;

 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

/*
 * 外边距指的是当前盒子与其他盒子之间的距离，
 * 	他不会影响可见框的大小，而是会影响到盒子的位置。
 * 盒子有四个方向的外边距：
 * 	margin-top
 * 	margin-right
 * 	margin-bottom
 * 	margin-left
 * 由于页面中的元素都是靠左靠上摆放的，
 * 所以注意当我们设置上和左外边距时，会导致盒子自身的位置发生改变，而如果是设置右和下外边距会改变其他盒子的位置
 */
/*
 * 设置box1的上外边距，盒子上边框和其他的盒子的距离
 */
margin-top: 100px;
				
/*
 * 左外边距
 */
margin-left: 100px;
				
/*设置右和下外边距*/
margin-right: 100px;
margin-bottom: 100px;
				
/*
 * 外边距也可以指定为一个负值，
 * 	如果外边距设置的是负值，则元素会向反方向移动
 */
margin-left: -150px;
margin-top: -100px;
margin-bottom: -100px;
margin-bottom: -100px;
				
/*
 * margin还可以设置为auto，auto一般只设置给水平方向的margin
 * 	如果只指定，左外边距或右外边距的margin为auto则会将外边距设置为最大值
 * 	垂直方向外边距如果设置为auto，则外边距默认就是0
 * 如果将left和right同时设置为auto，则会将两侧的外边距设置为相同的值，
 * 	就可以使元素自动在父元素中居中，所以我们经常将左右外边距设置为auto
 * 	以使子元素在父元素中水平居中
 */
margin-left: auto;
margin-right: auto;
				
/*
 * 外边距同样可以使用简写属性 margin，可以同时设置四个方向的外边距,
 * 	规则和padding一样
 */
margin: 0 auto;

 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

/*
 	内容区、内边距 、边框 、外边距
 * */			
/*
 * 内联元素不能设置width和height
 */
width: 200px;
height: 200px;			
/*
 * 设置水平内边距,内联元素可以设置水平方向的内边距
 */
padding-left: 100px ;
padding-right: 100px ;				
/*
 * 垂直方向内边距，内联元素可以设置垂直方向内边距，但是不会影响页面的布局
 */
padding-top: 50px;
padding-bottom: 50px;
				
/*
 * 为元素设置边框,
 * 	内联元素可以设置边框，但是垂直的边框不会影响到页面的布局
 */
border: 1px blue solid;
				
/*
 * 水平外边距
 * 	内联元素支持水平方向的外边距
 */
margin-left:100px ;
margin-right: 100px;
				
/*
 * 内联元素不支持垂直外边距
 */
margin-top: 200px;
margin-bottom: 200px;
				
/*
 * 设置一个左外边距
 * 水平方向的相邻外边距不会重叠，而是求和
 */
margin-left: 100px;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/*
 * 将一个内联元素变成块元素，
 * 	通过display样式可以修改元素的类型
 * 	可选值：
 * 		inline：可以将一个元素作为内联元素显示
 * 		block: 可以将一个元素设置块元素显示
 * 		inline-block：将一个元素转换为行内块元素
 * 		- 可以使一个元素既有行内元素的特点又有块元素的特点
 * 			既可以设置宽高，又不会独占一行
 * 		none: 不显示元素，并且元素不会在页面中继续占有位置
 */
display: none;

1
2
3
4
5
6
7
8
9

/*
 * visibility
 * 	- 可以用来设置元素的隐藏和显示的状态
 * 	- 可选值：
 * 		visible 默认值，元素默认会在页面显示
 * 		hidden 元素会隐藏不显示	
 * 使用 visibility:hidden;隐藏的元素虽然不会在页面中显示，但是它的位置会依然保持
 */
visibility:hidden ;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

/*
 * 设置元素的透明背景
 * opacity可以用来设置元素背景的透明，
 * 	它需要一个0-1之间的值
 * 		0 表示完全透明
 * 		1 表示完全不透明
 * 		0.5 表示半透明
 */
opacity: 0.5;
				
/*
 * opacity属性在IE8及以下的浏览器中不支持
 * IE8及以下的浏览器需要使用如下属性代替
 * 	alpha(opacity=透明度)
 * 透明度，需要一个0-100之间的值
 * 	0 表示完全透明
 * 	100 表示完全不透明
 * 	50 半透明
 * 这种方式支持IE6，但是这种效果在IE Tester中无法测试
 */
filter: alpha(opacity=50);

1

overflow: auto;

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<div style="background-color: #bfa;">
	<div style="height: 50px;"></div>
</div>
<div style="width: 100px; height: 100px; background-color: #ff0;"></div>	
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>
<span style="background-color: yellowgreen;">我是一个span</span>

1
2
3
4
5

position:
	/*static：默认值，元素没有开启定位
	relative：开启元素的相对定位
	absolute：开启元素的绝对定位
	fixed：开启元素的固定定位（也是绝对定位的一种）*/

1

z-index: 25;	

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/*
 * 块元素在文档流中默认垂直排列，所以这个三个div自上至下依次排开，
 * 如果希望块元素在页面中水平排列，可以使块元素脱离文档流
 * 使用float来使元素浮动，从而脱离文档流
 * 可选值：
 * 	none，默认值，元素默认在文档流中排列
 * 	left，元素会立即脱离文档流，向页面的左侧浮动
 * 	right，元素会立即脱离文档流，向页面的右侧浮动
 * 当为一个元素设置浮动以后（float属性是一个非none的值），
 */
float: left;

1
2

zoom:1;
overflow: hidden;

 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

/*通过after伪类，选中box1的后边*/
/*
 * 可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
 * 	这样做和添加一个div的原理一样，可以达到一个相同的效果，
 * 	而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
 */
.clearfix:after{
	/*添加一个内容*/
	content: "";
	/*转换为一个块元素*/
	display: block;
	/*清除两侧的浮动*/
	clear: both;
}
			
/*
 * 在IE6中不支持after伪类,
 * 	所以在IE6中还需要使用hasLayout来处理
 */
.clearfix{
	zoom:1;
}

/*
 * 经过修改后的clearfix是一个多功能的
 * 	既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠
 */
.clearfix:before,
.clearfix:after{
	content: "";
	display: table;
	clear: both;
}		
.clearfix{
	zoom: 1;
}
style>

 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

<!-- 
	框架集和内联框架的作用类似，都是用于在一个页面中引入其他的外部的页面，
		框架集可以同时引入多个页面，而内联框架只能引入一个，
		在h5标准中，推荐使用框架集，而不使用内联框架
	使用frameset来创建一个框架集，注意frameset不能和body出现在同一个页面中
		所以要使用框架集，页面中就不可以使用body标签
	属性：
		rows，指定框架集中的所有的框架，一行一行的排列
		cols， 指定框架集中的所有的页面，一列一列的排列	
		这两个属性frameset必须选择一个，并且需要在属性中指定每一部分所占的大小
		frameset中也可以再嵌套frameset
	frameset和iframe一样，它里边的内容都不会被搜索引擎所检索，
	所以如果搜索引擎检索到的页面是一个框架页的话，它是不能去判断里边的内容的
	使用框架集则意味着页面中不能有自己的内容，只能引入其他的页面，而我们每单独加载一个页面
	浏览器都需要重新发送一次请求，引入几个页面就需要发送几次请求，用户的体验比较差
	如果非得用建议使用frameset而不使用iframe	
-->
<frameset cols="30% , * , 30%">
	<!-- 在frameset中使用frame子标签来指定要引入的页面 
		引入几个页面就写几个frame
	-->	
	<frame src="01.表格.html" />
	<frame src="02.表格.html" />
	<!-- 嵌套一个frameset -->
	<frameset rows="30%,50%,*">
		<frame src="04.表格的布局.html" />
		<frame src="05.完善clearfix.html" />
		<frame src="06.表单.html" />
	</frameset>
</frameset>

 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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

/*
 * 使用background-image来设置背景图片
 * 	- 语法：background-image:url(相对路径);
 * 
 * 	- 如果背景图片大于元素，默认会显示图片的左上角
 * 	- 如果背景图片和元素一样大，则会将背景图片全部显示
 * 	- 如果背景图片小于元素大小，则会默认将背景图片平铺以充满元素
 * 
 * 可以同时为一个元素指定背景颜色和背景图片，
 * 	这样背景颜色将会作为背景图片的底色
 * 	一般情况下设置背景图片时都会同时指定一个背景颜色
 */
background-image:url(img/1.png);		
/*
 * background-repeat用于设置背景图片的重复方式
 * 	可选值：
 * 		repeat，默认值，背景图片会双方向重复（平铺）
 * 		no-repeat ，背景图片不会重复，有多大就显示多大
 * 		repeat-x， 背景图片沿水平方向重复
 * 		repeat-y，背景图片沿垂直方向重复
 */
background-repeat: repeat-y;
/*background-size 
 *设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，  
 *或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
 *控制显示范围，可以解决图片太大只显示左上角
 */
background-size: cover
background-size: contain
/* 一个值：这个值指定图片的宽度，图片的高度隐式的为 auto */
background-size: 50%
background-size: 3em
background-size: 12px
background-size: auto
/* 第一个值指定图片的宽度，第二个值指定图片的高度 */
background-size: 50% auto
background-size: 3em 25%
background-size: auto 6px
background-size: auto auto
/* 全局属性 */
background-size: inherit;
background-size: initial;
background-size: unset;

/*
 * 设置一个背景颜色
 */
background-color: #bfa;
/*
 * 背景图片默认是贴着元素的左上角显示
 * 通过background-position可以调整背景图片在元素中的位置
 * 可选值：
 * 		该属性可以使用 top right left bottom center中的两个值
 * 			来指定一个背景图片的位置
 * 			top left 左上
 * 			bottom right 右下
 * 			如果只给出一个值，则第二个值默认是center
 * 
 * 		也可以直接指定两个偏移量，
 * 			第一个值是水平偏移量
 * 				- 如果指定的是一个正值，则图片会向右移动指定的像素
 * 				- 如果指定的是一个负值，则图片会向左移动指定的像素
 * 			第二个是垂直偏移量	
 * 				- 如果指定的是一个正值，则图片会向下移动指定的像素
 * 				- 如果指定的是一个负值，则图片会向上移动指定的像素
 * 		
 */
background-position: -80px -40px;

/*
 * 当背景图片的background-attachment设置为fixed时，
 * 	背景图片的定位永远相对于浏览器的窗口
 */
background-attachment: fixed;

/*
 * background
 * 	- 通过该属性可以同时设置所有背景相关的样式
 * 	- 没有顺序的要求，谁在前睡在后都行
 * 		也没有数量的要求，不写的样式就使用默认值
 */
background: #bfa url(img/3.png) center center no-repeat fixed;

 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

<!--
	在HTML中，使用table标签来创建一个表格
-->
<table border="1" width="40%" align="center">
<!-- 
	在table标签中使用tr来表示表格中的一行，有几行就有几个tr
-->
<tr>
	<!-- 在tr中需要使用td来创建一个单元格，有几个单元格就有几个td -->
	<td>A1</td>
	<td>A2</td>
	<td>A3</td>
	<td>A4</td>
</tr>
<tr>
	<!--
		可以使用th标签来表示表头中的内容，
			它的用法和td一样，不同的是它会有一些默认效果
	-->
	<th>学号</th>
	<th>姓名</th>
	<th>性别</th>
	<th>住址</th>
</tr>			
<tr>
	<td>B1</td>
	<td>B2</td>
    <td>B3</td>
	<!-- 
		rowspan用来设置纵向的合并单元格
	-->
	<td rowspan="2">B4</td>
</tr>
<tr>
	<td>C1</td>
	<td>C2</td>
	<td>C3</td>
</tr>
<tr>
	<td>D1</td>
	<td>D2</td>
	<!-- 
		colspan横向的合并单元格
	-->
	<td colspan="2">D3</td>
</tr>
</table>

 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

/*
 * 设置表格的宽度
 */
table{
	width: 300px;
	/*居中*/
	margin: 0 auto;
	/*边框*/
	/*border:1px solid black;*/
	/*
	 * table和td边框之间默认有一个距离
	 * 	通过border-spacing属性可以设置这个距离
	 */
	/*border-spacing:0px ;*/
	
	/*
	 * border-collapse可以用来设置表格的边框合并
	 * 如果设置了边框合并，则border-spacing自动失效
	 */
	border-collapse: collapse;
	/*设置背景样式*/
	/*background-color: #bfa;*/
}
			
/*
 * 设置边框
 */
td , th{
	border: 1px solid black;
}
			
/*
 * 设置隔行变色
 */
tr:nth-child(even){
	background-color: #bfa;
}
			
/*
 * 鼠标移入到tr以后，改变颜色
 */
tr:hover{
	background-color: #ff0;
}

 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

<table>
	<!-- 
		有一些情况下表格是非常的长的，
			这时就需要将表格分为三个部分，表
		在HTML中为我们提供了三个标签：
			thead 表头
			tbody 表格主体
			tfoot 表格底部
			
		这三个标签的作用，就来区分表格的不
			都需要直接写到table中，tr需要写
			
		thead中的内容，永远会显示在表格的
		tfoot中的内容，永远都会显示表格的
		tbody中的内容，永远都会显示表格的
		
		如果表格中没有写tbody，浏览器会自
		并且将所有的tr都放到tbody中，所以
		通过table > tr 无法选中行 需要通过
	-->
	<thead>
		<tr>
			<th>日期</th>
			<th>收入</th>
			<th>支出</th>
			<th>合计</th>
		</tr>
	</thead>
	
	<tfoot>
		<tr>
			<td></td>
			<td></td>
			<td>合计</td>
			<td>100</td>
		</tr>
	</tfoot>
	
	<tbody>
		<tr>
			<td>10.24</td>
			<td>500</td>
			<td>300</td>
			<td>200</td>
		</tr>
		<tr>
			<td>10.24</td>
			<td>500</td>
			<td>300</td>
			<td>200</td>
		</tr>
		
	</tbody>	
</table>

 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

<!-- 
	以前表格更多的情况实际上是用来对页面进行布局的，但是这种方式早已被CSS所淘汰了
	表格的列数由td最多的那行决定
	表格是可以嵌套，可以在td中在放置一个表格
-->
		
<table border="1" width="100%">
	<tr height="100px">
		<td colspan="2"></td>
	</tr>
	<tr height="400px">
		<td width="20%"></td>
		<td width="80%">
			<table border="1" width="100%" height="100%">
				<tr>
					<td></td>
				</tr>
				<tr>
					<td></td>
				</tr>
			</table>
		</td>
	</tr>
	<tr height="100px">
		<td colspan="2"></td>
	</tr>
</table>

1
2
3
4
5
6
7

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  /*指定了一个三行三列的网格，列宽和行高都是100px。*/
  /*grid-template-columns: 33.33% 33.33% 33.33%;*/
  grid-template-rows: 100px 100px 100px;
}

1
2
3
4
5

.container {
  display: grid;
  grid-template-columns: repeat(3, 33.33%);
  grid-template-rows: repeat(3, 33.33%);
}

1
2
3
4

.container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
}

1
2
3
4

.container {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

1
2
3
4

.container {
  display: grid;
  grid-template-columns: 150px 1fr 2fr;
}

1

grid-template-columns: 100px auto 100px;

1
2
3
4

.container {
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}

1
2
3
4
5
6
7
8

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-template-areas: 'a b c'
                       'd e f'
                       'g h i';
}

1
2
3

grid-template-areas: 'a a a'
                     'b b b'
                     'c c c';

1
2
3

grid-template-areas: "header header header"
                     "main main sidebar"
                     "footer footer footer";

1
2
3

grid-template-areas: 'a . c'
                     'd . f'
                     'g . i';

1

grid-auto-flow: column;

1

grid-auto-flow: row dense;

1

grid-auto-flow: column dense;

1
2
3
4

.container {
  justify-items: start | end | center | stretch;
  align-items: start | end | center | stretch;
}

1
2
3
4
5
6

.container {
  display: grid;
  grid-template-columns: 100px 100px 100px;
  grid-template-rows: 100px 100px 100px;
  grid-auto-rows: 50px; 
}

1
2
3
4

.item-1 {
  grid-column-start: 2;
  grid-column-end: 4;
}

1
2
3
4
5
6

.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 4;
}

1
2
3
4

.item-1 {
  grid-column-start: header-start;
  grid-column-end: header-end;
}

1
2
3
4
5
6
7

.item-1 {
  grid-column-start: span 2;
}
或
.item-1 {
  grid-column-end: span 2;
}

1
2
3
4

.item {
  grid-column: <start-line> / <end-line>;
  grid-row: <start-line> / <end-line>;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.item-1 {
  grid-column: 1 / 3;
  grid-row: 1 / 2;
}
/* 等同于 */
.item-1 {
  grid-column-start: 1;
  grid-column-end: 3;
  grid-row-start: 1;
  grid-row-end: 2;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

.item-1 {
  background: #b03532;
  grid-column: 1 / 3;
  grid-row: 1 / 3;
}
/* 等同于 */
.item-1 {
  background: #b03532;
  grid-column: 1 / span 2;
  grid-row: 1 / span 2;
}

1
2
3
4

.item-1 {
  grid-column: 1;
  grid-row: 1;
}

1
2
3

.item-1 {
  grid-area: e;
}

1
2
3

.item {
  grid-area: <row-start> / <column-start> / <row-end> / <column-end>;
}

1
2
3

.item-1 {
  grid-area: 1 / 1 / 3 / 3;
}

1
2
3
4

.item {
  justify-self: start | end | center | stretch;
  align-self: start | end | center | stretch;
}

1
2
3

.item-1  {
  justify-self: start;
}

1

place-self: <align-self> <justify-self>;

1

place-self: center center;