盒子的定位，比特虫和线性渐变

• 定位：position；定位实现效果，让盒子压住盒子
  • 定位元素的层级
  • 相对定位和绝对定位的水平居中
• favicon.ico比特虫图标使用
• 线性渐变

定位：position；定位实现效果，让盒子压住盒子

position的属性：默认属性：static；元素是静止值，没有开启定位。

开启相对定位：relative；开启绝对定位：absolute；开启元素的固定定位：fixed；开启粘性定位：sticky；

position：relative：相对定位的几大特点：

（1）元素开启相对定位，如果不设置偏移量，元素不会发生改变

（2）相对定位的参照物是该元素在文档流中的位置，自身的定位

（3）相对定位会提升元素的层级

（4）相对定位不会使元素脱离标准流文档，也就是原来的文档还是存在的。

（5）相对定位不会改变元素的性质，块元素还是块儿元素，行内元素还是行内元素，行元素还是行元素

position：absolute：开启绝对定位

（1）开启绝对定位后，如果不设置偏移量，位置不会发生改变。

（2）开启绝对定位后，元素会脱离文档流，也就是脱标，不会在占用原来的位置。

（3）绝对定位会改变元素的性质，行内元素改变为行内块元素，块儿元素的宽高会被内容撑开

（4）绝对定位，会提升元素的层级

（5）绝对定位元素的位置是相对与相对定位的祖先元素定的，父级是否有相对定位，父级的父级是否有相对定位元素，如果祖先级都没有相对定位，默认根据html页面定位

position：sticky：开启粘性定位

元素固定某一个位置，类似绝对定位

粘滞浏览器的某一个位置，可以使元素到达某一个位置以后固定下来

top：0；相对于自己，不加偏移量，没有效果

position：fixed：开启固定定位

固定定位根据版本走的要素（固定定位和绝对定位可以）

第一步：left取值为50%

第二步：margin-left：取值版心的一半宽度

第三步：最后加上合适自己的定位。

定位元素的层级

定位的元素，写在后边的盒子会压住前边的盒子

想要调整元素的顺序，用z-index：数值设置，不用带单位

相对定位和绝对定位的水平居中

margin-left：auto；水平居中

margin-button：auto；垂直居中

绝对定位和固定定位设置垂直居中，需要两个步骤

第一步：设置盒子的left：50%和top：50%，让盒子定位在整个父级的右侧和下侧

第二步：设置margin-left：盒子自身宽度的一半；设置margin-top：盒子自身高度的一半；

favicon.ico比特虫图标使用

第一步：使用比特虫，制作一个 图标

第二步：放在根目录下边

第三步：用link引入css样式就ok了

线性渐变

线性渐变语法：background-image：linear-gradient（颜色1，颜色2，颜色3，颜色4，颜色n）

从上到下渐变：background-image：linear-gradient（颜色1，颜色2，颜色3，颜色4，颜色n）

通过to设置渐变的方向：background-image：linear-gradient（to left，颜色1，颜色2，颜色3）

通过角度设置渐变方向：background-image：linear-gradient（60 deg，颜色1，颜色2，颜色3）

渐变逐渐透明化：background-image：linear-gradient（#000这个是色彩名词，rgba（0，0，0，0.n））