本文主要记录前端小笔记
CSS
绝对定位、相对定位、固定定位：
绝对定位脱离了文档流，绝对定位元素渲染时它依赖的元素已经渲染完成 百分比是可以计算出来的。
而相对定位，子元素的高度会影响父元素，此时父元素高度未知，要等子元素高度确定，父元素高度才确定。
注意:单独使用relative的时候，top:%不会移动，但是换成px会移动。
相对定位 relative
设置right为正值，元素往左移动，bottom设置正值，元素往上移动。负值则往与正值相反的方向移动
设置left为正值，元素往右移动，top设置正值，元素往下移动。
- 设置相对定位的盒子会相对它原来的位置，通过指定偏移，到达新的位置
- 设置相对定位的盒子仍在标准文档流中，它对父级盒子和相邻的盒子都没有任何影响（没有脱离标准文档流）
- 设置相对定位的盒子原来的位置会被保留下来（之前的位置被空出来了，会影响页面布局）
- 相对定位的特性
- 相对于自己的初始位置来定位
- 元素位置发生偏移后，它原来的位置会被保留下来（所以其他元素因此移动）
- 层级提高，可以把标准文档流中的元素及浮动元素盖在下边
- 相对定位的使用场景
- 相对定位一般情况下很少自己单独使用，都是配合绝对定位使用，为绝对定位创造定位父级而又不设置偏移量
绝对定位 absolute
- 使用了绝对定位的元素以它最近的一个“已经定位”的“祖先元素” 为基准进行偏移（ 定位的基准是相对于最近的祖先元素在定位，没有则以浏览器窗口进行定位 ）
- 如果没有已经定位的祖先元素，会以浏览器窗口为基准进行定位
- 绝对定位的元素脱离标准文档流，这意味着它们对其他元素的定位不会造成影响
- 元素位置发生偏移后，它原来的位置不会被保留下来
- 设置了绝对定位但没有设置偏移量的元素将保持在原来的位置。
在网页制作中可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况
固定定位 fixed
- 固定定位的特性
- 相对浏览器窗口来定位
- 偏移量不会随滚动条的移动而移动
- 固定定位的使用场景
- 一般在网页中被用在窗口左右两边的固定广告、返回顶部图标、吸顶导航栏等
CSS3渐变
线性渐变
- 颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
- linear-gradient ( position渐变方向, color1第一种颜色值, color2第二种颜色,…)
To right从左到右
