CSS回顾
在学CSS3之前首先巩固下CSS的基础知识。
1.CSS框模型
举例子：
#box { width: 70px; margin: 10px; padding: 5px; }
这个代码将出现的效果是：
2.CSS定位与浮动
1）定位：
| 属性 | 描述 |
| position | 把元素放到一个静态的(static：元素框正常生成)，相对的(relative：元素框偏移某个距离[相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置])，绝对的(absolute：元素框从文档流完全删除，并相对于其包含块定位)，或固定(fixed：元素框的表现类似于absolute,不过其包含块的视窗本身)的位置中 |
| top,right,bottom,left | 定义一个元素的上，右，下，左外边距边界与其包含块上，右，下，左边界之间的距离。注：如果position的属性值为"static"，则不会有任何效果。 |
| overflow | 设置当元素内容溢出其区域发生的事。overflow: scroll(显示滚动条)|hidden（隐藏）|auto（浏览器自动处理） |
| clip | 设置元素的形状，元素被剪入这个形状之中 rect (top, right, bottom, left) |
| vertical-align | 设置元素的垂直对齐方式。如：vertical-align:text-top;把元素的顶端与父元素字体的顶端对齐
|
| z-index | 设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面(1>0>-1) 注：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！ |
看下对这些知识点的练习：
效果：
代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 <style type="text/css"> 7 h2.pos_left 8 { 9 position:relative; 10 left:-20px; 11 top:-20px; 12 } 13 h2.pos_right 14 { 15 position:relative; 16 left:20px; 17 top:20px; 18 } 19 h2.pos_absleft 20 { 21 position:absolute; 22 left:280px; 23 top:30px; 24 color:red 25 } 26 h2.pos_absright 27 { 28 position:absolute; 29 left:-10px; 30 top:90px; 31 color:red 32 } 33 h2.one 34 { 35 position:fixed; 36 left:15px; 37 top:235px; 38 } 39 h2.two 40 { 41 position:fixed; 42 top:30px; 43 right:15px; 44 } 45 #over 46 { 47 background-color:#00FFFF; 48 width:150px; 49 height:150px; 50 overflow: auto 51 } 52 </style> 53 </head> 54 55 <body> 56 <p>1.绝对定位和相对定位的区别： 57 </p> 58 <h2>这是正常位置</h2> 59 <h2 class="pos_left">相对定位1</h2> 60 <h2 class="pos_right">相对定位2</h2> 61 <h2 class="pos_absleft">绝对定位的移动1</h2> 62 <h2 class="pos_absright">绝对定位的移动2</h2> 63 </body> 64 <hr /> 65 <p>2.固定定位： 66 </p> 67 <h2 class="one">固定定位测试1。</h2> 68 <h2 class="two">固定定位测试2。</h2> 69 <p> </p> 70 <hr /> 71 <p>3.overflow的使用：overflow: scroll(显示滚动条)|hidden（隐藏）|auto（浏览器自动处理） 72 </p> 73 <div id="over"> 74 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。 75 </div> 76 </html>
2）浮动：
W3School上讲解的浮动较简单，不过也有些不太好理解。借鉴http://www.jb51.net/css/67471.html 这篇文章，对浮动有了点理解。
浮动：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
我们先来看下高度塌陷的现象：
代码为：
<style type="text/css"> .news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } </style> </head> <body> <p>①因为浮动表现出高度为0（高度塌陷）的现象： </p> <div class="news" width="50px"> <img src="XiaoKeAi.jpg" /> <p>这是文本</p> <p>这是文本</p> <p>这是文本</p> </div> </body>
然后看下清理浮动的方法：
①添加额外标签的效果：
代码：
<style type="text/css"> .clear { clear: both; } </style> </head> <body> <p>①添加额外标签消除高度塌陷的现象： </p> <div class="news" width="50px"> <img src="XiaoKeAi.jpg" /> <p>这是文本</p> <p>这是文本</p> <p>这是文本</p> <div class="clear"></div> </div> </body>
②使用 br标签和其自身的 html属性 (这个方法有些小众，br 有 clear=“all | left | right |
none” 属性) 【效果如上述方法一样，亲测通过】
代码：
<body> <p>②使用br标签和其自身的 html属性消除高度塌陷的现象： </p> <div class="news" width="50px"> <img src="XiaoKeAi.jpg" /> <p>这是文本</p> <p>这是文本</p> <p>这是文本</p> <br clear="all" /> </div>
</body>
③父元素设置 overflow：hidden
通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1(试了下，这里可以不需要的)；【效果如上述方法一样，亲测通过】
代码：
<body> <p>③父元素设置 overflow：hidden 消除高度塌陷的现象： </p> <div class="news" width="50px" style="overflow:hidden;*zoom:1;" > <img src="XiaoKeAi.jpg" /> <p>这是文本</p> <p>这是文本</p> <p>这是文本</p> </div> </body>
④父元素设置 overflow：auto 属性
将上述的style="overflow:hidden;" 这行代码改为style="overflow:auto;"
⑤父元素也设置浮动
效果有点不一样：
代码只在这里变动了：
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
⑥父元素设置display:table
效果跟上述⑤是一样一样滴~~
代码只在这里变动了：
.news {
background-color: gray;
border: solid 1px black;
display:table;
}
⑦使用:after伪元素【注：after是伪元素，不是伪类】（听说这种方法是最好滴~~）
效果跟方法①是一样的~
增加了这个代码：
.news:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
3.CSS选择器
元素选择器，选择器分组，类选择器，ID选择器，属性选择器，后代选择器，子元素选择器，相邻兄弟选择器这些知识点已经在W3School回顾温习了下，不记录了。主要学习下CSS 伪类，CSS伪元素。
1）CSS伪类
①锚伪类
a:link{color: #FF0000} /* 未访问的链接 */a:visited{color: #00FF00} /* 已访问的链接 */a:hover{color: #FF00FF} /* 鼠标移动到链接上 */a:active{color: #0000FF} /* 选定的链接 */
注：a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的；a:active 必须被置于 a:hover 之后，才是有效的。伪类名称对大小写不敏感。
②:focus伪类
向拥有键盘输入焦点的元素添加样式。
③:first-child伪类
:first-child 伪类来选择元素的第一个子元素，特定伪类很容易遭到误解，最常见的错误是认为 p:first-child 之类的选择器会选择 p 元素的第一个子元素（我就是这样错误的认为( ╯□╰ )） 实际上却是选择器匹配作为任何元素的第一个子元素的 p 元素。
④:lang伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。
综合练习下： 效果如下
代码：
1 <html> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <head> 4 <style type="text/css"> 5 a:link {color: #FF0000} 6 a:visited {color: #00FF00} 7 a:hover {color: #FF00FF} 8 a:active {color: #0000FF} 9 input:focus 10 { 11 background-color:yellow; 12 } 13 p > i:first-child { 14 font-weight:bold; 15 } 16 q:lang(no) 17 { 18 quotes: "~" "~" 19 } 20 </style> 21 </head> 22 23 <body> 24 <p>1.锚伪类的应用：<br /> 25 <b><a href="/index.html" target="_blank">这是一个链接。</a></b> 26 </p> 27 <p>2.focus伪类的应用：<br /> 28 First name: <input type="text" name="fname" /> 29 </p> 30 <p>3.first-child伪类的应用：<br /> 31 <p>some <i>text</i>. some <i>text</i>.</p> 32 <p>some <i>text</i>. some <i>text</i>.</p> 33 </p> 34 <p>4. lang 伪类的应用：<br /> 35 <p>文字<q lang="no">段落中的引用的文字</q>文字</p> 36 </p> 37 </body> 38 </html>
2）CSS伪元素
①:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。"first-line" 伪元素只能用于块级元素。
②:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式。
③:before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
④:after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
综合练习下：效果如下
代码：
1 <html> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 3 <head> 4 <style type="text/css"> 5 p:first-line 6 { 7 color: #ff0000; 8 font-variant: small-caps 9 } 10 h5:first-letter 11 { 12 color: #ff0000; 13 font-size:xx-large 14 } 15 h3:before 16 { 17 content:"台词："; 18 } 19 h4:after 20 { 21 content:"- 台词"; 22 } 23 </style> 24 </head> 25 26 <body> 27 1.first-line 伪元素的应用：<br /> 28 <p> 29 You can use the :first-line pseudo-element to add a special effect to the first line of a text! 30 </p> 31 2.first-letter 伪元素的应用：<br /> 32 <h5> 33 You can use the :first-line pseudo-element to add a special effect to the first line of a text! 34 </h5> 35 3.:before 伪元素的应用：<br /> 36 <h3>我是唐老鸭。</h3> 37 <h3>我住在 Duckburg。</h3> 38 39 4.:after伪元素的应用：<br /> 40 <h4>我是唐老鸭。</h4> 41 <h4>我住在 Duckburg。</h4> 42 </body> 43 </html>
小结下：伪类和伪元素有什么区别呢？做的时候就在想。。。又发现好文章一枚 http://m.blog.csdn.net/blog/zhuizhuziwo/7897837
【伪类：作用对象是整个元素 ；伪元素：作用于元素的一部分】
CSS3学习
CSS3完全向后兼容，因此不必改变现有的设计。CSS3被划分为模块，最重要的CSS3模块包括：
1）选择器；2）框模型； 3）背景和边框；4）文本效果；5）2D/3D转换；6）动画；7）多列布局；8）用户界面
下面学习其中的一些模块：
1.背景和边框
1）CSS3背景
CSS3包含多个新的背景属性，下面我们看下这三个属性
| 属性 | 描述 |
| background-size | 绘制背景图片的尺寸，可以以像素或百分比（相对于父元素的宽度和高度）规定尺寸 |
| background-origin | 规定背景图片的定位区域，可以放置于 content-box、padding-box 或 border-box 区域（这些区域的分布见附图1） |
| background-clip | 规定背景的绘制区域，语法：background-clip: border-box|padding-box|content-box; |
2）CSS3边框
通过 CSS3能够创建圆角边框，向矩形添加阴影，使用图片来绘制边框。学习下实现这些效果的这三个属性
| 属性 | 描述 |
| border-image | 设置所有border-image-*属性的简写属性，看了W3school的介绍觉得有些还没弄懂，再认真看了http://www.jb51.net/css/27855.html和http://www.jb51.net/css/38358.html这两篇文章。 |
| border-radius | 设置所有四个 border-*-radius 属性的简写属性。 |
| border-shadow | 向方框添加一个或多个阴影，语法box-shadow: h-shadow v-shadow blur spread color inset；说明：h-shadow 水平阴影的位置，允许负值。v-shadow 垂直阴影的位置，允许负值。blur 模糊距离。spread 阴影的尺寸。color 阴影的颜色。inset 将外部阴影改为内部阴影。 |
附图1：
看个综合的练习：
效果：
代码：
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8" /> 4 <head> 5 <style type="text/css"> 6 #div1 7 { 8 background:url(XiaoKeAi.jpg); 9 background-size:100px 180px; 10 background-repeat:no-repeat; 11 padding-top:180px; 12 } 13 #div3 14 { 15 border:1px solid black; 16 width:200px; 17 height:200px; 18 padding:50px; 19 background:url(XiaoKeAi.jpg); 20 background-repeat:no-repeat; 21 background-position:left; 22 background-origin:border-box; 23 } 24 #div4 25 { 26 border:1px solid black; 27 width:200px; 28 height:200px; 29 padding:50px; 30 background:url(XiaoKeAi.jpg); 31 background-repeat:no-repeat; 32 background-position:left; 33 background-origin:content-box; 34 } 35 #div5 36 { 37 width:200px; 38 height:200px; 39 padding:50px; 40 background-color:yellow; 41 background-clip:border-box; 42 border:2px solid #92b901; 43 } 44 #div6 45 { 46 width:200px; 47 height:200px; 48 padding:50px; 49 background-color:yellow; 50 background-clip:content-box; 51 border:2px solid #92b901; 52 } 53 #div7 54 { 55 width:250px; 56 height:100px; 57 background-color:#ff9900; 58 -moz-box-shadow: 10px 10px 5px #888888; /* 老的 Firefox */ 59 box-shadow: 10px 10px 5px #888888; 60 } 61 #div8 62 { 63 text-align:center; 64 border:2px solid #a1a1a1; 65 padding:10px 40px; 66 background:#dddddd; 67 width:250px; 68 border-radius:25px; 69 -moz-border-radius:25px; /* 老的 Firefox */ 70 } 71 #div9 72 { 73 border:15px solid transparent; 74 width:250px; 75 padding:10px 20px; 76 -moz-border-image:url(border.jpg) 30 30 round; /* Old Firefox */ 77 -webkit-border-image:url(border.jpg) 30 30 round; /* Safari and Chrome */ 78 -o-border-image:url(border.jpg) 30 30 round; /* Opera */ 79 border-image:url(border.jpg) 30 30 round; 80 } 81 #div10 82 { 83 border:15px solid transparent; 84 width:250px; 85 padding:10px 20px; 86 -moz-border-image:url(border.jpg) 30 30 stretch; /* Old Firefox */ 87 -webkit-border-image:url(border.jpg) 30 30 stretch; /* Safari and Chrome */ 88 -o-border-image:url(border.jpg) 30 30 stretch; /* Opera */ 89 border-image:url(border.jpg) 30 30 stretch; 90 } 91 </style> 92 </head> 93 <body> 94 <table> 95 <tr width="500px"> 96 <th width="250px"> 97 <p>1，看下background-size的效果:</p> 98 <div id=div1>拉伸的背景图片</div> 99 </th> 100 <th width="250px"> 101 <p> </p> 102 <div id=div2>原始图片：<img src="XiaoKeAi.jpg" width="200" height="200" alt="小可爱"></div> 103 </th> 104 </tr> 105 106 <tr width="500px"> 107 <th > 108 <p>2，看下background-origin的效果：</p> 109 <p>background-origin:border-box:</p> 110 <div id="div3"> 111 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 112 </div> 113 </th> 114 115 <th> 116 <p> </p> 117 <p>background-origin:content-box:</p> 118 <div id="div4"> 119 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 120 </div> 121 </th> 122 123 </tr> 124 125 <tr width="500px"> 126 <th> 127 <p>3，看background-clip的效果：</p> 128 <p>background-clip:border-box:</p> 129 <div id="div5"> 130 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 131 </div> 132 </th> 133 <th> 134 <p> </p> 135 <p>background-clip:content-box:</p> 136 <div id="div6"> 137 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 138 </div> 139 </th> 140 </tr> 141 <tr width="500px"> 142 <th> 143 <p>4，看CSS3边框属性的圆角和阴影效果：</p> 144 <p>background-clip:border-box:</p> 145 <div id="div7"> 146 </div> 147 </th> 148 <th> 149 <p> </p> 150 <p>background-clip:content-box:</p> 151 <div id="div8"> 152 border-radius 属性允许您向元素添加圆角。 153 </div> 154 </th> 155 </tr> 156 <tr width="500px"> 157 <th> 158 <p>5，看CSS3边框图片效果：</p> 159 <p>图片铺满整个边框:</p> 160 <div id="div9"> 在这里，图片铺满整个边框。 161 </div> 162 </th> 163 <th> 164 <p> </p> 165 <p>图片被拉伸以填充该区域:</p> 166 <div id="div10"> 167 在这里，图片被拉伸以填充该区域。 168 </div> 169 </th> 170 </tr> 171 </body> 172 </html>
2.文本效果和字体应用
1）文本效果
新的文本属性挺多，这里介绍下text-shadow和text-wrap
| 属性 | 描述 |
| text-shadow | 向文本设置阴影，语法：text-shadow: h-shadow v-shadow blur color; |
| word-wrap | 允许长单词换行到下一行，语法：word-wrap: normal|break-word; normal 表示只在允许的断字点换行（浏览器保持默认处理）。break-word 在长单词或 URL 地址内部进行换行。 |
2）CSS3字体
在CSS3之前，Web设计师必须使用已在用户计算机上安装的字体。通过CSS3，Web设计师可以使用任意字体（将该字体存放到web服务器上，它会在需要时自动下载到用户的计算机上）
介绍下 @font-face 规则中定义的所有字体描述符：
①font-family 规定字体的名称； ② src 定义字体文件的 URL； ③font-stretch 定义如何拉伸字体 ④font-style 定义字体的样式； ⑤font-weight 定义字体的粗细 ；⑥unicode-range 定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。
看下综合的练习：
代码：
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8" /> 4 <head> 5 <style> 6 h1 7 { 8 text-shadow: 5px 5px 5px #FF0000; 9 } 10 p.test 11 { 12 width:11em; 13 border:4px solid #000000; 14 } 15 p.test1 16 { 17 width:11em; 18 border:4px solid #000000; 19 word-wrap:break-word; 20 } 21 @font-face 22 { 23 font-family: myFirstFont; 24 src: url(‘Sansation_Regular.ttf‘) 25 ,url(‘Sansation_Regular.eot‘); /* IE9+ */ 26 } 27 @font-face 28 { 29 font-family: myFirstFont; 30 src: url(‘Sansation_Regular.ttf‘); /* IE9+ */ 31 font-weight:bold; /* 为了使字体变粗，须为粗体文本添加另一个包含描述符的 @font-face：可是为毛我这里没管用，RP问题？ */ 32 } 33 #div1 34 { 35 font-family:myFirstFont; 36 } 37 </style> 38 </head> 39 <body> 40 41 <h1>文本阴影效果！</h1> 42 <p class="test">没有换行的效果 This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p> 43 <p class="test1">换行的效果 This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.</p> 44 <div id="div1"> 45 字体的应用： 46 With <b>CSS3</b>, websites can finally use fonts other than the pre-selected "web-safe" fonts. This 47 </div> 48 <p><b>注释：</b>Internet Explorer 9+ 支持新的 @font-face 规则。Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。</p> 49 </body> 50 </html>
3.2D转换
在这一小节中，我们将学到2D转换的几种方法
| 函数 | 描述 |
| translate(x,y) | 定义 2D 转换，沿着 X 和 Y 轴移动元素。扩展translateX(n)和translateY(n)，意思分别是沿着x,y轴移动元素 |
| scale(x,y) | 定义 2D 缩放转换，改变元素的宽度和高度。扩展scaleX(n)，scaleY(n) |
| rotate(angle) | 定义 2D 旋转，在参数中规定角度。 |
| skew(x-angle,y-angle) | 定义 2D 倾斜转换，沿着 X 和 Y 轴。扩展skewX(angle)，skewY(angle) |
| matrix(n,n,n,n,n,n) | 定义 2D 转换，使用六个值的矩阵。 |
看下综合练习的效果：
代码：
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8" /> 4 <head> 5 <style> 6 div 7 { 8 width:100px; 9 height:105px; 10 background-color:yellow; 11 border:1px solid black; 12 } 13 div#div1 14 { 15 transform:translate(100px,10px); 16 17 } 18 div#div2 19 { 20 /* Rotate div */ 21 transform:rotate(30deg); 22 float:left; 23 } 24 div#div3 25 { 26 margin:100px;/*注意这里的运用，这似乎可以看出基点所在*/ 27 transform:scale(2,2); 28 float:left; 29 } 30 div#div4 31 { 32 transform:skew(10deg,20deg); 33 float:left; 34 } 35 div#div5 36 { 37 transform:matrix(0.866,0.5,-0.5,0.866,0,0); 38 float:left; 39 } 40 </style> 41 </head> 42 <body> 43 <div id="div1">Hello1，我是translate()方法，沿X轴移动100px,Y移动10px</div> 44 <div id="div2">Hello2，我是rotate()方法，旋转了30度</div> 45 <div id="div3">Hello3，我是scale()方法 把宽度和高度转换为原始尺寸的 2 倍。</div> 46 <div id="div4">Hello4，我是skew()方法 围绕 X 轴把元素翻转 10 度，围绕 Y 轴翻转 20 度。</div> 47 <div id="div5">Hello5，我是skew()方法，使用六个值的矩阵。</div> 48 </body> 49 </html>
4.3D转换
3D转换的方法包含了2D转换的哪些方法，不过加了Z轴。所以转换的效果是不同，3D立体嘛。。。
看下3D转换方法中使用这两个方法 rotateX()；rotateY()的效果：
代码：
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8" /> 4 <head> 5 <style> 6 div 7 { 8 width:100px; 9 height:105px; 10 background-color:yellow; 11 border:1px solid black; 12 } 13 div#div1 14 { 15 transform:rotateX(120deg); 16 float:left; 17 } 18 div#div2 19 { 20 transform:rotateY(130deg); 21 float:left; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="div">Hello,我是标准。看下其他两种方法旋转的效果</div> 27 <div id="div1">Hello1，我是rotateX()方法，围绕X轴旋转120度</div> 28 <div id="div2">Hello2，我rotateY()方法，围绕Y轴旋转130度</div> 29 </body> 30 </html>
5.过渡
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。这种效果像动画挺好玩的~~【原来就是CSS3中的动画( ╯□╰ )】
举例：
请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。
关键代码：
div
{
width:100px;
transition: width 2s;
}
div:hover
{
width:300px;
}
可以看出这个transition属性起的作用，学习下它。
语法：transition: property duration timing-function delay;
| 属性 | 描述 |
| transition-property | 规定应用过渡的 CSS 属性的名称 |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。语法：transition-timing-function:
linear|ease|ease-in|ease-out|ease-in-out|cubic- bezier(n,n,n,n); 说明下ease的描述，ease：规定慢速开始，然后变快，然后慢速结束的过渡效果（等于cubic-bezier(0.25,0.1,0.25,1)）。 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 |
6.动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。
CSS3 动画
举例：
关键代码：
@keyframes myfirst
{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:50px; top:0px;}
50% {background:blue; left:50px; top:50px;}
75% {background:green; left:0px; top:50px;}
100% {background:red; left:0px; top:0px;}
}
div { width:50px; height:50px; background:red; position:relative; animation:myfirst 5s linear 2s infinite alternate; }
可以看出，首先用@keyframes 规则创建动画，
上述的myfirst 规则中
百分比是来规定动画在某个时间段做的事情，0% 是动画的开始，100% 是动画的完成（也可以用关键词"from" 和 "to"，等同于 0% 和
100%。）
再来看animation属性
语法：animation: name duration timing-function delay iteration-count direction;
| 值 | 描述 |
| animation-name | 规定需要绑定到选择器的 keyframe 名称。 |
| animation-duration | 规定完成动画所花费的时间，以秒或毫秒计。 |
| animation-timing-function | 规定动画的速度曲线。默认值：ease（跟上述的过渡是一样的） |
| animation-delay | 规定在动画开始之前的延迟。值以秒或毫秒计。 |
| animation-iteration-count | 定义动画的播放次数 infinite 表示无限次 |
| animation-direction | 规定是否应该轮流反向播放动画 alternate表示轮流反向播放 |
7.多列
能够创建多个列来对文本进行布局 - 就像报纸那样！
主要是这三个属性的应用
①column-count 规定元素应该被分隔的列数。
②column-gap 规定列之间的间隔。
③设置所有 column-rule-* 属性的简写属性。语法column-rule:
column-rule-width column-rule-style
column-rule-color;
8.用户界面
在 CSS3 中，新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等.
①resize 规定是否可由用户调整元素尺寸。 语法：resize:
none|both|horizontal|vertical; 对应意思为：用户无法调整元素尺寸|可调高度和宽度|可调宽度|可调高度
②box-sizing 确切的方式定义适应某个区域的具体内容 语法：box-sizing:
content-box|border-box|inherit;
③outline-offset
对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。语法：outline-offset:
length(轮廓与边框边缘的距离)|inherit(从父元素继承 outline-offset
属性的值);