一、渐变
1. 线性渐变 - linear-gradient( )
div { background-image: linear-gradient(color1,color2,……); }
渐变最少两个颜色，才能体现出颜色的变化颜色，参数用逗号分开，可以写多种颜色。
（1）渐变方向，在颜色前加入角度或关键字控制渐变方向。
div { background-image: linear-gradient(-70deg, red, green); }
（2）渐变范围
格式：
background-image: linear-gradient(方向，颜色1 起始值 结束值，颜色 2 起始值 结束值……)
div { background-image: linear-gradient(90deg, red 0 40%, green 50% 100%); background-image: linear-gradient(50deg, green 0 110px, yellow 110px 130px, black 130px 190px); }
2. 径向渐变 - radial-gradient( )
div { background-image: radial-gradient(color1,color2,……); }
（1）半径
格式：
background-image: radial-gradient(半径,颜色1,颜色2);
background-image: radial-gradient(x轴半径 y轴半径,颜色1,颜色2);
div { background-image: radial-gradient(100px, red 0 30%, green 30% 100%); }
当半径只传入一个参数时，表示该渐变形状为圆。
（2）圆心起点
格式：
background-image: radial-gradient(x轴半径 y轴半径 at x轴圆心 y轴圆心,颜色1 起始值 结束值……)
在圆心后面增加 at 空格 x轴 y轴 的原点位置，也可使用关键词left/top/bottom/right。
div { background-image: radial-gradient(100px at left top, red 0 30%, green 30% 100%); }
3. 重复渐变
该渐变版本过低的浏览器无法查看效果。
repeating-linear-gradient( ) 重复线性渐变
repeating-radial-gradient( ) 重复径向渐变
4. 渐变的兼容
各大浏览器的私有前缀如下：
有前缀与无前缀使用区别如下：
background-image: linear-gradient(to bottom,red,yellow); 无私有前缀
background-image: -webkit-lineargradient(top,red,yellow); 有私有前缀
二、高级选择器
1. 属性选择器
属性选择器使用 [ ] 将元素属性名称放入其中，通过查找具有该属性的元素来设置样式。
（1）简单属性选择器
[type=text],[type=password] { width: 600px; } /*选择类型值为text和password的input*/ [class] { color: red; } /*选择所有带有类名的元素*/
（2）筛选属性选择器
[href^="http"] { /*样式声明;*/ } /*选择href值以"http"开头的元素 ^表示以什么开头，$表示以什么结尾*/ [class*=b] { /*样式声明;*/ } /*选择类名中包含"b"的元素*/ [class~=a] { /*样式声明;*/ } /*选择类名以"a"为独立字段的元素*/
2. 目标伪类选择器
格式：target{样式声明}，对应锚点被激活时，匹配的样式使用a标签href属性连接元素锚点。
a~div { width: 200px; height: 100px; display: none; } div:target { /* 被锚点激活的div,也就是目标div */ display: block; } /*表示div隐藏，当点击超链接时显示div*/
3. 结构性伪类选择器
.myul>li:first-child { /*样式声明;*/ } /*选择ul中的第一个li*/ .box div:last-child { /*样式声明;*/ } /*选择box中的最后一个div*/ .myul>li:nth-child(8) { /*样式声明;*/ } /*选择ul中的第8个li*/ .myul>li:nth-child(odd) { /*样式声明;*/ } /*选择ul中的单数行*/ .myul>li:nth-child(even) { /*样式声明;*/ } /*选择ul中的双数行*/ .myul>:empty { /*样式声明;*/ } /*选择父元素中某个为空的子元素*/ ol>li:only-child { /*样式声明;*/ } /*父元素中只有一个子元素*/ .myul>li:not(.mm) { /*样式声明;*/ } /*选择ul中除类名为mm的li之外的所有元素*/ /*取反选择器,(注意not括号里写整个选择器)*/
三、弹性布局
在弹性布局中，父元素无需清除浮动，每个子元素也不用再进行浮动，只需给父元素加 display: flex; 即可。容器控制所有项目的排序，弹性布局必须是容器嵌套项目；
复杂嵌套最好不用弹性布局（嵌套层数会过多），使用普通浮动布局即可。
1. 基本概念
在此布局中，父元素称为"容器"，子元素自动成为容器成员，称为"项目"。各自有控制布局的属性，必须是容器包裹着项目。
x 轴 起点在左侧或右侧
y 轴 起点在顶端或底端
主轴：就是项目的排列方向，主轴会出现四个方向；
交叉轴：就是在主轴的垂直方向，项目可在交叉轴上移动。
2. 将容器指定为 flex 布局
任何一个容器都可以指定为 Flex 布局，设为 Flex 布局以后，子元素的 float、clear 等属性将失效。
3. 容器的属性
（1）主轴方向 - flex-direction
（2）项目换行 - flex-wrap
（3）主轴和换行简写 - flex-flow
row nowrap 横向排列不换行(默认)
（4）主轴对齐方式 - justify-content
（5）交叉轴对齐方式 - align-items
前提是项目换行，容器的垂直轴方向有独立高度或者宽度。
（6）多轴线对齐方式 - align-content
如果项目只有一根轴线，该属性不起作用，前提是容器有高度
4. 项目属性
（1）项目排列数次序 - order
改变原有标签的排序。 数值越小，排列越靠前，默认为0，可以为负值。
.box>div:nth-child(2){ order: 1; }
（2）项目的放大比例 - flex-grow
定义项目的放大比例，默认为0。单行有剩余空间时，项目可以使用放大比例，前提是项目不换行。项目设置放大比例为非默认比例时，原宽度失效。
（3）项目的缩小比例 - flex-shrink
项目的缩小比例，默认为 1，负值无效。值为0时，即使压缩，该项目仍然保持自己的原有宽度，其他值如 2、10等，缩小比例值越大，缩小比重就越大。
.box>div:nth-child(4) { flex-shrink: 0; } /*压缩时第四个项目不会缩小自己原有宽度，其余缩小*/
（4）项目的自动尺寸 - flex-basis
可以代替宽度，与宽度表现形式基本一样，当flex-basis和width属性同时存在时，width属性不再生效。
（5）项目的简写方式 - flex
包含flex-grow(放大比例)，flex-shrink(缩小比例) 和 flex-basis(自动尺寸)。
常用项目设置：flex: 0 0 *px; 表示不放大、不缩水、所占尺寸大小。
