CSS_day05

一.定位（相对定位，绝对定位，固定定位）-重点
1.定位相关属性
1.定位属性
属性：position
取值：
(1)static 静态，默认值
(2)relative 相对定位
(3)absolute 绝对定位
(4)fixed 固定定位
注意：将元素的position设置为relative/absolute/fixed任何一个值，那该元素就称为"已定位"元素。

2.偏移属性
	  top/bottom/left/right
		以上四个属性取值均为数字（px单位）
		ex:
		 top:150px; 元素向下偏移
		 bottom:-200px;元素向下偏移
		 left:100px;元素向右偏移
  注意：只有"已定位"元素才能使用偏移属性

3.定位详解
	  1.相对定位
		  1.什么是相对定位
			  元素会相对于它原来的位置偏移某个距离
    2.使用场合
			  在做元素位置的微调时使用
    3.语法
			  position:relative;
				配合着偏移属性使用
  2.绝对定位
		  1.特点
			  1.绝对定位的元素会脱离文档流，不占页面空间
				2.绝对定位的元素会相对于离他"最近的" "已定位的" "祖先元素"去实现位置的初始化，如果没有已定位的祖先元素，那么元素相对于body去实现位置的初始化。
      (一般子元素要实现绝对定位，父元素通常都设置为相对定位)
			2.语法
			  position:absolute;
				配合偏移属性来使用
    3.使用场合
			  1.弹出菜单
				2.有堆叠效果的元素
    4.注意
			  1.脱离文档流
				2.绝对定位会将元素变为块级元素
		3.堆叠顺序
		  一旦将元素变为已定位元素的话，元素们有可能会出现堆叠的效果。如果想要改变默认的堆叠顺序，可以使用z-index
			属性：z-index
			取值：无单位的数字,数字越大越靠上
    注意：
			  1.父子元素间，z-index无效，永远都是子元素压在父元素上。
				2.只有已定位元素才能使用z-index
  4.固定定位
		  1.什么是固定定位
			  将元素固定在页面的某个位置，位置不会随着滚动条而发生位置的变化，始终固定在可视化的区域中。
    2.语法
			  position:fixed;
				配合偏移属性来使用。
    3.注意
			  1.固定定位脱离文档流，不占页面空间
				2.固定定位的元素会变成块级元素，允许修改尺寸
				3.固定定位的元素永远都是相对于body去实现位置的初始化。

				练习：仿照京东右下角返回顶部的效果，将图片固定在网页的右下角，点击图片时返回到网页的顶部。 

CSS3 Core=====================================
二.复杂选择器
1.兄弟选择器
兄弟元素：具备相同父元素的平级元素之间称为兄弟元素。
ex：

1.相邻兄弟选择器
作用：获取紧紧挨在某元素后的兄弟元素。
语法：选择器1+选择器2{}
注意：兄弟选择器，只能向后找，不能向前找。
2.通用兄弟选择器
作用：获取某元素后所有满足条件的兄弟元素
语法：选择器1~选择器2{}

  练习：通过兄弟选择器设置样式： 
		      1.h3与div之间有30px的外边距
					2.从第二个div开始，每个div都有10px的上外边距。（3分钟）

		  <h3>静夜思</h3>
			<div>床前明月光</div>
			<div>疑是地上霜</div>
			<div>举头望明月</div>
			<div>低头思故乡</div>

2.属性选择器
id,class,style,title,name,type,value等
1.作用
允许通过元素所附带的属性及值来匹配页面元素。
2.语法
(1)基本写法
[attr] attr:表示任意属性
作用：匹配页面中所有附带attr属性的元素。
ex:
[id] 匹配页面中所有附带id属性的元素
[class] 匹配页面中所有附带class属性的元素
(2)elem[attr]
elem:表示任意元素
attr:表示任意属性
作用：匹配页面中所有附带attr属性的elem元素。
ex:
div[id] 匹配带有id属性的div元素
(3)[attr1][attr2]…
作用：匹配同时附带多个属性的元素
ex:
[id][class] 匹配同时附带id属性和class属性的元素
(4)[attr=value]
作用：匹配页面中attr属性值为value的元素
[attr~=value]:获取属性值中包含指定词汇的元素
[attr^=value]：匹配属性值以指定值开头的每个元素
[attr$=value]：匹配属性值以指定值结尾的每个元素
[attr*=value]：匹配属性值中包含指定值的每个元素
ex：
[id=“one”]{color:red;}
等同于：
#one{color:red;}

3.伪类选择器
已经学过的伪类：
链接伪类: :link
:visited
动态伪类： :hover
:active
:focus
1.目标伪类
作用：突出显示活动的HTML锚点元素，匹配被激活的锚点。
语法：
选择器:target{…}
2.结构伪类
作用：通过元素的结构关系来匹配元素（上下级嵌套）
1.:first-child
匹配的元素是属于其父元素中的第一个子元素。

p1

p2

p3

ex:
p:first-child{…}
2.:last-child
匹配的元素是属于其父元素中的最后一个子元素。
ex:
p:last-child{…}
练习：
1.创建一个4*4表格，并填充内容
2.设置第一行的数据背景颜色为黄色
3.设置最后一行的数据背景颜色为红色（3分钟）
3.:nth-child(n)
匹配的元素是属于其父元素中的第n个元素。
ex:
tr:nth-child(3){…}

    练习：在上面表格的基础上，设置表格第三行第三列中的文字为粗体并倾斜显示，字体大小为30px
  4.:empty
		  匹配没有子元素的元素。（空格也不能包含）

课后作业：
1.完成"课后作业1.png"的布局效果（参考www.codeboy.com）
2.完成"课后作业2.png"的布局效果
3.继续开发个人项目