html 5 和 css 3 学习 の 第一天( 下篇 )

当学习静不下心时,回想下你的初心，说实在的我的初心是为了高薪让自己生活质量变高。 在学习期间，我也会有静不下心的时候，那时候就会想想，如果想把自己的价值提升上去， 前提是我的学识也应该提上去，因为一个公司永远不可能会请一个没有利用价值的员工。 好好想想吧~
今天的学习我会举例子并且会使用图文混排的方式来帮助读者去很简单的理解我的内容，喜欢的朋友可以关注下我，你的关注就是我最大的鼓励。谢谢！

---

css3 新增的样式属性

1. box-sizing属性

♡ 代码解释： 这是一个宽高为150px 的粉色正方形盒子，在这里我设置了内边距为50px，并且设置了10px蓝色的边框。

❤ 那么问题来了，这个时候这个box的宽高分别是多少？
答案：当你加了内边距和边框的时候。
所以现在盒子的宽是 150 + 50 * 2 + 10 * 2 = 270px ，高也是270px

    盒子的宽/高 = 盒子真实的宽/高 + 左右/上下边距 + 左右/上下边框

❤ 在这里 内边距 和 边框 是向外扩的，所以会增大盒子实际占用的空间。

♡ 在这种情况下，如果给盒子 box-sizing: border-box 代表向 内聚，也就是说宽高给的是多大就是多大，边框和内边距都是往盒子里面加的。

♡ box-sizing：content-box；表示外扩, 默认值

---

2. transition 过渡（动画） 属性

❤ 参数1： 参与过渡（动画）的属性 all 代表所有都参与 width 只有宽参与
❤ 参数2： 动画的持续时间
❤ 参数3： 动画的延迟时间
❤ 参数4： 运动曲线/动画效果 匀速：linear ease-in 先快后慢 steps(5)分成5步来完成动画.


❤ 代码解释：设置一个100px粉色的盒子，宽高同时在 2s 中变为300px的蓝色盒子。

注意： 如果加在 hover 里面时， 那么移入才会有动画效果，移出就是直接闪现出来，没有过程。如果写在div中代表移入和移出都有动画效果， 有颜色效果。

3. 使用JavaScript加过渡（动画）效果

❤ 代码解释：设置了三个按钮，分别是放大、复原和切换。

♡当单击“放大”按钮时，盒子会由100px的红色正方形 变为一个300px的红色正方形。 原理：使用js中的classList.add(‘类名’)的方法增加某个类名。

♡当单击“缩小”按钮时，盒子会由300px的红色正方形 变回成100px的红色正方形。 原理：使用js中的classList.remove(‘类名’)的方法为移除某个类名。

♡ 当单击“切换”按钮时，盒子会在100px的红色正方形和300px的红色正方形之间切换。 原理：使用js中的classList.toggle（“类名”）的方法来进行切换。如果有这个类名就删除, 如果没有这个类名就加上。

---

4. 盒子阴影 box-shadow

❤ 参数1 水平偏移
❤ 参数2: 垂直平移
❤ 参数3: 阴影模糊度
❤ 参数4: 阴影的大小 0代表跟盒子一样大,给其他大于0的情况下是在盒子本身加大小
❤ 参数5: 阴影颜色
❤ 参数6: inset 如果写了就是内阴影,位置只能写第一个和最后一个,但是不能写在中间

❤ 当然，也可以写多层盒子的阴影,当颜色相同时,前面的会盖住后面的

♡：hover 0-31有hover效果，32之后（包括32)不需要hover的情况。

---

5. 文字阴影 text-shadow

text-shadow ：文字大小永远和文字一样大

❤ 参数1: 水平偏移,正数代表右边,负数左边
❤ 参数2: 垂直偏移,正数代表下面,负数上面
❤参数3: 阴影模糊度
❤ 参数4: 阴影颜色
❤ 如果多个阴影，用逗号隔开

---

6. 背景相关的属性 background

❤ 参数1: 图片路径 写法:url(路径)
❤ 参数2: 是否平铺,默认值是会平铺no-repeat代表不平铺,还有可选值是:repeat-x/y
❤ 参数3: 图片位置。
默认是左上对齐(图片的左上跟盒子左上是重叠的)。
图片位置要是传两个，第一个写的是水平位置，第二个是垂直位置，单位既可以写像素,也可以写百分比,还可以写方向水平可以写left, right , center垂直可以写top,center bottom,如果只写一个center代表水平和垂直都居中,
❤ 参数4: 在参数3后面一个/ 可以指定背景图片的大小,它有两个取值.
Cover: 图片一定会覆盖整个盒子(图片可能会超出)
Contain: 盒子一定包含整个图片(图片一定不会超出,但是可能会留白)

注意：Cover和contain都是按比例缩放图片,所以不会变形

当背景图片比盒子大的时候,只显示背景图片的一部分，当盒子比盒子小的时候，会平铺。
❤ 参数5: 背景颜色 位置必须放在最前面或者放在最后面
❤ 没有连写的属性是

❤ 如果一个盒子需要添加多个背景图片，用逗号隔开， 先写的图片的优先层最高,最后写的层级最低.。

---

7. 线性渐变
background-image: linear-gradient (参数)

它相当于把渐变色当成背景图片

❤ 参数1: 渐变方向 除了方向以外,还有一个角度值 0deg代表从下到上,值越大,就是顺时针旋转,需要什么角度自己调就可以了.

❤参数2: 颜色1
❤ 参数3: 颜色2

注意： 至少两个颜色,每个颜色还可以设置占的比例, 第一个颜色设置百分比代表它结束的位置,后面的颜色设置代表它开始的位置. 这样的话效果就没有渐变的感觉了.

---

8. 径向渐变
background-image: radial-gradient( 参数 )

❤参数1: 确定圆心位置和大小 100px代表是圆的直径
❤参数2: 颜色1
❤参数3: 颜色2
❤参数4: 最后一种颜色 圆多余部分的颜色
❤ 至少2种颜色, 也可以设置颜色所占据的百分比

---

9. 2d变换 transform
transform： 既可以做旋转,也可以做平移,还可以做缩放和扭曲

❤ 旋转： rotate 旋转方向顺时针或者逆时针旋转 正数顺时针,负数逆时针

旋转的固定点, 围绕着固定点来旋转,默认是中间 可以修改

❤ 理解为在哪个地方钉了一个钉子。

❤ 平移: translate( 参数1, 参数2 ); 如果只写一个参数,只会变x轴

缩放: scale( 参数1,参数2 ) 下图宽度缩小,高度放大,如果只写一个那么宽高都缩小或扩大

扭曲: skew() 就是把一个图形变成平行四边形, 正数向左, 负数向右,角度越大倾斜越大

❤ 如果是变换，那么要用空格隔开。
注意：如果是先旋转再平移的情况下，旋转的时候坐标轴也会旋转，所以图形会歪。

---

今天就到这了。 感谢认真看完了我的博客的朋友！明天我会更新一些关于这些的实例。请继续关注我！