盒子的定位

定位：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））