完善css.md文件

2.css.md

@@ -40,16 +40,42 @@
    [CSS中的绝对定位与相对定位](http://www.cnblogs.com/jiqing9006/archive/2012/07/26/2610586.html),注意的是定位的参照：relative参照于自己该出现的位置，而absolute参照于祖先元素中与自己最近的已定位元素(relative或者absolute)直到body元素。
 
 5. **CSS动画原理**  
-   答案：[CSS 动画指南： 原理和实战 ](http://www.uml.org.cn/html/201110311.asp)  
+   答案：挤压与拉伸、预期、舞台布局、顺利动画与关键帧、动作跟随与重叠、慢进慢出、弧形移动  
+   [CSS 动画指南： 原理和实战 ](http://www.uml.org.cn/html/201110311.asp)  
    [英文原版](https://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/#more-105335)
 
 6. **CSS3动画（简单动画的实现，如旋转等）**  
+  答案：依靠CSS3中提出的三个属性：transition、transform、animation。  
+  **transition**：定义了元素在变化过程中是怎么样的，包含transition-property、transition-duration、transition-timing-function、transition-delay。  
+  **transform**：定义元素的变化结果，包含rotate、scale、skew、translate。  
+  **animation**：动画定义了动作的每一帧（@keyframes）有什么效果，包括animation-name，animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction。  
+  具体可以参考一下三篇文章：  
+  [CSS3 Transition](http://www.w3cplus.com/content/css3-transition)  
+  [CSS3 Transform](http://www.w3cplus.com/content/css3-transform)  
+  [CSS3 Animation](http://www.w3cplus.com/content/css3-animation)  
 
 7. **CSS不同选择器的权重(CSS层叠的规则)**  
    答案：首先，找出所有应用到该标签的所有规则。然后按照下面的规则进行应用：1、！important规则最重要，大于其它规则；2、行内样式规则，加1000；3、对于选择器中给定的各个ID属性值，加100；4、对于选择器中给定的各个类属性、属性选择器或者伪类选择器，加10；5、对于选择其中给定的各个元素标签选择器，加1；6、通配符和结合符给予特殊性没有任何贡献；7、如果权值一样，则按照样式规则的先后顺序来应用，顺序靠后的覆盖靠前的规则。记住，CSS中选择器的优先级是先判断高位的数字，如果相等，才会继续判断低位的数字，如果高位分出大小了，就不考虑低位了。
 
 8. **flexbox布局及相关设置**  
-    答案：[Flex 布局教程：语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)  
+    答案：简单描述一下flex的属性，细节可以参考链接文档  
+    容器属性（采用Flex布局的元素，container）：  
+    **flex-direction**：决定主轴的方向（即项目的排列方向）；row | row-reverse | column | column-reverse;  
+    **flex-wrap**：设置是否换行；nowrap | wrap | wrap-reverse  
+    **flex-flow**：flex-direction属性和flex-wrap属性的简写形式，flex-direction || flex-wrap  
+    **justify-content**：定义了项目在主轴上的对齐方式；flex-start | flex-end | center | space-between | space-around  
+    **align-items**：定义项目在交叉轴上如何对齐；flex-start | flex-end | center | baseline | stretch  
+    **align-content**：定义了多根轴线的对齐方式；flex-start | flex-end | center | space-between | space-around | stretch  
+
+    项目属性（子元素为项目，item）
+    **order**：定义项目的排列顺序。数值越小，排列越靠前，默认为0。  
+    **flex-grow**：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。  
+    **flex-shrink**：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。  
+    **flex-basis**：定义了在分配多余空间之前，项目占据的主轴空间。  
+    **flex**：flex-grow, flex-shrink 和 flex-basis的简写。
+    **align-self**：允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。  
+
+    [Flex 布局教程：语法篇](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)  
     [Flex 布局教程：实例篇](http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)
 
 9. **块级元素和行内元素的异同**  
@@ -60,10 +86,15 @@
     4.行内元素可以通过设置display：block，渲染为块级元素。
 
 10. **CSS在性能优化方面的实践（比方说选择器的效率等）**  
-    答案：可参考[CSS性能优化策略](http://fengzheqi.com/2016/03/06/CSS%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AD%96%E7%95%A5/)
-
-11. **CSS打包压缩的方法**  
-    答案：利用打包工具grunt/gulp。
+    答案：网络层面：css压缩与合并、Gzip压缩；加载方式：css文件放在head里、不要用@import；语法结构：尽量用缩写、避免用滤镜、合理使用选择器。  
+    可参考[CSS性能优化策略](http://fengzheqi.com/2016/03/06/CSS%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E7%AD%96%E7%95%A5/)
+
+11. **CSS打包压缩的方法与异同**  
+    答案：利用打包工具grunt/gulp。  
+    易于使用：采用代码优于配置策略，Gulp让简单的事情继续简单，复杂的任务变得可管理。
+    高效：通过利用Node.js强大的流，不需要往磁盘写中间文件，可以更快地完成构建。
+    高质量：Gulp严格的插件指导方针，确保插件简单并且按你期望的方式工作。
+    易于学习：通过把API降到最少，你能在很短的时间内学会Gulp。构建工作就像你设想的一样：是一系列流管道。
 
 12. **使用CSS预处理的优缺点（比方说Sass和Compass等）**  
     答案：Css预处理器定义了一种新的语言将Css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作了。预处理器通常可以实现浏览器兼容，变量，结构体等功能，代码更加简洁易于维护。让你用一种编程语言的思维来写CSS样式。但是带来的缺点是需要增加设计工作以及学习熟悉成本。