CSS3學習筆記

CSS3學習筆記

前言

這篇筆記是18年11月左右學習css3記錄下來的，當時沒有發表在博客，而是放在自己電腦上，今天整理時才發現，補發CSDN.
本項目下的每個文件都可以正常運行，參考筆記進行理解。
github地址 （點擊可查看源程序文件）
css選擇器和jQuery的選擇器大體一致，不知道是誰抄誰的，程序之間怎麼叫抄呢，就像是孔乙己的“竊”，哈哈。

選擇器

基本選擇器

1. <選擇器>,<選擇器> 逗號 選擇多個元素
2. <選擇器>><選擇器> 大於號 第一個選擇器的直接後代（也就是僅選擇兒子輩）且匹配第二個選擇器
3. <選擇器>+<選擇器> 加號 緊挨第一個選擇器且匹配第二個選擇器的兄弟標籤
4. <選擇器>~<選擇器> 波浪線 第一個選擇器之後且匹配第二個選擇器的所有兄弟們標籤

屬性選擇器

1. 元素E[name] 選擇具有name屬性的元素
2. 元素E[name^=a] 選擇屬性name的值以a開頭的元素，其中name爲任意屬性，a爲任意值
3. 元素E[name$=d] 選擇屬性name的值以d結尾的元素，其中name爲任意屬性，d爲任意值
4. 元素E[name*=o] 選擇屬性name的值包含o的元素，其中name爲任意屬性，o爲任意值

僞類選擇器

舉幾個個栗子。。。

1. p:empty 選擇空的p元素
2. div p:not(.hello) div中除了類爲hello的p元素
3. ::selection 選擇被用戶選擇的部分（鼠標拖動選擇一部分）

子元素選擇器

以p標籤舉例說明

1. p:nth-child(n) 選擇p的父元素中第n個子元素,且這個子元素n爲p
2. p:first-child 選擇p的父元素中的第一個子元素，且這個子元素爲p
3. p:last-child 選擇p的父元素中的最後一個子元素，且這個子元素爲p
4. p:nth-last-child(n) 選擇p的父元素的倒數第n個子元素，且這個子元素爲p
5. p:only-child 選擇p元素的父元素中的唯一子元素，且這個元素爲p
6. p:nth-of-type(n) 選擇p的父元素中的第n個p元素
7. p:first-of-type 選擇p的父元素中的第一個p元素
8. p:last-of-type 選擇p的父元素中的最後一個p元素
9. p:only-of-type 選擇p的父元素中的爲一個p元素
10. p:nth-last-of-type(n) 選擇p元素的父元素中倒數第n個p元素

總結：

child和type類似，唯一的區別是child按次序要求的第n個元素必須是冒號前邊的元素，而type僅僅是要求按次序的第n個元素。
舉個例子，早些時候，偉大的人類一般生育好多孩子，假設張三生了9個孩子，4個女兒，5個兒子，如果一個人要找“張三家的老大哥”，類比子元素選擇器，如果使用nth-child(1)，那麼找到的老大哥必須是張三的頭胎老大，其餘8個都是他的弟弟妹妹；如果用nth-of-type(1),那麼找到的就是男孩子中的老大，這個老大可能是幾個姐姐的弟弟。

文本選擇器

以p舉例子記錄

1. p:first-line 選擇p標籤短路中的第一行
2. p:first-letter 選擇p標籤段落中的第一個字母
3. p:before 選擇p的前面
4. p:after 選擇p的後面

CSS3新增屬性

顏色

1. rgba(紅,綠,藍，透明度) 設置顏色，其中紅綠藍爲0-255之間的值，透明度爲0-1 1爲不透明，0.5爲半透明

字體單位

字體單位分爲三種，每種具體介紹如下：

1. px：使用具體像素點作爲單位，好處是比較穩定和精確，但在瀏覽器中放大或者縮小頁面會存在問題。
2. em：em是以父級爲參考的單位，好處是字體可以自適應，但父元素標籤發生改變時字體大小將不確定
3. rem：rem是相對於根元素《html》的文字大小，這樣就意味着，我們只需要在根元素確定一個參考值即可,css3新增。當在不同屏幕下只需要更改《html》的文字大小，其他使用rem的元素會自動響應改變。

文本溢出隱藏

1. white-spance:nowrap 文本不換行
2. overflow: hidden; 溢出隱藏
3. text-overflow: ellipsis; 超出文本以省略號顯示。
4. text-overflow: “###” 自定義顯示，也可以是其他符號

文本陰影

1. text-shadow: h-shadow v-shadow blur color 水平陰影位置，垂直陰影位置，模糊距離，陰影顏色

陰影實際用的比較少，

盒子陰影

