一.定位（相对定位，绝对定位，固定定位）-重点 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.继续开发个人项目
