update: CSS 背景属性

02-CSS基础/02-CSS属性：背景属性.md

@@ -414,13 +414,9 @@ background属性和border一样，是一个综合属性，可以将多个属性
 		}
 
 		.div1 {
-			background-size: 100% auto;
-		}
-
-		.div2 {
 			background-size: cover;
 		}
-		.div3{
+		.div2{
 			background-size: contain;
 		}
 	</style>
@@ -430,7 +426,6 @@ background属性和border一样，是一个综合属性，可以将多个属性
 	<section class="img_wrap">
 		<div class="img div1"></div>
 		<div class="img div2"></div>
-		<div class="img div3"></div>
 
 	</section>
 </body>
@@ -442,6 +437,10 @@ background属性和border一样，是一个综合属性，可以将多个属性
 
 ![](http://img.smyhvae.com/20191006_1350.png)
 
+在上方代码的基础之上，再加一个 `background-position: center`属性之后，图片就会在容器里**居中显示**：
+
+![](http://img.smyhvae.com/20191006_1520.png)
+
 ## 背景原点：`background-origin` 属性
 
 `background-origin` 属性：控制背景从什么地方开始显示。
@@ -847,7 +846,7 @@ background属性和border一样，是一个综合属性，可以将多个属性
 
 `clip-path`属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
 
-虽然`clip-path`不是背景属性，但往往会结合背景属性一起使用，达到一些效果。
+虽然`clip-path`不是背景属性，但这个属性非常强大，但往往会结合背景属性一起使用，达到一些效果。
 
 举例：（鼠标悬停时，放大裁剪的区域）
 
@@ -875,7 +874,9 @@ background属性和border一样，是一个综合属性，可以将多个属性
 
 ![](http://img.smyhvae.com/20191006_1430.png)
 
-另外，还可以引入 svg 图形，这里就不详细展开了。
+另外，通过 `clip-path: (svg)` 可以导入svg矢量图，实现 iOS图标的圆角。这里就不详细展开了。
+
+
 
 ## 我的公众号
 

02-CSS基础/13-CSS3属性详解：动画详解.md

@@ -27,7 +27,6 @@
 
 transition 包括以下属性：
 
-
 - `transition-property: all;`  如果希望所有的属性都发生过渡，就使用all。
 
 - `transition-duration: 1s;` 过渡的持续时间。
@@ -722,7 +721,7 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想*
 
 ![](http://img.smyhvae.com/20180208_2035.gif)
 
-**案例：**百度钱包
+**案例**：百度钱包的水平翻转效果
 
 现在有下面这张图片素材：
 
@@ -918,7 +917,7 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想*
 
 电脑显示屏是一个 2D 平面，图像之所以具有立体感（3D效果），其实只是一种视觉呈现，通过透视可以实现此目的。
 
-透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出3d 效果，并不是正真的3d。
+透视可以将一个2D平面，在转换的过程当中，呈现3D效果。但仅仅只是视觉呈现出 3d 效果，并不是正真的3d。
 
 格式有两种写法：
 
@@ -926,15 +925,20 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想*
 
 - 作为 transform 属性的一个值，做用于元素自身。
 
+格式举例：
+
+```css
+perspective: 500px;
+```
+
 ### 4、3D呈现（transform-style）
 
 3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的**父元素**设置`transform-style: preserve-3d`来使其变成一个真正的3D图形。属性值可以如下：
 
+```css
+	transform-style: preserve-3d;     /* 让 子盒子 位于三维空间里 */
 
-```javascript
+	transform-style: flat;            /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */
-	transform-style: preserve-3d;     //让 子盒子 位于三维空间里
-
-	transform-style: flat;            //让子盒子位于此元素所在的平面内（子盒子被扁平化）
 
 ```
 
@@ -1033,12 +1037,10 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想*
 </html>
 ```
 
-
 ## 动画
 
 动画是CSS3中具有颠覆性的特征，可通过设置**多个节点** 来精确控制一个或一组动画，常用来实现**复杂**的动画效果。
 
-
 ### 1、定义动画的步骤
 
 （1）通过@keyframes定义动画；
@@ -1057,7 +1059,6 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想*
      	fun();
 ```
 
-
 同样，我们在 CSS3 中**定义动画**的时候，也是**先定义，再调用**：
 
 ```javascript
@@ -1071,7 +1072,6 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想*
       animation: 动画名称 持续时间；
 ```
 
-
 其中，animation属性的格式如下：
 
 ```javascript
@@ -1082,9 +1082,6 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想*
             animation: move2 4s;
 ```
 
-
-
-
 **定义动画的格式举例：**
 
 ```html
@@ -1363,7 +1360,6 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
 
 这下，你应该恍然大悟了。
 
-
 **（2）第二步**：让鱼所在的盒子向前移动。
 
 实现的原理也很简单，我们在上一步中已经让`shark`这个盒子实现了原地摇摆，现在，让 shark 所在的父盒子 `sharkBox`向前移动，即可。完整版代码是：
@@ -1423,10 +1419,8 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
 </html>
 ```
 
-
 ![](http://img.smyhvae.com/20180209_1350.gif)
 
-
 大功告成。
 
 工程文件如下：
@@ -1434,8 +1428,6 @@ PS：图片的url是<http://img.smyhvae.com/20180209_1245.gif>，图片较大，
 - [2018-02-09-fishes.rar](http://download.csdn.net/download/smyhvae/10255540)
 
 
-
-
 ## 我的公众号
 
 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。

03-CSS进阶/00-准备.md

@@ -46,10 +46,21 @@ css 进阶的主要内容如下。
 
 - js 框架中的 css 集成实践
 
+
 ## 常见问题
 
 > 不会 css 的前端称之为伪前端。
 
+
+### Vue 中模拟Scoped CSS的方式
+
+方案一：随机选择器。css  modules。
+
+方案二：**随机属性**。`<div abcd>`、`div[adcd]{}`
+
+
+### 其他问题
+
 - html 元素的嵌套关系是怎么确定的？哪些嵌套不可以发生？
 
 - 比如说，为什么 div 可以放在 a 标签里面？

03-CSS进阶/03-CSS布局.md

@@ -175,4 +175,6 @@ flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局
 
 ## 响应式布局
 
-移动端用得较多，暂时忽略。
+移动端用得较多，本文暂时先不讲。
+
+