盒子陰影是一個很漂亮的效果，比如小米的產品塊，之前自己一直想做的數據卡片，鼠標hover後展現陰影，顯得有立體感，可以使用這個屬性

1. box-shadow: h-shadow v-shadow blur spread color 水平位置 垂直位置 模糊距離 陰影尺寸 陰影顏色。

陰影其實是由一個實心塊和一個漸變塊組成的，實心塊就是spread，陰影塊就是blur，他們都不佔空間位置。

盒子最大最小尺寸

當元素是以百分之多少設定的大小是，元素的大小會隨着瀏覽器的縮放自動調整，那麼就可以通過下列屬性設定盒子的最大最小尺寸，當超過最大最小尺寸後，元素大小保持最大最小尺寸保持不變。

1. max-width 最高寬度
2. min width 最小寬度
3. max-height 最大高度
4. min-height 最小高度

盒子尺寸

一般默認設置一個塊級元素的寬高（width、height）指的是元素內部內容的寬高，不包括內邊距padding和邊框border。而box-sizeing屬性可以設置width包括pading和border。此時也稱爲怪異模式。

1. box-sizing: border-box | content-box

其中border-box設置width包含border和width，也就是怪異模式。
content-box就是正常的width只包含內容

怪異模式很有用，比如在頁面中平均排列五個塊級元素，如果每個塊級元素由邊框，即使設爲每個寬度爲20%也不行，因爲有邊框一行放不下，此時設置boxsizing爲border-box，width的20%包含邊框，無論邊框多大，都能現在在一行內。

分欄效果

分欄和報紙中的效果一致，直接使用下面相關屬性就可以

1. column-width 欄寬
2. column-count 列數
3. column-gap 列間距 參數和border一樣
4. column-rule 分割線

另外有兩個前綴

1. -moz- 是針對firefox的設置，
2. -webkit- 是針對chrome和蘋果safari的設置
3. -o- Opera瀏覽器
4. -ms- ie瀏覽器

背景圖尺寸

背景圖尺寸是CSS3新增屬性

1. background-size 寬度 高度 參數的寬高可以是n%或者具體的像素值。

背景線性漸變

除了背景圖和背景顏色還可以設置背景線性漸變,利用background的數值值liner-gradient實現 （其中gradient是梯度的意思）

1. background: linear-gradient(開始位置，漸變顏色[，漸變顏色，漸變顏色]) 後加多個漸變顏色。

這個屬性有兼容性問題，必須使用特定瀏覽器的前綴才能被瀏覽器識別。比如在谷歌瀏覽器下，其屬性爲 -webkit-liner-gradient

輪廓線

盒子輪廓線和盒子的邊框border的效果一樣，唯一不同的是盒子輪廓線outline不佔用空間。

1. outline: solid 2px red; 參數和border一樣。

動畫

CSS3可以做動畫了，不必像之前使用jquery中的 animaate了

1. transition ： width 2s;

transition 這個單詞的意思是過度，用於監控屬性的變化，如果被監控的屬性發生變化，那麼就是通過運動，運動過去。其中“width”是要監控的屬性，“2s”是變化時間爲2秒，也可直接把要監控的屬性寫爲all，這是懶人方法。

transition不知能實現CSS控制的動畫，也能監控js做出屬性改變，實現動畫。

元素變形

元素變形使用transform屬性，支持旋轉

旋轉

1. transform： rotate(30deg); 旋轉30度，deg爲角度，默認順時針方向

元素旋轉後還是佔用原來的位置，旋轉默認的基準點是中心店，基準點可調，後邊介紹。

指定旋轉的原點：

1. transform-origin: 4px 25px;/這裏的像素值分別是對旋轉元素左上角和距離：距離上邊，距離左邊/

縮放

1. transform: scale(1.5,1,5); //xy方向分別放大1.5倍

扭曲

1. transform: skew(0,30deg); //垂直扭曲30度，內容文字也會被扭曲

平移

平移和相對定位差不多

1. transform: translate(100px,20px); //往下100px，往右平移100px

平移和定位的區別是平移沒有脫離文檔流,元素就算是定位的，也可以平移。

元素水平垂直居中

要使元素水平垂直居中有三種方式，分別如下：

第一種：

前提是元素有固定的寬高， 這種方式使用絕對定位，然後設置top，bottom，left，right都爲0，再設置margin爲auto就能實現自動水平垂直居中

position: absolute;
top:0px;
left:0px;
right:0px;
bottom:0px;
margin:auto;

第二種：

前提是元素有固定的寬高，
這種方式先定位，左右偏移50%，然後再把margin-top和margin-left設爲元素寬高的負一半的值

position: absolute;
top:50%;
left:50%;
margin-top:-元素高度的一半px;
margin-left:-元素寬度的一半px;

