diff --git a/02-CSS基础/02-CSS属性：背景属性.md b/02-CSS基础/02-CSS属性：背景属性.md index c0e759f..f0b237f 100644 --- a/02-CSS基础/02-CSS属性：背景属性.md +++ b/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; } @@ -430,7 +426,6 @@ background属性和border一样，是一个综合属性，可以将多个属性
-
@@ -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图标的圆角。这里就不详细展开了。 + + ## 我的公众号 diff --git a/02-CSS基础/13-CSS3属性详解：动画详解.md b/02-CSS基础/13-CSS3属性详解：动画详解.md index 070c9a8..b2459c8 100644 --- a/02-CSS基础/13-CSS3属性详解：动画详解.md +++ b/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: preserve-3d; //让 子盒子 位于三维空间里 - - transform-style: flat; //让子盒子位于此元素所在的平面内（子盒子被扁平化） + transform-style: flat; /* 让子盒子位于此元素所在的平面内（子盒子被扁平化） */ ``` @@ -1033,12 +1037,10 @@ rotate 旋转时，默认是以盒子的正中心为坐标原点的。如果想* ``` - ## 动画 动画是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是，图片较大， 这下，你应该恍然大悟了。 - **（2）第二步**：让鱼所在的盒子向前移动。 实现的原理也很简单，我们在上一步中已经让`shark`这个盒子实现了原地摇摆，现在，让 shark 所在的父盒子 `sharkBox`向前移动，即可。完整版代码是： @@ -1423,10 +1419,8 @@ PS：图片的url是，图片较大， ``` - ![](http://img.smyhvae.com/20180209_1350.gif) - 大功告成。 工程文件如下： @@ -1434,8 +1428,6 @@ PS：图片的url是，图片较大， - [2018-02-09-fishes.rar](http://download.csdn.net/download/smyhvae/10255540) - - ## 我的公众号 想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。 diff --git a/03-CSS进阶/00-准备.md b/03-CSS进阶/00-准备.md index 12d2309..2d51596 100644 --- a/03-CSS进阶/00-准备.md +++ b/03-CSS进阶/00-准备.md @@ -46,10 +46,21 @@ css 进阶的主要内容如下。 - js 框架中的 css 集成实践 + ## 常见问题 > 不会 css 的前端称之为伪前端。 + +### Vue 中模拟Scoped CSS的方式 + +方案一：随机选择器。css modules。 + +方案二：**随机属性**。`
`、`div[adcd]{}` + + +### 其他问题 + - html 元素的嵌套关系是怎么确定的？哪些嵌套不可以发生？ - 比如说，为什么 div 可以放在 a 标签里面？ diff --git a/03-CSS进阶/03-CSS布局.md b/03-CSS进阶/03-CSS布局.md index a67846c..cceaf82 100644 --- a/03-CSS进阶/03-CSS布局.md +++ b/03-CSS进阶/03-CSS布局.md @@ -175,4 +175,6 @@ flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局 ## 响应式布局 -移动端用得较多，暂时忽略。 +移动端用得较多，本文暂时先不讲。 + +