Web前端開發工程師知識體系_18_CSS（六）

一、漸變

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.基本概念

在此布局中，父元素稱為"容器"，子元素自動成為容器成員，稱為"專案"，各自有控制布局的屬性，必須是容器包裹著專案，

主軸：主軸就是專案的排列方向，主軸會出現四個方向.

交叉軸：交叉軸就是在主軸的垂直方向，專案可在交叉軸上移動，

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