第三種：

這種方式適用與元素有寬度值一定，高度值是靠內部元素撐起來的，也就是高度不確定的情況，這裏用到了元素平移。

position: absolute;
top:50%;
left:50%;
/*注意：下方的50%是隻box元素本身寬高的50%，而上方的50%是指box父元素寬高的50%*/
transform: translate(-50%,-50%);

animation關鍵幀運動

animation關鍵幀運動效果和transition實現效果差不多，不過這種運動就是在不經過觸發自己就能執行的運動，分爲兩步，第一：指定關鍵幀開始和結束的狀態，第二：在選擇器中指定運動規則。

<!-- 設置運動規則： -->
@keyframes name{ /*指定運動規則的名稱爲name*/
    from{
        css屬性
    }
    to{
        css屬性
    }
}

<!-- 運動規則還可以指定關鍵幀的狀態，如下
 -->
 @keyframes name{
     0%{
          css屬性
     }
     50%{
          css屬性
     }
     100%{
          css屬性
     }
 }

<!-- 指定運動規則： -->
選擇器{
    animation-name：name;//規則名稱
    animation-duration：3s;//運動時間
    <!--最少有以上兩個： 規則名稱和持續時間就能運動 -->

    animation-timing-function:linear;//勻速變化，默認是變速
    animation-delay：2s;//延遲兩秒執行
    animation-iteration-count：3;//運動次數，指定infinite就是無限重複運動。
    animation-directioin:alternate;//輪流反相運動（見孫悟空旋轉金箍棒）
    animation-fill-mode: forwards | backwards | both; //運動填充模式 比較少用
    <!-- 
        forwards：運動結束後保持運動結束的狀態 
        backwards:在延遲期間保持開始運動的狀態
        both：表示forwards和backwards同時存在 -->

    <!-- 運動的暫停 -->
    animation-play-status:pause; //運動暫停

    <!-- 還可將上述的animation寫到一起 -->
    animation： name time linaer 1s infinite;//名稱，時間，運動形式，延遲時間，運動次數
}

flex彈性盒子佈局

基本概念

• flex是flexible box的縮寫，意爲“彈性佈局
  ，用來爲盒裝模型提供最大的靈活性。

• 任何一個容器都可以指定爲flex佈局。

• 採用flex佈局的元素，成爲Flex容器（flex container）簡稱"容器“，他的所有子元素都自動成爲容器成員，成爲flex項目（flex item），簡稱”項目“

• 容器默認存在兩根軸，水平叫”主軸“（main axis）和垂直的交叉軸（cross axis）起始位置和結束位置分別成爲：main start，main end,cross start cross end;

• 項目默認沿着主軸排列，單個項目佔用的主軸控件叫做main size，佔據的交叉軸控件叫做cross size。

特點

1. 彈性盒模型容器中的項目默認在主軸上排列
2. 如果項目總寬度，小於容器寬度，按照設置的寬度正常排列;如果項目總寬度大於容器寬度，那麼項目寬度均分總寬度，設置的寬度就無效了。

主軸方向

主軸方向可以定義，主軸和交叉軸永遠是交叉的。

1. flex-direction: row-reverse|column|column-reverse 定義主軸方向

元素在主軸上對齊方式

項目在容器的主軸上的對齊方式可以利用justify-content設置

1. justify-content: flex-start|flex-end|center|space-between|space-around；定義主軸上對齊方式，

分別是:
flex-start:從主軸開始起對齊排列，
flex-end:結束起對齊排列，
center:居中對齊排列，
space-between:兩端對齊-項目之間間隔都相等
space-around:每個項目兩側間隔相等。

元素在交叉軸上的對齊方式

1. align-items：flex-start|flex-end|center|baseline|stretch；

其中：
flex-start： 交叉軸的起點對齊。
flex-end：交叉軸的終點對齊
center：交叉軸的中點對齊
baseline：項目的第一行文字的基線對齊
stretch：（默認值）如果項目未設置高度或設置爲auto，將佔滿整個容器的高度 （stretch的意思是拉伸）

項目的換行

1.flex-wrap：wrap|wrap-reverse; 用於設置項目換行。

wrap：如果子元素也就是項目的總寬度大於父級元素也就是容器的寬度，那麼一行能放多少則放多少，多餘的放在下一行
wrap-reverse; 從下方開始換行

多根軸線的對齊方式

多根軸線的排列就是多行項目的排列方式
/* 這個屬性沒看懂 */

1. align-content: flex-start|flex-end|center|space-between|space-around；

項目的順序

1. order：3; 默認爲0，越小排列越靠前

項目的寬度比例

是項目之間的比例

1. flex：2 ； 默認爲1，寬度的比例