Web前端开发工程师知识体系_18_CSS

Posted 2021-09-15 小马学前端

一、渐变

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.渐变的兼容

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

浏览器	前缀
chrome/safari/edge	-webkit-
firefox	-moz-
opera	-o-
IE	-ms-

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

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

row	左向右(默认)
row-reverse	右向左
column	上向下
column-reverse	下向上

（2）项目换行 - flex-wrap

nowrap	不换行(默认)
wrap	换行
wrap-reverse	反向换行

（3）主轴和换行简写 - flex-flow

row nowrap

横向排列不换行(默认)

（4）主轴对齐方式 - justify-content

flex-start	起点对齐(默认)
flex-end	终点对齐
center	居中对齐
space-between	两端对齐，项目之间的间隔都相等，左右贴边
space-around	每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍

（5）交叉轴对齐方式 - align-items  

        前提是项目换行，容器的垂直轴方向有独立高度或者宽度。

flex-start	交叉轴的起点对齐
flex-end	交叉轴的终点对齐
center	交叉轴的局中对齐
baseline	项目的第一行文字基线对齐
stretch	默认值（若项目未写高度，默认和容器一样高）

（6）多轴线对齐方式 - align-content

        如果项目只有一根轴线，该属性不起作用，前提是容器有高度

flex-start	与交叉轴的起点对齐
flex-end	与交叉轴的终点对齐
center	与交叉轴的中点对齐
space-between	第一行和最后一行贴开始和结束，其他均分中间位置
space-around	每行间距两侧或上下间距相等，比边框间距大一倍
stretch	默认值

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