CSS3 知识点

一、【圆角效果】
border-radius: 5px 4px 3px 2px; border-top-right-radius:10px 右上解圆滑

二、【阴影效果】
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式];
box-shadow: 0 0 15px blue inset; 内阴影

三、【颜色之RGBA】
color：rgba(R,G,B,A) 或 background-color:rgba(100,120,60,0.5);

四、【渐变色彩】
background-image:linear-gradient([to 设置方向]，[开始颜色]，[多种过度颜色]，[结束颜色])red（红）orange（橙）yellow（黄）green（绿）blue（蓝）black（黑）white（白）
background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);
★渐变透明 background-image: -webkit-linear-gradient(right, rgba(231,51, 104, 0) 0%, rgba(231,51, 104, 1) 100%);}

五、【文字与字体】
1、设置溢出显示省略号：
white-space: nowrap;（强制文本在一行内显示）
overflow: hidden; （溢出内容为隐藏）
text-overflow: ellipsis;（三段配合使用尾段才显示省略号…，clip表示溢出剪切）

2、嵌入字体
@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
@font-face {
    font-family : 字体名称;
    src : 字体文件在服务器上的相对或绝对路径;
 }


3、文本阴影
text-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影颜色] 
1
2
3
4
5
6
7
8
9
10

六、【背景设置】
1、设置元素背景图片的原始起始位置 】
background-origin ：border-box（边框）| padding-box（内边距）| content-box（内容区域);

2、设置元素背景图片裁剪
配合background-origin使用，图片会根据它作为开始展示
background-clip ： border-box（边框）| padding-box（内填充）| content-box（内容区域）| no-clip


3、设置背景图片大小
background-size: auto | <长宽度值> | <百分比> | cover | contain


