一、浏览器内核及其前缀
CSS标准中各个属性都要经历从草案到推荐的过程， CSS3 中的属性进展都不一样，浏览器厂商在标准尚未明确情况下提前支持会有风险，浏览器厂商对新属性的支持情况也不同，所以会加前缀加以区分，如果某个属性已经从草案变为了或接近推荐方案，并且厂商已经完全实现了推荐属性，那就不用加厂商前缀，例如：border-radius已经很成熟了，就不用加前缀，如果有些属性浏览器还未支持，就必须要带上对应浏览器内核的前缀
1、根据不同的浏览器内核，css前缀会有不同，最基本的浏览器内核有如下四种，其他的内核都是基于此四种进行再研发的；
① Gecko内核 前缀为-moz- 火狐浏览器
② Webkit内核 前缀为- webkit – 也叫谷歌内核， chrome浏览器 最先开发使用，safari浏览器也使用该内核，国内很多浏览器也使用了webkit内核，如360极速、世界之窗、猎豹等；
③ Trident内核 前缀为-ms- 也称IE内核；
④ Presto内核 前缀为-o- 目前只有 opera 采用
举个例子：text-stroke 属性在谷歌浏览器里面还未支持，所以当你直接这样子写的时候，他并没有效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浏览器私有前缀</title>
<style>
div {
font-size: 100px;
text-stroke: 1px #f00;
}
</style>
</head>
<body>
<div>
浏览器私有前缀
</div>
</body>
</html>
效果图如下：
浏览器前缀属性
所以，想要让谷歌浏览器支持该样式属性，就必须带上谷歌浏览器内核的前缀，如下所示
<style>
div {
font-size: 100px;
-webkit-text-stroke: 1px #f00;
}
</style>
效果图如下：
如果想要其他浏览器也支持这个属性，那就要分别写上其他浏览器该属性的内核的前缀，一般如果普通浏览器支持不带前缀的属性，也要跟上，例如：
<style>
div {
font-size: 100px;
text-stroke: 1px #f00;
-webkit-text-stroke: 1px #f00;
-moz-text-stroke: 1px #f00;
-ms-text-stroke: 1px #f00;
-o-text-stroke: 1px #f00;
}
</style>
2、绝对定位，绝对定位是不会占着原先的位置，它会漂浮元素的上面，例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浏览器私有前缀</title>
<style>
div {
font-size: 100px;
-webkit-text-stroke: 1px #f00;
-moz-text-stroke: 1px #f00;
-ms-text-stroke: 1px #f00;
-o-text-stroke: 1px #f00;
color: transparent;
position : absolute
}
</style>
</head>
<body>
<div>
浏览器私有前缀
</div>
<img src="./image/1.jpg">
</body>
</html>
因为 【浏览器私有前缀】的字体用了绝对定位，所以它会漂浮在图片的上面，它不会占中原先的位置，也就是相当于该【浏览器私有前缀】好像不存在一样，效果如下：
如果没有用绝对定位的话，原先的元素还会占着原先的位置，图片会跟在原先元素的后面，那效果如下
