CSS（六）渐变、高级选择器、弹性布局

目录

一、渐变

1. 线性渐变 - linear-gradient( )

2. 径向渐变 - radial-gradient( )

3. 重复渐变

4. 渐变的兼容

二、高级选择器

1. 属性选择器

2. 目标伪类选择器

3. 结构性伪类选择器

三、弹性布局     

1. 基本概念

2. 将容器指定为 flex 布局

3. 容器的属性

4. 项目属性

一、渐变

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. 重复渐变

        该渐变版本过低的浏览器无法查看效果。

4. 渐变的兼容

各大浏览器的私有前缀如下：

有前缀与无前缀使用区别如下：

二、高级选择器

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

（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;  表示不放大、不缩水、所占尺寸大小。

文章来源: majinjian.blog.csdn.net，作者：Developer 小马，版权归原作者所有，如需转载，请联系作者。

原文链接：majinjian.blog.csdn.net/article/details/119959578