4、多重背景
   background-image: url(http://img.mukewang.com/54cf2365000140e600740095.jpg),
       url(http://img.mukewang.com/54cf238a0001728d00740095.jpg),
       url(http://img.mukewang.com/54cf23b60001fd9700740096.jpg);
   background-position: left top, 100px 0, 200px 0;
   background-repeat: no-repeat, no-repeat, no-repeat;


七、【伪类选择器】
【伪类】伪类是对元素进行分类是基于特征(characteristics)而不是它们的名字、属性或者内容;原则上特征是不可以从文档树上推断得到的。

1、 CSS3选择器 
属性选择器  元素[属性^="属性值"] 如：a[title*=more]{ background: orange;}
^是选择开头位置包含的
$是选择结尾位置包含的
*是选择任意位置包含的 
作用：通过各种各样的属性给元素增加信息


2、:root
结构性伪类选择器—root :root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是。
:root {background:orange;} 改变背景颜色


3、 :not
结构性伪类选择器—not :not选择器称为否定选择器，可以选择除某个元素之外的所有元素。
   input:not([type="submit"]){border:1px solid red;}
   
   
   

4、:empty
选择器表示的就是空。用来选择没有任何内容的元素，这里没有内容指的是一点内容都没有，哪怕是一个空格也是字符。
p:empty{display: none;}


5、:target
选择器称为目标选择器，用来匹配文档(页面)的url的某个标志符的目标元素。（用记锚点的方式好记）
#bank:target{ color:blue;} 显示蓝色 
爱你


6、:first-child
选择器表示的是选择父元素的第一个子元素的元素E。简单理解就是选择父元素后面所有元素中的第一个元素，包含这个子元素的所有后代元素  如：将无序列表的第一个项目符号设置为红色 ul > li:first-child

7、:last-child
选择器表示的是选择父元素的最后一个子元素的元素E。简单理解就是选择父元素后面所有元素中的最后一个元素，包含这个子元素的所有后代元素  如：将无序列表的第一个项目符号设置为红色 ul > li:last-child


8、:nth-child(n)
选择器用来定位某个父元素的一个或多个特定的子元素。其中“n”是其参数，而且可以是整数值(1,2,3,4)，也可以是表达式(2n+1、-n+5)和关键词(odd、even)，但参数n的起始值始终是1，而不是0。
ol > li:nth-child(2n-1){ background-color:#CCC;}


 9、正方向范围
li:nth-child(n+6)  
选中从第6个开始的子元素

10、负方向范围
:nth-child(-n+9)
选中从第1个到第9个子元素。使用 :nth-child(-n+9) ，就相当让你选中第9个和其之前的所有子元素


11、前后限制范围
:nth-child(n+4):nth-child(-n+8)
选中第4-8个子元素。使用 nth-child(n+4):nth-child(-n+8) 我们可以选中某一范围内子元素，上面的例子里是从第4个到第8个子元素


12、奇数（单数）、偶数位（双数）
 :nth-child(odd)
 :nth-child(even)

13、隔选择子元素
:nth-child(3n+1),
选择1,4,7,10

14、范围高级用法
nth-child(n+2):nth-child(odd):nth-child(-n+9)
使用 nth-child(n+2):nth-child(odd):nth-child(-n+9) 我们将会选中的子元素是从第2位到第9位，并且只包含奇数位。

15、:nth-last-child(n)
选择器和前面的“:nth-child(n)”选择器非常的相似，只是这里多了一个“last”，所起的作用和“:nth-child(n)”选择器有所区别，从某父元素的最后一个子元素开始计算，来选择特定的元素。


16、:first-of-type
选择器类似于“:first-child”选择器，不同之处就是指定了元素的类型,其主要用来定位一个父元素下的某个类型的第一个子元素。
如：定位div容器中的第一个p元素（p不一定是容器中的第一个子元素），并设置其背景色为橙色。

   
我是第一个段落
   
我是第二个段落
   
我是第三个段落
   
我是第一个Div元素
   
我是第二个Div元素
   
我是第三个Div元素

.wrapper > p:first-of-type { background: orange;}（第一个）
.wrapper > p:last-of-type { background: orange;}（最后一个）
多种类型的元素用frist-of-type，同一种元素用frist-child,如有序列表


17、:nth-of-type(n)
选择器和“:nth-child(n)”选择器非常类似，不同的是它只计算父元素中指定的某种类型的子元素。当某个元素中的子元素不单单是同一种类型的子元素时，使用“:nth-of-type(n)”选择器来定位于父元素中某种类型的子元素是非常方便和有用的。在“:nth-of-type(n)”选择器中的“n”和“:nth-child(n)”选择器中的“n”参数也一样，可以是具体的整数，也可以是表达式，还可以是关键词。
.wrapper > p:nth-of-type(2n){ background: orange;}    （从第一个开始计起）
.wrapper > p:nth-last-of-type(2n){ background: orange;} （从最后一个开始计起）


18、:only-child
独生子选择器，选择器选择的是父元素中只有一个子元素，而且只有唯一的一个子元素。也就是说，匹配的元素的父元素中仅有一个子元素，而且是一个唯一的子元素。
.post p:only-child { background: orange;}
  
我是一个段落
  
我是一个段落
  
我是一个段落
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119

19、:only-of-type
选择器用来选择一个元素是它的父元素的唯一一个相同类型的子元素。选择父元素下面子元素中单一的一种类型的子元素时就可以适应

.post > p:only-of-type { background: orange;}
:only-child 小明的爸爸只有小明一个孩子
:only-of-type 小明的爸爸有龙凤胎，小明是唯一的儿子

20、enabled
Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在多个相同表单中（如文本框），若使用类标记会很烦锁，使用enabled会相当的方便，具体用法如下：
  input[type="text"]:enabled   //CSS定义文本框样式
    样式被添加
   样式被取消 


21、disabled 设置不要用的输入框样式
  input[type="text"]:disabled
  


22、checked 覆盖单选按钮和复选按钮的选中和未选中的状态 http://www.imooc.com/code/865


23、::selection “::selection”伪元素是修改用鼠标选择文本时的文本样式。浏览器默认情况下，用鼠标选择网页文本是以“深蓝的背景，白色的字体”显示的
::selection{
    background: orange;
    color: white;
}


::-moz-selection{
    background: orange;
    color: white;
}  //兼容其他浏览器要求


24、read-only    用来指定处于只读状态元素的样式。
input[type="text"]:-moz-read-only{  border-color: #ccc;}  //兼容其他浏览器要求
input[type="text"]:read-only  border-color: #ccc;}






25、:read-write 
:read-write选择器刚好与:read-only选择器相反，主要用来指定当元素处于非只读状态时的样式。
input[type="text"]:-moz-read-only{  border-color: #ccc;}   //兼容其他浏览器要求
input[type="text"]:read-only{  border-color: #ccc;}






26、::before和::after
    p::before{ content:"我爱你; ";}
    
我也爱你
   输出结果：我爱你；我也爱你
   a::after{ content:attr(title);} //还支持url插入哦
   我是元素
   输出结果：我是元素我是被插入的内容


八、【图形变换】
 1、旋转 rotate()
旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转。它主要在二维空间内进行操作，设置一个角度值，用来指定旋转的幅度。正值，元素则相对原点中心顺时针旋转；负值，元素则相对原点中心逆时针旋转
transform: rotate(45deg);
 
2、skew(x,y)
扭曲skew()函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕着X轴和Y轴按照一定的角度倾斜
transform:skew(10deg，10deg);


3、scale(X,Y)
让元素根据中心原点对对象进行缩放,单位是“倍”
   scale()的取值默认的值为1，小于1（0.01~0.99）使一个元素缩小；大于1是让元素放大。
   transform: scale(0.9); 缩小
   transform: scale(1.2); 放大


 4、translate()
可以将元素向指定的方向移动，类似于position中的relative。使用translate()函数，可以把元素从原来的位置移动，而不影响在X、Y轴上的任何Web组件。
   translate(x,y)水平方向和垂直方向同时移动
   translateX(x)仅水平方向移动（X轴移动）
   translateY(y)仅垂直方向移动（Y轴移动）
   transform:translate(50%,50%);


 5、matrix(a,b,c,d,e,f)
是一个含六个值的(a,b,c,d,e,f)变换矩阵，用来指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。
  a为元素的水平伸缩量，1为原始大小；
  b为纵向扭曲，0为不变；
  c为横向扭曲，0不变；
  d为垂直伸缩量，1为原始大小；
  e为水平偏移量，0是初始位置；
  f为垂直偏移量，0是初始位置


 6、原点 transform-origin
   transform-origin 可以更改起始位置
   transform-origin: left top; 起始位置是左上角
 注意：同时使用多种方法：transform: translateX(90px) rotate(360deg) 移动和旋转


九、【绘制图形】
右三角形：    
border-style: solid;
border-width: .146667rem 0 .146667rem .173333rem;
border-color: transparent transparent transparent rgba(0,0,0,.67);
position: absolute;


十、【动画】
  第一段：div { width:2px; transition:all .5s ease-in .18s; ｝
  or 第一段：div{
    transition-property: height; //指定过渡或动态模拟的CSS属性
    transition-duration:3s; //动画持续时间
    transition-timing-function: ease-in; //过渡函数
    transition-delay:0.1s;} //指定动画开始执行时间
  第二段：div:hover {
 height: 300px;
} //这个是最终效果,或换成border-radius: 20px;也可以


  ease    速度由快到慢
  ease-in    逐渐加速
  ease-out    逐渐变慢
  ease-in-out    先加速再减速，渐显渐隐
  linear   恒速
  transition-property 指定过渡或动态模拟的CSS属性


【关键帧动画】
第一段：@keyframes changecolor{
0%{
    background: red;
}
20%{
    background:blue;
}
40%{
    background:orange;
}
60%{
    background:green;
}
80%{
    background:yellow;
}
100%{
    background: red;
}
}


第二段：div:hover {
    animation: changecolor 5s ease-out .2s;
}
根据时段用动画完成不同的任务


【关键帧动画--不间断运动】
第一段：@keyframes around{  
0% {
    transform: translateY(0);
}
25%{
    transform: translateX(180px);
}
50%{
    transform: translate(180px, 180px); 
}
75%{
    transform:translate(0,180px);
}
100%{
    transform: translateY(0);
}
}


第二段：div span{{animation-name:around;
animation-duration: 10s;
//过程为10秒
animation-timing-function: ease;
//播放方式
animation-delay: 1s;
//开始播放时间 
animation-iteration-count:infinite;
//播放次数，infinite为无数次
animation-direction:alternate; } //动画播放方向
animation-fill-mode: both; forwards 完成后到最后帧  backwards 完成后到初始帧
div:hover span {
    animation-play-state:running;//播放状态
} // 当鼠标经过时自动播放,
or 第二段：：div span{ animation:around 10s ease-in 0.5s infinite;  }//注意：这行需另外写


播放方式：
   ease    速度由快到慢
   ease-in    逐渐加速
   ease-out    逐渐变慢
   ease-in-out    先加速再减速，渐显渐隐
   linear   恒速


十一、【Columns 多列布局】
   columns: 200px 2;   //显示2栏，每栏宽度为200px
   column-gap:6px;   //列间距为6px
   column-rule: 3px solid green;  //列间竖条/边框为3px绿色
   column-span:all;;  //当文件每段都有个P时可以根据需要跨列设置是否需要分列


十二、【box-sizing 盒子模型】
按W3C的盒子模型计算，padding后会把元素撑出来，想要解决问题只需加box-sizing:border-box后，padding不会被影响


十三、【Flex 伸缩布局】
   1、采用Flex布局的元素，它的所有子元素自动成为容器成员，称为Flex项目（flex item）
   2、容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）
   3、主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；
   4、交叉轴的开始位置叫做cross start，结束位置叫做cross end。
   5、以下6个属性设置在容器上。
      ■ flex-direction  属性决定主轴的方向（即项目的排列方向）
         :row  主轴为水平方向，起点在左端
         :row-reverse  主轴为水平方向，起点在右端
         :column  主轴为垂直方向，起点在上沿
         :column-reverse  主轴为垂直方向，起点在下沿。
      ■ flex-wrap  nowrap不换行  wrap换行，第一行在上方 wrap-reverse换行，第一行在下方
      ■ flex-flow  是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
      ■ justify-content  定义了项目在主轴上的对齐方式
         :flex-start（默认值）  左对齐
         :flex-end  右对齐
         :center  居中
         :space-between  两端对齐，项目之间的间隔都相等。
         :space-around  每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
      ■ align-items 定义项目在交叉轴上如何对齐
         :flex-start  交叉轴的起点对齐。
         :flex-end  交叉轴的终点对齐。
         :center  交叉轴的中点对齐。
         :baseline  项目的第一行文字的基线对齐。
         :stretch（默认值）  如果项目未设置高度或设为auto，将占满整个容器的高度。
      ■ align-content  定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
         :flex-start  与交叉轴的起点对齐。
         :flex-end  与交叉轴的终点对齐。
         :center  与交叉轴的中点对齐。
         :space-between  与交叉轴两端对齐，轴线之间的间隔平均分布。
         :space-around  每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
         :stretch（默认值）  轴线占满整个交叉轴。
    6、项目的属性
       ■ order  定义项目的排列顺序。数值越小，排列越靠前，默认为0
       ■ flex-grow  定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
       ■ flex-shrink  属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
       ■ flex-basis  定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
       ■ flex 是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto，个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
       ■ align-self  允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性，该属性可能取6个值，除了auto，其他都与align-items属性完全一致。 
   注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。


十四、【Media Queries 媒体控制】
   1. 最大宽度max-width
   @media screen and (max-width:480px){
    .ads {
      display:none;
     }
   }
   上面表示的是：当屏幕小于或等于480px时,页面中的广告区块（.ads）都将被隐藏。


   2.最小宽度min-width
   @media screen and (min-width:900px){
   .wrapper{width: 980px;}
   }
   上面表示的是：当屏幕大于或等于900px时，容器“.wrapper”的宽度为980px。


   3、最小和最大区间
   @media screen and (min-width:600px) and (max-width:900px){
     body {background-color:#f5f5f5;}
   }
  当屏幕在600px~900px之间时，body的背景色渲染为“#f5f5f5”


  4、设备屏幕的输出宽度Device Width
  
  在智能设备上，例如iPhone、iPad等，还可以根据屏幕设备的尺寸来设置相应的样式（或者调用相应的样式文件）。


  5、not关键词
  @media not print and (max-width: 1200px){样式代码}
  面代码表示的是：样式代码将被使用在除打印设备和设备宽度小于1200px下所有设备中。

  6.only关键词
  
  上面代码中style.css样式被用在宽度小于或等于480px的手持设备上，或者被用于屏幕宽度大于或等于960px的设备上。


十五、【Responsive 不同设备的分辨率设置相应样式】
   1.1024px显屏
   @media screen and (max-width : 1024px) { /* 样式写在这里 */ }     
   2.800px显屏
   @media screen and (max-width : 800px) { /* 样式写在这里 */   }     
   3.640px显屏
   @media screen and (max-width : 640px) {  /* 样式写在这*/   }     
   4.iPad横板显屏
   @media screen and (max-device-width: 1024px) and (orientation: landscape) {  /* 样式写在这 */   }  
   5.iPad竖板显屏
   @media screen and (max-device-width: 768px) and (orientation: portrait) { /* 样式写在这 */    } 
   6.iPhone 和 Smartphones
   @media screen and (min-device-width: 320px) and (min-device-width: 480px) {  /* 样式写在这 */   }    


十六、【resize 自由绽放】
   textarea {  resize: both;}
   none 不能绽放   both 可改变宽高度   horizontal 仅可改变宽度 
   vertical 仅可以改变高度   inherit 继承父元素resize属性值
   想要在div用上这效果必须加一个overflow:hidden


十七、【outline 外轮廓边框】
1、与border相似，但outline边线不会占用空间
2、outline 的效果将随元素的 focus 而自动出现，相应的由 blur 而自动消失。这些都是浏览器的默认行为，无需JavaScript配合CSS来控制。
3、outline-offset: 2px; 设置边框与元素边缘的距离
3D菜单：http://www.imooc.com/code/1963


十八、box-sizing: border-box 用法
当加入padding时，边框的宽高就会发生变化，如果想加入padding后，又不想宽高发生变化，就用box-sizing: border-box 


【一些实例】
1、平行四边型
width: 200px;
height: 200px;
background: blue;
transform: skewX(-20deg);

2、梯形
width:50px;
height:50px;
border-left:50px solid transparent;
border-right:50px solid transparent;
border-top:50px solid transparent;
border-bottom:50px solid blue;


3、直角三角形（上三角型，将四条边都填充100px就知道怎么弄了）
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid transparent;
border-bottom: 100px solid blue; 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346