CSS3 基础学习

绝对定位：

• 绝对定位是脱离了文档流，不会单独占满一行，它的方位只会受到top，left，bottom，right的影响。

• 一个块的top，left，bottom，right是相对于什么呢？

• 1）如果它父元素做了定位，就相对于的是最近的一个父元素。

• 2）父元素没有定位，就相对于Body

相对定位：

• 相对定位没有脱离文档流，会单独占满一行，它的方位只会受到top，left，right，bottom的影响。

• 相对定位的top，left，right，bottom是相对于块的最近的一个父元素

固定定位：

• 固定定位脱离了文档流，不会单独占满一行。

• top，left，right，bottom始终相对于的是body

top，left，right，bottom只有设置了定位（绝对、相对、固定）的时候才有用。

1.box-shadow 边框阴影；

/*
X轴偏移量：必填，水平阴影的位置，允许负值；
Y轴偏移量：必填，垂直阴影的位置，允许负值；
阴影模糊半径：可选，模糊距离；
阴影扩展半径：可选，阴影的尺寸；
阴影颜色：可选，阴影的颜色，默认为黑色；
投影方式：可选（设置inset为内部阴影方式，不设置为外部阴影方式）；
*/
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
box-shadow:0px 5px 5px #b64b41;

2.渐变色彩；

/*
to top：从下向上；
to right：从左到右；
to bottom：从上到下；
to left：从右到左；
to top left：右上角到左上角；
to top right：左上角到右上角；
*/

线性渐变
 background-image:linear-gradient(to top left,red,orange,yellow,green,blue);

3.text-shadow 文本阴影；

/*
X-Offset:阴影的水平偏移距离，其值为正值时阴影向右偏移，反之向左偏移；
Y-Offset:阴影的垂直偏移距离，其值为正值时阴影向下偏移，反之向上偏移；
Blur：阴影的模糊程度，其值不能是负值，值越大，阴影越模糊。不需要阴影模糊，可设置其值为0；
Color：阴影的颜色，可以用rgba色；
*/
text-shadow: 2px 2px 0 red;

4.text-overflow 设置省略标记；

//text-overflow只是用来说明文字溢出时用什么方式显示，要实现省略号的效果，还必须定义强制文本在一行内显示（white-space：nowrap）及溢出内容为隐藏（overflow：hidden），只有这样才能实现省略号的效果；

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap; 

//word-wrap 设置文本行为，当前行超过指定容器的边界时是否断开转行；

//语法：
//表示控制连续文本换行
word-wrap:normal
//表示内容将在边界内换行
word-wrap:break-word

5.empty 结构性伪类选择器;

//:empty 选择器表示的就是空。用来选择没有任何内容的元素，没有内容指的是一点内容都没有，哪怕是一个空格。
p:empty{
    background:orange;
}

6.not 结构性伪类选择器；

//:not 选择器称为否定选择器，和jQuery中的：not选择器一模一样，可以选择除某个元素之外的所有元素。如：设置表单中除submit按钮之外的input元素添加红色边框；

input:not([type="submit"]){
  border:1px solid red;
}

7.target 选择器称为目标选择器，用来匹配文档（页面）的url的某个标识符的目标元素。

/*这里的:target就是指id="brand"的div对象*/
#brand:target p {
  background: orange;
  color: #fff;
}

8.first-child 选择父元素的第一个子元素

ul > li:first-child {
 color: red;
}

9.last-child 选择器选择的元素的最后一个子元素

ul>li:last-child{background:blue;}

10.nth-child（n） 选择器用来定位某个父元素的一个或多个特定的子元素，其中n是参数，可以是整数值（1，2，3，4），也可以是表达式（2n+1、-n+5）和关键词（odd、even），但是参数n的起始值始终是1，而不是0.

ol > li:nth-child(2n+1){
  background: green;
}

11.nth-last-child（n）从某父元素的最后一个子元素开始计算，来选择特定的元素

ol > li:nth-last-child(5){
  background: orange;
}

12.first-of-type 定位一个父元素下的某个类型的第一个子元素

.wrapper > div:first-of-type {
  background: orange;
}

13.nth-of-type（n）定位父元素中某个类型的子元素

.wrapper > div:nth-of-type(2n+1),
.wrapper > p:nth-of-type(2n){
  background: orange;
}

.wrapper > div:nth-of-type(odd),
.wrapper > p:nth-of-type(even){
  background: orange;
}

14.last-of-type 父元素下的某个类型的最后一个子元素

.wrapper > div:last-of-type{
  background: orange;
}

15.nth-last-of-type（n） 选择父元素中指定的某种子元素类型，但它的起始方向是从最后一个子元素开始

.wrapper > div:nth-last-of-type(5){
  background: orange;
}

16.only-child 匹配的元素是父元素中仅有一个子元素，而且是唯一的子元素

li:only-child {
  background: orange;
}

17.only-of-type 选择一个元素是它的父元素的唯一一个相同类型的子元素，表示一个元素有很多个子元素，而其中只有一种类型的子元素是唯一的

.wrapper p:only-of-type{
  background: orange;
}

18.animation自定义动画效果

 #d1{
            position: absolute;
            top: 100px;
            left: 200px;
            width: 50px;
            height: 50px;
            background-image: url("Icon-40@2x.png");
            animation: donghua 20s infinite ease;
        }
        @keyframes donghua {
            0%{
                transform: translateX(0);
                /*transform: translateX(9);*/
            }
            50%{
                transform: rotateX(180deg);

            }
            100%{
                transform: rotateX(360deg);

            }
        }