这是第二周了，继续总结一下

 

补充一下CSS选择器吧：

一.选择器

1.子元素选择器:

 选择作为某元素子元素的元素
          h1>strong{color:red}-----选择h1元素的子元素strong变为红色

2.相邻兄弟选择器:

 选择紧接在另一元素都的元素,且二者具有相同的父元素
          h1+p{color:red}--------选择h1元素后的p元素变为红色

3.伪类:

 向某些选择器添加特殊效果
       属性:  hover---鼠标悬浮在元素上方时为元素添加样式
             first chlid---向元素的第一个子元素添加样式

4.伪元素:

 向某些选择器设置特殊效果
       属性:first letter----向文本的首字母设置特殊样式
            first line-----向文本的首行设置特殊样式

CSS3转换

 浏览器支持:-webkit-transform  谷歌
           -moz-transform     火狐
           -o-transform      欧朋
           -ms-transform     IE9

2D转换

 transform{
        translate---元素从其当前位置移动     
            例:translate(50px,100px) 把元素从左侧移动 50 像素，从顶端移动 100 像素

        rotate ----元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转
            例: rotate(30deg) 把元素顺时针旋转 30 度

        scale----元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数
            例:scale(2,4) 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 4 倍

        skew-----元素转动给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
            例:skew(30deg,20deg) 围绕 X 轴把元素转动 30 度，围绕 Y 轴转动 20 度

3D转换

 transform{
       rotateX与rotateY----围绕X,y轴以给定的度数进行旋转

过渡

 CSS3 过渡是元素从一种样式逐渐改变为另一种的效果
 必须规定两项内容：
     1.规定您希望把效果添加到哪个 CSS 属性上 
     2.规定效果的时长

 向宽度、高度和转换添加过渡效果
       {transition: width 2s, height 2s, transform 2s;}

动画

 通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：
                1.规定动画的名称 
                2.规定动画的时长 
 例
    div{width:200px;height:200px;background:black;position: relative}
    div{animation: a 6s;}
    @keyframes a
    {
      0%   {background: red ;left: 0;top: 0}
      25%  {background: blue ;  left: 200px;top: 200px}
      75% {background: red ;left: 300px;top: 300px}
      100%{background: yellow;left: 0;top:0 }
    }

权重值

 1.第一级：内嵌样式             1000
 2.第二级：ID选择器             0100
 3.第三级：类，伪类选择器        0010
 4.第四级：元素选择器           0001

    注：通配符选择器（*），子元素选择器（>）与相邻兄弟选择器（+）权重值为  0000

定位

 1.  display：block-------可以让行内元素（比如 <a> 元素）表现得像块级元素一样
     display：none -------让生成的元素没有框

 2.position 属性
      relative-----相对定位：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留
      absolute-----绝对定位：元素框从文档流完全删除，并相对于其包含块定位（包含块可能是文档中的另一个元素或者是初始包含块）
      fixed   -----固定定位：生成绝对定位的元素，相对于浏览器窗口进行定位