今天完成的事情：

进行任务9，梳理定位相关的知识

明天计划的事情：

完成任务9

遇到的问题：

样式想做出联动的效果：

选择“登录“的时候登录框背景颜色变白，宽度变大，”注册“背景变蓝，宽度变小。字体选中的时候显示下划线。

但只用CSS做出html两个标签的各自的动画效果：

原始状态： 

选择注册：

选择登录：

后面一问原来是联动是用JS实现。。。不知道CSS3是否可以实现，今天没折腾出这个效果来！！！

收获：

:visited 选择器用于选取已被访问的链接。 

http://www.w3school.com.cn/cssref/selector_visited.asp

::selection 选择器匹配被用户选取的选取部分。

            只能修改少量CSS属性：color、background、cursor 以及 outline。

参考资料：http://www.w3school.com.cn/cssref/selector_selection.asp

三种基本的定位机制：普通流（html位置）、浮动和绝对定位

position的四个属性：

static：       

默认设置 处于文档流中

relative：     

相对于默认位置的移动，使用top、right、bottom、left移动。margin属性有效。

absolute：     

1、相对于父级relative的移动，使用top、right、bottom、left移动。

2、忽略根元素的padding。（子元素相对于父级relative元素有偏移，忽略padding，实际效果为absolute偏移效果。）

3、会使元素的display属性变为block。 

4、应用了position: absolute / relative之后，会覆盖其他非定位元素

5、如果你不想覆盖到其他元素，也可以将z-index设置成-1。

fixed：        

1、会使元素的display属性变为block。

2、会使元素脱离普通流，不占据空间。

3、会覆盖到非定位元素上。

4、根元素固定为浏览器窗口。

5、如果之前祖级元素有设置最大宽度，fixed元素默认宽度为页面页面宽度，最大宽度需要重新设置。

float和position兼容性问题：

1、元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。

2、同时应用了position: absolute及float属性，则float失效。

3、z-index只能在position属性值为relative或absolute或fixed的元素上有效。

4、第一个元素应用了position之后会覆盖着接下来的float元素（如果两个元素所处的位置相同）

5、同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以使用清除浮动）。

常用的清除浮动的方法有两种：

 1、通过在容器中添加一个标签，设置该标签的样式为 clear: both（清除其他容器元素浮动对容器内元素影响）

2、容器设置overflow: hidden；（清除容器内部元素浮动对其容器内元素影响）

z-index 属性设置元素的堆叠顺序。如果为正数，则离用户更近，为负数则表示离用户更远。

参考资料：http://www.w3school.com.cn/css/css_positioning.asp

PS：服务器还没好，今天不附上成果展示和代码连接了。

今日CSS线下讨论帖：http://bbs.ptteng.com/forum.php?mod=viewthread&tid=8733&extra=page%3D1