从零开始，学习web前端之CSS3
来源：互联网 发布：车机安卓软件 apk 编辑：程序博客网 时间：2024/04/29 16:40
CSS3
CSS3是CSS2的“进化”版本，在CSS2基础上，增强或新增了许多特性， 弥补了CSS2的众多不足之处，使得Web开发变得更为高效和便捷。
W3C的CSS3规范仍在开发。但是，许多新的CSS3属性已在现代浏览器使用。
浏览器私有化前缀
目前浏览器对css3的兼容并不是太好，有些属性我们需要加上浏览器的前缀。
-moz- /* 火狐等使用Mozilla浏览器引擎的浏览器 */-webkit- /* Safari, 谷歌浏览器等使用Webkit引擎的浏览器 */-o- /* Opera浏览器(早期) */-ms- /* Internet Explorer */ 示例：
记住加前缀的要写在前面，不加前缀的写在后面
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box{ width: 1000px; height: 200px; margin:100px auto; border: 1px solid #000; /* 浏览器私有化前缀： -webkit-: 谷歌 苹果 -moz-:火狐 -ms-：ie -o-：欧朋 */ background:-webkit-linear-gradient(left,red,blue); background:-moz-linear-gradient(left,red,blue); background:-ms-linear-gradient(left,red,blue); background:-o-linear-gradient(left,red,blue); background:linear-gradient(left,red,blue); } </style></head><body> <div class="box"></div></body></html>选择器
CSS3新增了许多灵活查找元素的方法，极大的提高了查找元素的效率和精准度。CSS3选择器与jQuery中所提供的绝大部分选择器兼容。
属性选择器
其特点是通过属性来选择元素，具体有以下5种形式：
1、E[attr] 表示存在attr属性即可; div[class]2、E[attr=val] 表示属性值完全等于val; div[class=mydemo]3、E[attr*=val] 表示的属性值里包含val字符并且在“任意”位置; div[class*=mydemo]4、E[attr^=val] 表示的属性值里包含val字符并且在“开始”位置; div[class^=mydemo]5、E[attr$=val] 表示的属性值里包含val字符并且在“结束”位置; div[class$=demos]<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 300px; height: 50px; border: 1px solid #000; margin: 20px auto; text-align: center; } /*有class属性的div*/ div[class] { background: yellow; } /*class为box1的div*/ div[class=box1] { color: white; background: black; } /*class值以aa开头的div*/ div[class^=aa] { background: green; } /*class的值包含x4的div*/ div[class*=x4] { background: blueviolet; } /*class的值以x3结尾的div*/ div[class$=x3] { background: lightsalmon; } </style></head><body><div class="box1">1</div><div class="aabox2">2</div><div class="bbbox3">3</div><div class="box4aa">4</div><div class="box5bb">5</div><div class="aabox6bb">6</div><div class="bbbox7aa">7</div><div>8</div></body></html>
伪类选择器
除了以前学过的:link、:active、:visited、:hover，CSS3又新增了其它的伪类选择器。
结构伪类
通过结构筛选元素.
常用：
E:first-child 第一个子元素E:last-child 最后一个子元素E:nth-child(n) 选择所有在其父元素中第n个位置的匹配E的子元素。如果不匹配则无效E:nth-last-child(n) 选择所有在其父元素中倒数第n个位置的匹配E的子元素，如果不匹配，则无效E:nth-of-type(n) 选择所有在其父元素中第n个位置的E元素E:nth-last-child 选择所有在其父元素中倒数第n个位置的E元素E:empty 选中没有任何子节点的E元素示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> ul { width: 400px; list-style: none; margin: auto; } li { width: 50px; height: 50px; border: 1px solid gray; float: left; margin-left: -1px; margin-top: -1px; text-align: center; line-height: 50px; } /*第一个li*/ li:first-child { background: red; } /*最后一个li*/ li:last-child { background: green; } /*奇数li*/ li:nth-child(odd) { background: blue; } /*偶数li*/ li:nth-child(even) { background: red; } /*3的倍数li*/ li:nth-child(3n) { color: white; background: black; } /*第一个到底三个li,n是从0开始，如果公式的结果值为负数，选取无效*/ li:nth-child(-1n+3) { background: yellow; } /*第11个li*/ li:nth-child(11){ background: blueviolet; } </style> <body> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <li>21</li> <li>22</li> <li>23</li> <li>24</li> <li>25</li> <li>26</li> <li>27</li> <li>28</li> <li>29</li> <li>30</li> <li>31</li> <li>32</li> <li>33</li> <li>34</li> <li>35</li> <li>36</li> <li>37</li> <li>38</li> <li>39</li> <li>40</li> <li>41</li> <li>42</li> <li>43</li> <li>44</li> <li>45</li> <li>46</li> <li>47</li> <li>48</li> <li>49</li> </ul> </body></html>
注意：n遵循线性变化，其取值0、1、2、3、4、… 但是当n<=0时，选取无效。
选中所有的奇数的li
li:nth-child(2n-1){
color: red;
}
选中所有的7 的倍数的li
li:nth-child(7n){
color: red;
}
选中前面五个
li:nth-child(-1n+5){
color: red;
}
选中后面五个
li:nth-last-child(-1n+5){
color: red;
}
所有的偶数
li:nth-child(even){
color:red
}
所有的奇数
li:nth-child(odd){
color:blue;
}
…….
nth-child和nth-of-type的区别
ele:nth-of-type(n)是指父元素下第n个ele元素，
而ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择失败。
同样的nth-last-child和nth-last-of-type的区别也一样。
示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> /*这里获取失败 因为父元素的第一个子元素并不是p标签*/ p:nth-child(1) { background: red; } /*这里可以获取到*/ p:nth-of-type(1){ background: pink; } </style> <body> <span>span</span> <p>第一个p标签</p> <div>div</div> <p>第二个p标签</p> </body></html>
目标伪类
E:target 结合锚点进行使用，处于当前锚点的元素会被选中；
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> section:target { color: red; font-size: 20px; } </style> <body> <nav> <ul> <li> <a href="#news">新闻</a> </li> <li> <a href="#technology">科技</a> </li> <li> <a href="#recreation">娱乐</a> </li> </ul> </nav> <section id="news"> 新闻 </section> <section id="technology"> 科技 </section> <section id="recreation"> 娱乐 </section> </body></html>
伪元素选择器
标志性符号（::）双冒号
E::before 在标签前插入内容E::after 在标签后插入内容E::first-letter 文本的第一个字母或字E::first-line 文本第一行E::selection 选中的文本示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> /*标签前面*/ p::before { content: "我叫 "; color: red; } /*标签后面*/ p::after { content: " 很高兴认识你"; color: cornflowerblue; } /*首个字母或文字*/ div::first-letter { font-size: 20px; color: red; } /*选中的文本*/ div::selection { color: blue; } </style> </head> <body> <p>喻志强</p> <div>my name is yzq,nice to meet you!</div> </body></html>
理解伪类和伪元素
伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的元素时，我们可以通过:hover来描述这个元素的状态。虽然它和普通的css类相似，可以为已有的元素添加样式，但是它只有处于dom树无法描述的状态下才能为元素添加样式，所以将其称为伪类。
伪元素用于创建一些不在文档树中的元素，并为其添加样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。
伪类是用单冒号来表示
伪元素是使用双冒号来表示
E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理。
颜色
新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度。
RGBA
rgba(255,0,0,0.1)；
R、G、B 取值范围0~255
Red、Green、Blue、Alpha即RGBA
HSLA
Hue、Saturation、Lightness、Alpha即HSLA
H 色调 取值范围0~360，0/360表示红色、120表示绿色、240表示蓝色
S 饱和度 取值范围0%~100%
L 亮度 取值范围0%~100%
A 透明度 取值范围0~1
关于透明度
- opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度；
- transparent 不可调节透明度，始终完全透明
- RGBA、HSLA可应用于所有使用颜色的地方。没有继承性
opacity
子盒子会继承父盒子的透明度
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: red; opacity: 0.4; } p{ width: 50px; height: 50px; margin: auto; background: blue; } </style> </head> <body> <div class="box"> <p></p> </div> </body></html>
transparent
完全透明
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background:red transparent; border: 1px solid red; } p{ width: 50px; height: 50px; margin: auto; background: blue; } </style> </head> <body> <div class="box"> <p></p> </div> </body></html>
RGBA
子盒子不会继承父盒子透明度
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background: rgba(255,36,64,0.2); } p{ width: 50px; height: 50px; margin: auto; background: blue; } </style> </head> <body> <div class="box"> <p></p> </div> </body></html>
文本
text-shadow
语法：text-shadow: h-shadow v-shadow blur color;
h-shadow 必需。水平阴影的位置。允许负值。正值向右 负值向左v-shadow 必需。垂直阴影的位置。允许负值。正值向下 负值向上blur 可选。模糊的距离。模糊度不能为负值 值越大越模糊color 可选。阴影的颜色。参阅 CSS 颜色值。示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> p{ font-size: 30px; font-weight: bold; text-shadow: 3px 6px 2px red; } </style> </head> <body> <p>yuzhiqiang</p> </body></html>
如果有多个阴影效果可以并列书写，用逗号隔开
示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> body{ background: lightgray; } p { color: white; font-size: 50px; font-weight: bold; text-shadow: -2px -3px 1px red,2px 2px 2px blue; } </style> </head> <body> <p>yuzhiqiang</p> </body></html>
盒模型
CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。盒模型的默认值是content-box
可以分成两种情况：
1. content-box:对象的实际宽度等于设置的width值和border、padding之和
2. border-box： 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .box1 { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; width: 100px; height: 100px; padding: 10px; margin: 10px; border: 5px solid red; } .box2 { width: 100px; height: 100px; padding: 10px; margin: 10px; border: 5px solid red; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> </body></html>
边框
边框圆角
border-radius 每个角可以设置两个值 ，x 值，y值
x值表示 水平半径 ，y值表示垂直半径
注意: 每个半径的四个值的顺序是：左上角，右上角，右下角，左下角。如果省略左下角，右上角是相同的。如果省略右下角，左上角是相同的。如果省略右上角，左上角是相同的。
/*单个属性 : 水平半径 垂直半径*/ border-top-left-radius: 60px 120px; border-top-right-radius: 60px 120px; border-bottom-left-radius: 60px 120px; border-bottom-right-radius: 60px 120px; /* 复合写法 border-raduis:水平半径/垂直半径*/ border-radius: 60px 60px 60px 60px/ 120px 120px 120px 120px; /*四个角的水平半径相同且垂直半径相同*/ /*border-radius: 60px/120px;*/ /* 四个角的半径都相同的话简写*/ /*border-radius: 60px;*/边框圆角的应用
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box{ width: 200px; height: 200px; border: 2px solid red; margin:20px auto; text-align: center; line-height: 200px; color:#ccc; font-size:50px; float: left; margin-left: 20px; } div:nth-child(1){ border-radius: 100px; } div:nth-child(2){ border-radius: 50%; } div:nth-child(3){ border-radius: 200px 0 0 0; } div:nth-child(4){ height:100px; line-height: 100px; border-radius: 100px/50px; } div:nth-child(5){ width: 100px; border-radius: 50%; } div:nth-child(6){ border-radius: 0 100px; } </style></head><body> <div class="box">1</div> <div class="box">2</div> <div class="box">3</div> <div class="box">4</div> <div class="box">5</div> <div class="box">6</div></body></html>
边框阴影
box-shadow
box-shadow 与 text/shadow 用法差不多
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
3、模糊度是不能为负值；
4、inset可以设置内阴影；
设置边框阴影不会改变盒子的大小，即不会影响其兄弟元素的布局。
可以设置多重边框阴影，实现更好的效果，增强立体感。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box{ width: 100px; height: 100px; background: gray; -webkit-box-shadow: 5px 5px 5px lightgray ; box-shadow: 5px 5px 5px lightgray ; } </style> </head> <body> <div class="box"></div> </body></html>
边框图片
border-image
border-image-source 用于指定要用于绘制边框的图像的位置border-image-slice 图像边界向内偏移border-image-width 图像边界的宽度border-image-outset 用于指定在边框外部绘制 border-image-area 的量border-image-repeat 用于设置图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded）。 border-image: url("images/border.png") 27/20px round<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .box { width: 500px; height: 400px; margin: 40px auto; -moz-border-image: url(../img/border_image_2.png) 20/27px stretch; -webkit-border-image: url(../img/border_image_2.png) 20/27px stretch; border-image: url(../img/border_image_2.png) 20/27px stretch; } </style> </head> <body> <div class="box"></div> </body></html>
背景
背景在CSS3中也得到很大程度的增强，比如背景图片尺寸、背景裁切区域、背景定位参照点、多重背景等。
背景图片
通过background-image属性添加背景图片。
不同的背景图像和图像用逗号隔开，所有的图片中显示在最顶端的为第一张。
背景尺寸
background-size:width,height 可以设置背景图片的宽度以及高度
用法：
background-size: 50% 100%; /*宽度是盒子的50% 高度100%*/background-size: 200px 100px; /*给固定值*/background-size: cover; /*自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。*/background-size: contain; /*会自动调整缩放比例，保证图片始终完整显示在背景区域。*/背景原点
background-origin(原点，起点)设置背景定位的原点，也就是控制背景是从哪个地方开始显示。
默认值为padding-box
border-box 以边框做为参考原点；padding-box 以内边距做为参考原点；content-box 以内容区做为参考点；示例：
background-origin: padding-box;
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 200px; height: 200px; padding: 20px; border: 10px solid red; background: url(../img/yixin.png) no-repeat; } </style> </head> <body> <div></div> </body></html>
background-origin: border-box;
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 200px; height: 200px; padding: 20px; border: 10px solid red; background: url(../img/yixin.png) no-repeat; background-origin: border-box; } </style> </head> <body> <div></div> </body></html>
background-origin: content-box;
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div { width: 200px; height: 200px; padding: 20px; border: 10px solid red; background: url(../img/yixin.png) no-repeat; background-origin: content-box; } </style> </head> <body> <div></div> </body></html>
背景裁剪
background-clip设置背景区域clip(裁切)
border-box 裁切边框以内为背景区域；padding-box 裁切内边距以内为背景区域；content-box 裁切内容区做为背景区域；多背景
逗号分隔可以设置多背景，可用于自适应布局
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>背景</title> <style> html,body{ margin: 0; padding: 0; height: 100%; } div { width: 100%; height: 100%; background: url(../img/yixin.png) center no-repeat,url(../img/34.jpg) center no-repeat,; } </style> </head> <body> <div> </div> </body></html>
渐变
CSS3 渐变（gradients）可以让你在两个或多个指定的颜色之间显示平稳的过渡。
通过使用 CSS3 渐变（gradients）可以减少下载的事件和宽带的使用。此外，渐变效果的元素在放大时看起来效果更好，因为渐变（gradient）是由浏览器生成的。
CSS3 定义了两种类型的渐变（gradients）：
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
线性渐变（Linear Gradients）
沿着某条直线朝一个方向产生渐变效果。
语法：background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction表示方向，值可以是left、top、right、bottom。也可以是度数。
后面的就是起始颜色和结束颜色，可以设置多个颜色
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 1000px; height: 80px; margin: 20px auto; border: 1px solid #000; } /*不写方向 默认向下渐变*/ div:nth-of-type(1) { background: linear-gradient(red, blue); } /*向右渐变*/ div:nth-of-type(2) { background: linear-gradient(145deg, red, blue, yellow, green); } /*145度渐变*/ div:nth-of-type(3) { background: linear-gradient(145deg, red, blue, yellow, green); } /*向下渐变 指定颜色比例 颜色块 无过渡效果*/ div:nth-of-type(4) { background: linear-gradient(to bottom, red 0%, red 20%, orange 20%, orange 40%, yellow 40%, yellow 60%, green 100%); } /*225度渐变 指定颜色比例 有过渡效果*/ div:nth-of-type(5) { background: linear-gradient(225deg, red 0%, orange 20%, yellow 40%, green 60%, green 100%); } /*设置背景大小 剩下的平铺*/ div:nth-of-type(6) { background: linear-gradient(45deg, white 0%, white 25%, black 25%, black 50%, white 50%, white 75%, black 75%, black 100%); background-size: 80px 100%; } /*设置重复的渐变*/ div:nth-of-type(7) { background: repeating-linear-gradient(45deg, black 0%, black 5%, white 5%, white 10%); } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body></html>
径向渐变
radial-gradient径向渐变指从一个中心点开始沿着四周产生渐变效果
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> div { width: 200px; height: 200px; border: 1px solid #000; margin: 20px auto; display: inline-block; } /*默认中心 均匀渐变*/ div:nth-child(1) { background: radial-gradient(red, green, blue); } /*辐射半径 中心点 颜色比例*/ div:nth-child(2) { background: radial-gradient(100px at 50px 50px, red 5%, green 15%, blue 60%); } /*按比例渐变*/ div:nth-child(3) { background: radial-gradient( red 20%, yellow 65%, green 100%); } /*指定渐变范围 中心点*/ div:nth-child(4) { background: radial-gradient( at 60% 55%, blue, green, yellow, black); } /*水平范围100ox 垂直范围50px 椭圆渐变*/ div:nth-child(5) { background: radial-gradient(100px 50px, blue, green, yellow, black); } /*重复惊现渐变*/ div:nth-child(6) { background: repeating-radial-gradient(red, yellow 10%, green 15%); } </style> </head> <body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </body></html>
注意：渐变是属于background-image的而不是background-color
过渡(transition)
过渡是CSS3中具有颠覆性的特征之一，可以实现元素不同状态间的平滑过渡（补间动画），经常用来制作动画效果。
之前我们用jquery来实现动画效果，但是jquery并不能改变颜色。现在我们利用css3就可以方便的实现动画效果
transition 简写属性，用于在一个属性中设置四个过渡属性。transition-property 规定应用过渡的 CSS 属性的名称。transition-duration 定义过渡效果花费的时间。默认是 0。linear(匀速) ease-in (加速)transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 transition-delay 规定过渡效果何时开始。默认是 0。示例：
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3 过渡</title> <style> div { width: 200px; height: 65px; background: red; transition: all 1s; left: 0; position: absolute; } div:hover { background: rgba(232, 102, 8, 0.3); width: 400px; height: 100px; left: 50px; } </style> </head> <body> <div> </div> </body></html>
转换
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
2D转换
转换属性
transform 转换
transform-origin 设置或检索对象以某个原点进行转换。
方法：
- translate 位移
- rotate 旋转
- scale 缩放
- skew 倾斜
示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { width: 100px; height: 100px; background: red; transition: all 2s ease; } /*对于多个变换效果 中间用空格隔开即可*/ div:hover { transform: translate(100px, 50px) rotate(45deg) scale(1.2) skew(10deg); } </style> </head> <body> <div></div> </body></html>
3D转换
转换属性：
transform 向元素应用 2D 或 3D 转换。 transform-origin 允许你改变被转换元素的位置。 transform-style 规定被嵌套元素如何在 3D 空间中显示。 perspective 规定 3D 元素的透视效果。 perspective-origin 规定 3D 元素的底部位置。 backface-visibility 定义元素在不面对屏幕时是否可见。perspective 一般设置在父元素上，值越小3D效果越明显。一般值为子元素的宽度比较合适。
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body { perspective: 100px; } div { width: 100px; margin: 50px auto; height: 100px; background: red; transition: all 2s; } div:hover { transform: rotateY(30deg); } </style> </head> <body> <div> </div> </body></html>
动画
动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。
必要元素：
通过@keyframes指定动画序列；
通过百分比将动画序列分割成多个节点；
在各节点中分别定义各属性
通过animation将动画应用于相应元素；
animation-name 设置动画序列名称animation-duration 动画持续时间animation-delay 动画延时时间animation-timing-function 动画执行速度，linear、ease等animation-play-state 动画播放状态，running、paused等animation-direction 动画执行方向 normal 正常 ， alternate： 反向animation-fill-mode 动画执行完毕后状态，forwards：保持动画结束后的状态 backwards回到动画执行前的状态animation-iteration-count 动画执行次数，inifinate：无数次steps(60) 表示动画分成60步完成示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { width: 100px; height: 100px; background: red; animation-name: move; animation-duration: 4s; animation-timing-function: ease; animation-delay: 1s; animation-fill-mode: forwards; /*简写*/ /*animation: move 4s linear 1000ms forwards;*/ /*动画名称 执行时间 执行速度 延时时间 动画执行完毕状态*/ text-align: center; line-height: 100px; margin: 50px; color: white; } /*定义动画*/ @keyframes move { 0% { background: red; border-radius: 10px; transform: translate(0px, 0px); } 25% { background: blue; border-radius: 0px; transform: translate(200px, 0px) rotate(120deg); } 50% { background: greenyellow; border-radius: 20px; transform: translate(200px, 200px) rotate(180deg); } 75% { background: orange; border-radius: 5px; transform: translate(0, 200px) rotate(240deg); } 100% { background: pink; border-radius: 0px; transform: translate(0px, 0px) rotate(300deg); } } </style> </head> <body> <div> 动画 </div> </body></html>
弹性盒子 （ Flexible Box 或 flexbox）
弹性盒子是 CSS3 的一种新的布局模式。也叫伸缩盒。是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。类似与Android中线性布局中的权重（weight）。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。
首先，父盒子必须指定为弹性盒子： display：flex
flex 复合属性。设置或检索伸缩盒对象的子元素如何分配空间。flex-grow 设置或检索弹性盒的扩展比率。flex-shrink 设置或检索弹性盒的收缩比率flex-basis 设置或检索弹性盒伸缩基准值。flex-flow 复合属性。设置或检索伸缩盒对象的子元素排列方式。flex-direction 设置或检索伸缩盒对象的子元素在父容器中的位置。flex-wrap 设置或检索伸缩盒对象的子元素超出父容器时是否换行。align-content 设置或检索弹性盒堆叠伸缩行的对齐方式。align-items 设置或检索弹性盒子元素在侧轴（纵轴）方向上的对齐方式。align-self 设置或检索弹性盒子元素自身在侧轴（纵轴）方向上的对齐方式。justify-content 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。order 设置或检索伸缩盒对象的子元素出現的順序。主轴和侧轴
主轴和侧轴实际上是控制弹性盒子中元素的排列方式。
主轴默认是水平从左向右的
恻轴默认是垂直重上到下的
容器的属性：
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction
设置主轴方向
row：默认的主轴方向，即横向从左到右排列（左对齐）。
row-reverse：对齐方式与row相反。从右到左排列（右对齐）
column：主轴与块轴方向作为默认的书写模式。即纵向从上往下排列（顶对齐）。
column-reverse：对齐方式与column相反。
示例：
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../jquery/jquery-3.2.0.js"></script> <style type="text/css"> body { background: lightgray; } section { background: white; } ul { display: flex; list-style: none; } ul li { width: 100px; height: 100px; background: red; text-align: center; line-height: 100px; color: white; font-weight: bold; margin: 5px; } .row { flex-direction: row; } .rowRevs { flex-direction: row-reverse; } .col { flex-direction: column; } .colRevs { flex-direction: column-reverse; } </style> <script> $(function() { $("button").eq(0).on("click", function() { $("ul").prop("class", "row") }) $("button").eq(1).on("click", function() { $("ul").prop("class", "rowRevs") }) $("button").eq(2).on("click", function() { $("ul").prop("class", "col") }) $("button").eq(3).on("click", function() { $("ul").prop("class", "colRevs") }) }) </script> </head> <body> <button>row</button> <button>row-reverse</button> <button>column</button> <button>column-reverse</button> <section> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> </body></html>
justify-content
主轴对齐方式
flex-start：主轴起始位置对齐
flex-end：主轴结束位置对齐
center：主轴中间位置对齐
space-between：在父盒子中平分
space-around：主轴两端对齐 ，平分
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; list-style: none; } body { background-color: #eee; font-family: "Microsoft Yahei"; } section { width: 800px; margin: 10px auto; } section h3 { font-weight: normal; } ul { border: 1px solid #999; background-color: #fff; display: flex; } ul li { width: 100px; height: 100px; background: pink; margin: 5px; } section:nth-child(1) ul { /* 主轴对齐方式：从主轴开始的方向对齐*/ justify-content: flex-start; } section:nth-child(2) ul { /* 主轴对齐方式：从主轴结束的方向对齐*/ justify-content: flex-end; } section:nth-child(3) ul { /* 主轴对齐方式：居中对齐*/ justify-content: center; } section:nth-child(4) ul { /* 主轴对齐方式：在父盒子中平分*/ justify-content: space-around; } section:nth-child(5) ul { /* 主轴对齐方式：两端对齐 平分*/ justify-content: space-between; } </style> </head> <body> <section> <h3>主轴的对齐方式：justify-content:flex-start</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>主轴的对齐方式：justify-content:flex-end</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>主轴的对齐方式：justify-content:center</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>主轴的对齐方式：justify-content:space-round</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>主轴的对齐方式：justify-content:space-bettwen</h3> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </section> </body></html>
align-items
侧轴的对齐方式
flex-start 起点对齐
flex-end 终点对齐
center 中间对齐
stretch 拉伸
示例：
<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery-3.2.0.js"></script> <style> * { margin: 0; padding: 0; list-style: none; } body { background-color: #eee; font-family: "Microsoft Yahei"; } section { width: 500px; margin: auto; } section h3 { font-size: 18px; font-weight: normal; } ul { border: 1px solid #999; background-color: #fff; display: flex; height: 120px; } ul li { width: 80px; height: 80px; background: pink; margin: 5px; } section:nth-child(1) ul { /* 侧轴对齐方式 ：从侧轴开始的方向对齐*/ align-items: flex-start; } section:nth-child(2) ul { /* 侧轴对齐方式 ：从侧轴结束的方向对齐*/ align-items: flex-end; } section:nth-child(3) ul { /* 侧轴对齐方式 ：居中*/ align-items: center; } section:nth-child(4) ul { /* 侧轴对齐方式 ：基线 默认同flex-start*/ align-items: baseline; } section:nth-child(5) ul { /* 侧轴对齐方式 ：拉伸*/ align-items: stretch; } section:nth-child(5) ul li { height: auto; } </style> </head> <body> <section> <h3>侧轴的对齐方式:align-items ：flex-start</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>侧轴的对齐方式：align-items:flex-end</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>侧轴的对齐方式：align-items:center</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>侧轴的对齐方式：align-itmes:baseline</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> <section> <h3>侧轴的对齐方式：align-itmes: stretch</h3> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </section> </body></html>
flex-wrap
容器里的元素是否换行
nowrap：flex容器为单行。该情况下flex子项可能会溢出容器
wrap：flex容器为多行。该情况下flex子项溢出的部分会被放置到新行，子项内部会发生断行
wrap-reverse：反转 wrap 排列。
flex-flow
flex-flow是flex-direction、flex-wrap的简写形式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> ul { display: flex; width: 200px; list-style: none; flex-flow: row wrap;/*同时设置主轴方向及是否多行*/ border: 1px solid black; } li { width: 80px; background: red; height: 80px; margin: 5px; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body></html>
align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
flex-start：与交叉轴的起点对齐。flex-end：与交叉轴的终点对齐。center：与交叉轴的中点对齐。space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。stretch（默认值）：轴线占满整个交叉轴。项目的属性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order（不常用）
定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow
定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0px; padding: 0px; } ul { display: flex; width: 500px; list-style: none; border: 1px solid black; margin:20px auto; } li { width: 80px; background: red; height: 80px; margin: 5px; } li:nth-child(2) { flex-grow: 2; } li:nth-child(3) { flex-grow: 3; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body></html>
flex-shrink
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0px; padding: 0px; } ul { display: flex; width:220px; list-style: none; border: 1px solid black; margin:20px auto; } li { width: 80px; background: red; height: 80px; margin: 5px; } li:nth-child(1){ flex-shrink: 0; } li:nth-child(2) { flex-shrink: 1; } li:nth-child(3) { flex-shrink: 4; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body></html>
flex-basis
定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0px; padding: 0px; } ul { display: flex; width:500px; list-style: none; border: 1px solid black; margin:20px auto; } li { width: 80px; background: red; height: 80px; margin: 5px; } li:nth-child(1){ flex-shrink: 0; } li:nth-child(2) { flex-basis: 120px; } li:nth-child(3) { flex-grow: 3; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body></html>
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0px; padding: 0px; } ul { display: flex; width:500px; height: 300px; list-style: none; border: 1px solid black; margin:20px auto; align-items: flex-end; } li { width: 80px; background: red; height: 80px; margin: 5px; } li:nth-child(1){ align-self: flex-start; } li:nth-child(2) { align-self: center; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body></html>
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> * { margin: 0px; padding: 0px; } ul { display: flex; width:500px; height: 300px; list-style: none; border: 1px solid black; margin:20px auto; } li { width: 80px; background: red; height: 80px; margin: 5px; } li:nth-child(1){ flex: 0 1 50px; } li:nth-child(2) { flex: 2; } li:nth-child(3){ flex: 1; } </style> </head> <body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> </body></html>
web字体
开发人员可以为自已的网页指定特殊的字体，无需考虑用户电脑上是否安装了此特殊字体，从此把特殊字体处理成图片的时代便成为了过去。
支持程度比较好，甚至IE低版本浏览器也能支持。
字体格式
TureType(.ttf)格式
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+；
OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+；
Web Open Font Format(.woff)格式
woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离，支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+；
Embedded Open Type(.eot)格式
.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+；
SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式，支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+；
由于浏览器对字体格式的支持不一样，我们就需要为不同的浏览器准备不同格式的字体，通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式间的区别差异。
有字库在线生成字体
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link href='http://cdn.webfont.youziku.com/webfonts/nomal/101138/45803/58eb4900f629d817a412b4a7.css' rel='stylesheet' type='text/css' /> </head> <style type="text/css"> .css9fc3e728018b12{ font-size: 55px; } </style> <body> <div class="css9fc3e728018b12" >喻志强</div> </body></html>
字体图标
把网页常用的一些小的图标，借助工具帮我们生成一个字体包，然后就可以像使用文字一样使用图标了。
优点：
1、将所有图标打包成字体库，减少请求；
2、具有矢量性，可保证清晰度；
3、使用灵活，便于维护；
阿里巴巴图标
bootstrap图标库
如果你觉得本文对你有帮助，麻烦动动手指顶一下，算是对本文的一个认可。也可以关注我web前端的博客专栏，我会不定期的更新，如果文中有什么错误的地方，还望指正，谢谢！
- 从零开始，学习web前端之CSS3
- 从零开始，学习web前端之HTML基础
- 从零开始，学习web前端之css基础
- 从零开始，学习web前端之js基础
- 从零开始，学习web前端之js特效
- 从零开始，学习web前端之jQuery
- 从零开始，学习web前端之js高级
- 从零开始，学习web前端之HTML基础
- 从零开始，学习web前端之DOM和BOM
- 从零开始学习WEB前端之数据交互（Ajax）
- web前端之html从零开始（二）----a标签学习，强化
- 从零开始的web前端
- 前端学习之路css3(01)-基础知识
- 前端学习之路css3(02)-基础知识
- 前端学习之路css3(03)-基础知识
- web前端-CSS3基础
- web前端之html从零开始（一）-----第一个html
- WEB前端学习之路
- Ubuntu/UbuntuKylin平台下源码编译Ambari 2.4（含较多问题解决方案）
- android app还原出厂设置
- check then act and read modify write
- linux inotifywait
- smali 学习笔记 1）
- 从零开始，学习web前端之CSS3
- cat <<EOF与cat <<-EOF的区别
- 分布式锁
- 图像处理－线性滤波－3 高斯滤波器
- 树莓派2 Rapsbian 升级后不能正确识别USB接口的网卡和鼠标键盘
- gcc+nodejs+python+mongdb+django
- 深入研究java.lang.ThreadLocal类
- Mysql 游标嵌套
- KCP简介
