CSS重点冷点属性【三】_muted autoplay="autoplay"什么意思

今天写点很平常的CSS——这么平常，那为什么要说呢？

因为我们知道不一定就会记得，我们在开发中是很少使用的，突然碰到，却想不起来，最后还是去查文档，问度娘，所以今天出一期这样的，让我们在碰到时直接就可以拿出来使用

废话不多说，我们开始：

目录

一.音频（audio）常用属性：

二.视频（video）常用属性

三.修改表单placeholder提示信息的文本属性：

四.CSS盒子模型

五.图片模糊处理

六.CSS计算盒子宽度calc函数

 七.图片背景的缩放

八.浏览器私有前缀

九.最高权重

---

一.音频（audio）常用属性：

src:地址；

loop="loop":循环播放

controls="controls":向用户显示播放控件

autoplay="autoplay":自动播放

---

二.视频（video）常用属性

首先，上面音频属性在视频中都适用，我们再来添加几个：

width & height:宽、高

poster = "imgurl":在加载等待时显示出来的图片

muted = "muted":静音播放

preload = "auto"(预先加载视频) / "none"（不预先加载视频）

当我们使用autoplay自动播放时，就不需要添加preload属性了

*这里需要注意的是：谷歌浏览器默认当你视频有声音的时候，你的自动播放是不起作用的，也就是默认不自动播放，我们可以通过将视频静音，便可以在谷歌浏览器上实现视频的自动播放 

---

三.修改表单placeholder提示信息的文本属性：

input::placeholder{
    color: red;
} 

需要注意的是：这里是双冒号

---

四.CSS盒子模型

我们经常遇到这样的问题：我设置了一个盒子，宽高200px，本来是没有问题的，但是当我给了盒子10px的边框border，又给了10px的内边距padding，这时当我们检查元素的时候会发现，盒子变大了，宽高都变成了220px，那这肯定就是边框和内边距搞的鬼啊，有没有什么好的解决办法呢？

有！CSS有这么一个属性可以完美的解决这个问题

box-sizing: content-box / border-box;

我们发现有俩个值，我们选择border-box就可以解决内边距和边框将盒子撑大的事件了，一般我们会放在全局变量里，方便快捷

---

五.图片模糊处理

这个真的可以算一个冷门属性了，但有时真的很好用

filter:函数( );

filter: blur(5px);【blur为模糊函数，数值越大，越模糊】

---

六.CSS计算盒子宽度calc函数

width: calc(100% - 100px);【加减乘除都可以使用】

不过如果我们后期使用LESS的话，这个属性可以说没有用处了，非常的鸡肋，了解一下就可以了 

---

 七.图片背景的缩放

background-size: 背景图片宽度   背景图片高度;

background-size:cover;        //完全覆盖，可能有一部分显示不全

bakground-size: contain;        //把图像扩展到最大尺寸，直到其宽高完全适应内容区域（当一边顶到头时，另一边不再拉伸）

---

八.浏览器私有前缀

-moz-        //firefox私有

-ms-        //ie私有

-webkit-        //safair、chrome私有

-o-        //Opera私有 

我们举一个例子，在火狐浏览器中实现一个圆角属性：

-moz-border-radius: 10px;

---

九.最高权重

!important

举一个例子：

img{
    height:100%!important;
}

 意思就是最高的权重，无论前面给这个元素套了多少层的权值，无论多么的天花乱坠，只要跟上!important，那就是我权重最高（尽量不用，不建议频繁使用）

十.线性渐变

background：linear-gradient（to 起始方向，颜色1，颜色2......）

background：linear-gradient（角度值deg，颜色1，颜色2......）

background：linear-gradient（颜色百分比，颜色2百分比......）

background：linear-gradient（to 起始方向，颜色1百分比，颜色2百分比......）

background：linear-gradient（角度值deg，颜色1百分比，颜色2百分比......）

*如果不显示的话，可以尝试在linear前加上浏览器的私有前缀