一、渐变
**.什么是渐变？**
两种或者多种颜色间平滑度过的效果
分类：
1.线型渐变
2.径向渐变
3.重复渐变 加上 repeating1从上到下的线性渐变：
background-image: linear-gradient(#e66465, #9198e5);
2从左到右的线性渐变：
background-image: linear-gradient(to right, red , yellow);
3从左上角到右下角的线性渐变：
background-image: linear-gradient(to bottom right, red, yellow)
4带有指定的角度的线性渐变：
background-image: linear-gradient(-90deg, red, yellow);
5 带有多个颜色结点的从上到下的线性渐变：
background-image: linear-gradient(red, yellow, green)
6一个重复的线性渐变：
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
7 径向渐变
background-image: radial-gradient(shape size at position, start-color, …, last-color);
二、定位
所为定位，实际上就是定义元素框相对于其正常位置，应该出现在哪儿
定位就是改变元素在页面上的默认位置
分类：
普通流定位：（元素默认的定位方式）
浮动定位
相对定位
绝对定位
固定定位
1、普通流定位
文档流是页面元素默认的定位方式
块级：从上到下排列（独占一行）
行级：从左到右排列（不独占一行）
2.浮动定位
如果将元素的定位方式设置了浮动定位那么具有以下几个特点
1.浮动元素会脱离文档流，其他未浮动的元素要上前补位
2.浮动元素会停靠在父元素的左边或者右边，或者停靠在其他浮动元素的边缘上
3.浮动元素只会在当前行内浮动
4.浮动元素依然位于父级元素内
5.让多个块级元素处于一行
浮动引发的效果
当父元素的宽度显示不下所有已浮动的元素时，最后一个元素将换行（有可能会被卡住）
元素一旦浮动起来，那么将变成块级元素，尤其对行内元素影响最大。
文本、行内元素、行内块元素 采用文字环绕的方式排列，是不会被浮动元素压在底下的会巧妙的避开浮动元素
清除浮动
元素浮动起来之后，除了影响到自己的位置，还会影响后续元素
如果不想被前面浮动元素影响 可以使用清除浮动来解决这个问题
谁被影响 就在谁身上用
关键字 ： clear ：
left 清除左浮动
right 清除右浮动
both 不管是左右都清除
浮动元素对父级元素带来的影响
如果父级的高度设置100% 或者 没有设置（自适应） 当元素全部浮动起来之后 父级的高度为0
如何去解决：
1.直接给父级设置高度px
弊端：必须要知道父级准确的高度
2.设置父元素浮动
弊端：对后续元素又影响
3.为父级元素设置overflow（溢出）
弊端：如果子级内容有溢出显示的话会被一同隐藏
4.在父元素中追加一个空元素 设置清除浮动
CSS的伪类
hover：鼠标触碰到元素时触发的伪类
显示相关
1.显示方式
作用： 决定了元素在页面中如何摆放定位。
属性： display：none 让元素的分类变为空 从而不见
脱离了文档流
visibility 显示/隐藏元素
visible 可见的
hidden 隐藏的
collapse 使用在表格元素上 ，删除一行或者一列 不影响表格整体布局
区别： dispaly 脱离了文档流
visibility 不脱离文档流导致空间依然占据
opacity： 改变元素的透明度3相对定位
相对定位元素的定位是相对其正常位置 相对定位对应绝对定位
h2.pos_left
{
position:relative;
left:-20px;
}4绝对定位
绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于
h2{
position:absolute;
left:100px;
top:150px;
}5固定定位
元素的位置相对于浏览器窗口是固定位置。
即使窗口是滚动的它也不会移动：
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}三，光标的属性
属性：cursor
default 默认的属性
pointer 手
crosshair +
text 文本
wait 加载等待
help 帮助
3.列表的属性
list-style：none
