CSS-2 === ## 元素顯示與隱藏 ### display `dispaly: none;` > - 隱藏且==不佔位== `display: block;` > - 轉為塊元素 > - 顯示 ### visibility `visibility: hidden;` > - 隱藏, ==佔位== `visibility: visible;` > - 顯示 ### overflow > - 當一個盒子內容物超出時會溢出 <img src="https://i.imgur.com/L1YR3qy.png" style="width:100px"/> > - `overflow: visible;`: 默認, 啥也不幹 > - `overflow: auto;`: ==超出時==顯示滾動條, 不讓內容溢出 > - `overflow: scroll;` : 總是顯示滾動條 (實際測試: Chrome77還是要溢出才有滾動條) > - `overflow: hidden;` : 溢出部分直接隱藏, 也沒有滾動條 ### 實作: 滑鼠經過後顯示NameTag > - 這招經常使用在導航Bar, 經過時顯示導航細項 ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 100px; line-height: 100px; background: gray; color: white; text-align: center; margin: 300px auto; position: relative; } div img { width: 200px; position: absolute; left: 100px; top: 0; display: none; } div:hover img { display: block; } </style> </head> <body> <div> NameTag <img src="NameTag.png"/> </div> </body> ``` ## CSS用戶界面樣式 ### 滑鼠 > 移動到目標時的滑鼠樣式 > - `cursor: default;` <img src="https://i.imgur.com/skuz2pj.png" style="width:20px"/> > - `cursor: pointer;` <img src="https://i.imgur.com/nsb0dhn.png" style="width:20px"/> > - `cursor: move;` <img src="https://i.imgur.com/Pf72Aqm.png" style="width:20px"/> > - `cursor: text;` <img src="https://i.imgur.com/oivlAV9.png" style="width:18px"/> > - `cursor: hand;` 也是<img src="https://i.imgur.com/oivlAV9.png" style="width:18px"/> ，但FireFox不支持 > - `text` IE6以上都支持，故盡量使用這個 > - `cursor: not-allowed;` ### 輪廓 outline <img src="https://i.imgur.com/tAlmFxi.png" style="width:100px"/> -> <img src="https://i.imgur.com/IJMvvU5.png" style="width:100px"/> > - 在border外圍的線( 不是Border ) > - 設置 `{outline: outline-color | outline-style | outline-width}` > - input點擊輸入時預設是有的 > - 刪除 `<input type="text" style="outline: 0;" />` 或 `style: none;` ### 防止拖曳文本域 resize > - 文本域 `<textarea></textarea>` <img src="https://i.imgur.com/YwP5BZ4.png" style="width:200px"/> > - 由於文本域預設可以拖曳, 有時會有點困擾 > - 取消文本域拖曳 `<textarea style="resize: none;"></textarea>` ### Vertical-align: 垂直對齊 > - 複習對齊 ```html <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; border: 1px solid gray; margin: 0 auto; /* 盒子水平居中 */ text-align: center; /* 文字水平居中 */ line-height: 100px; /* 文字垂直居中 * line-height=height 運用的是文字預設中線對其的效果*/ } </style> </head> <body> <div>刷一排漢堡</div> </body> } ``` > - 垂直對齊種類: top(藍) | middle（黃） | baseline(紅) | bottom(灰) ![](https://i.imgur.com/1bXdvTW.png) > > - Vertical-align 只對inline 或 inline-block 起效果 > - 文字和圖片默認基線(baseline)對齊 > <img src="https://i.imgur.com/K5I16VB.png" style="width:200px"/> -> <img src="https://i.imgur.com/iqd3fkB.png" style="width:200px"/> > > <img src="https://i.imgur.com/euZbSGA.png" style="width:200px"/> -> <img src="https://i.imgur.com/8hK3ekf.png" style="width:200px"/> > 防Bug行 ```htmlmixed= <head> <meta charset="utf-8"> <style> img { /* inline-block */ /* vertical-align: baseline; 默認基線對齊 */ vertical-align: middle; } textarea { vertical-align: middle; } </style> </head> <body> <img src="raccoon.jpeg"/>Raccoon <hr /> 文字域: <textarea></textarea> </body> ``` ### 去除圖片下面空白縫隙 > - 由於行內塊元素的底線會和父級盒子的baseline對齊， > - 舊版本的瀏覽器有時候下面會有一層底線 > <img src="https://i.imgur.com/AAmbPWY.png" style="width:100px;" /> > 防Bug ```htmlembedded= <head> <meta charset="utf-8"> <style> div { width: 225px; height: 225px; background: blue; } img { width: 225px; height: 225px; } </style> </head> <body> <div> <img src="raccoon.jpeg"/> </div> </body> ``` > - 解決辦法： > - `img {display: block;}` > - `img {vertical-align: top | middle;}` (常用) ### 盒子垂直居中 <img src="https://i.imgur.com/KftmbO7.png" style="width: 100px;"/> -> <img src="https://i.imgur.com/0tQXxEF.png" style="width: 100px;"/> - 第一種 ```css .father { position: relative; } .son { position: absoulute; top: 50%; transform: translateY(-50%); } ``` - 第二種 margin-top - 第三種 vertical-align - 前提: 父盒子必需轉為`display:table-cell` - `table-cell`: 表格單元格, 類似於\<td> ```htmlmixed= <head> <meta charset="utf-8"/> <style> .one { height: 200px; width: 200px; border: 1px solid skyblue; display: table-cell; /* 類似於<td> */ vertical-align: middle; } .two { height: 100px; width: 100px; border: 1px solid blue; } </style> </head> <body> <div class="one"> <div class="two"></div> </div> </body> ``` ### 盒子水平居中 - 第一種 `margin: 0 auto;` - 第二種 `margin-left` - 第三種 ```css .father { position: relative; } .son { position: absoulute; left: 50%; transform: translateX(-50%); } ``` - 第四種 - 子元素轉成`display: inline-block` - 父元素`text-align: center` - `text-align` : 文本水平居中的設定 ```css .father { text-align: center; } .son { display: inline-block; } ``` ### 垂置居中 fixed + margin ```htmlmixed= <head> <meta charset='utf-8'> <style> div { background: red; opacity: 0.5; position: fixed; width: 100px; height: 100px; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } </style> </head> <body> <div></div> </body> ``` ## 文字溢出 <img src="https://i.imgur.com/Hqvi6iR.png" style="width:100px;" /> ### word-break > 用於處理英文, 因為中文本來就拆不了 > - `word-break: normal;`: 就沒變 > - `word-break: break-all;` : 允許英文字拆開 > <img src="https://i.imgur.com/UUCQqZL.png" style="width:100px;" /> > - `word-break: keep-all;` : 只允許連字符或空格處換行, 其實也就是沒變 > <img src="https://i.imgur.com/bLZHtSQ.png" style="width:100px;" /> ### white-space > - `white-space: normal;` > - `white-space: nowrap;`: 強制在同一行顯示, 除非遇到 <br/> > <img src="https://i.imgur.com/vAyOGGz.png" style="width:150px;" /> > ### text-overflow > - 使用前提: > - 必須強制顯示一行 `white-space: nowrap;` > <img src="https://i.imgur.com/vAyOGGz.png" style="width:150px;" /> > > - 必須搭配`overflow` 使用 > <img src="https://i.imgur.com/9sjTHhM.png" style="width:100px;" /> > - `text-overflow: clip;`: 直接裁減，其實就是上圖，沒變 > - `text-overflow: ellipsis;` : 裁減的部分用(...)代替 > <img src="https://i.imgur.com/OgnRLRc.png" style="width:100px;" /> ### 顯示多行的隱藏(webkit的css擴展屬性) > 上面是顯示單行的隱藏方法, 以下則是顯示單行的隱藏方法( 限定 webkit ) <img src="https://i.imgur.com/xfEJXTp.png" style="width: 200px;"/> -> <img src="https://i.imgur.com/c64eH51.png" style="width: 200px;"/> > - 使用前提: `display: box` > 1. `-webkit-box-orient: vertical;`: 設定盒子的排列方式 > 2. `-webkit-line-clamp: <num>`: 顯示行數 > 3. `overflow: hidden`: 把超出盒子的隱藏 > 4. `text-overflow: ellipsis`: 隱藏的部分用...的效果 ### 自己自製隱藏 <img src="https://i.imgur.com/384EDvm.png" style="width:300px;" /> -> <img src="https://i.imgur.com/NEzg7cn.png" style="width:200px;" /> -> <img src="https://i.imgur.com/Jhs6tJ5.png" style="width:100px;" /> ```htmlmixed= <head> <meta charset="utf-8"/> <style> p { /* 先將 p 設需要的寬高 */ height: 30px; line-height: 2em; border: 1px solid skyblue; /* 輔助用, 在線外面都是要隱藏的 */ position: relative; overflow: hidden; } p::after { content: "..."; position: absolute; right: 0; top: 0; padding: 0 45px 0 0; } </style> </head> <body> <p>Evolving from single-celled yellow organisms at the dawn of time, Minions live to serve, but find themselves working for a continual series of unsuccessful masters, from T. Rex to Napoleon. Without a master to grovel for, the Minions fall into a deep depression. But one minion, Kevin, has a plan; accompanied by his pals Stuart and Bob, Kevin sets forth to find a new evil boss for his brethren to follow. Their search leads them to Scarlet Overkill, the world's first-ever super-villainess.Evolving from single-celled</p> </body> ``` ## CSS Sprite ### 使用背景 > - 網頁每張圖片都需要跟服務器請求一次 > - 當網頁圖片過多時，服務器的壓力就會過大 ### Sprite原理 > - 把多張==背景圖片==集中到一張大圖，此時只需要請求一次 ### 使用方法 > - 運用`background-position`調整到想要使用圖的座標 ### 小技巧 > - PhotoShop 查看XY與寬高 > <img src="https://i.imgur.com/BhJy4xE.png" style="width:100px;" /> -> <img src="https://i.imgur.com/GzV41oD.png" style="width:200px;" /> -> <img src="https://i.imgur.com/np68lhu.png" style="width:100px;" /> ### 資源 > https://www.spriters-resource.com/ ### 實作: FaceBookLogo ![](https://i.imgur.com/x5NMq0y.png) > - 這裡有一張圖， 如果我想要使用橘色FaceBookLogo > - 首先先測量裝圖的盒子大小(Logo大小): 72*72px > - 接著測量Logo所在位置的左上角XY值: (80, 234) ```htmlmixed= <head> <meta charset="utf-8"> <style> div { /* 先創建一個裝圖的盒子 */ width: 72px; height: 72px; /* 把圖丟進去 */ background: url(sprite.png) no-repeat; /* 移到位置上 * 圖在(80,234)， * 故應該把圖向左移80，向上移234 * 由於CSS的Y軸向下是正的, 故Y向上移應該是負數*/ background-position: -80px -234px; /* 此時得到一個FBLogo盒子 */ margin: 100px auto; /* 這盒子就可以隨便亂動了 */ } </style> </head> <body> <div></div> </body> ``` ### 實作: RACCOON ![](https://i.imgur.com/WNRXie9.jpg) ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 20px; height: 20px; background: url(AtoZ.jpg) no-repeat; float: left; } nav { margin: 200px; } .R { background-position: -52px -218px; } .A { background-position: -29px -186px; } .C { background-position: -76px -186px; } .O { background-position: -364px -186px; } .N { background-position: -342px -186px; } </style> </head> <body> <nav> <div class="R"></div> <div class="A"></div> <div class="C"></div> <div class="C"></div> <div class="O"></div> <div class="O"></div> <div class="N"></div> </nav> </body> ``` ## 字體圖標 (iconfont) > - 圖片的缺點: > - 體積大 > - 請求多 > - 縮放失真 > - 字體圖標: 雖然表面上是圖, 實際上是字型 > - 可以做跟圖片一樣的事 > - 可以做字型在做的事，如改顏色、陰影.. > - 體積小 > ### 另外使用方法, > - 直接引入對方的圖庫 `<link style=>` > - 給要使用的標籤設他圖庫給的類名 `<i class='xxx'>` > - https://www.oxxostudio.tw/articles/201406/css-icon-font.html > - https://fontawesome.com/ ### 使用方法 > - 設計效果圖(svg) > - UI人員使用illustrator或sketch設計 > - 輸出成svg檔 > - 上傳轉換 > - 將svg檔轉成網頁能使用的字體文件 > - [IcoMoon](https://icomoon.io/)，[阿里媽媽](https://www.iconfont.cn/)，[fontello](http://fontello.com/)，[FontAwesome](https://fontawesome.com/)，[GlyphiconHalflings](https://glyphicons.com/)，[Icons8](https://icons8.com/)...等 > - 下載到本地(以IcoMoon)為例 > - 到官網後點選右上角的IcoMoon APP > <img src="https://i.imgur.com/ouxauL9.png" style="width:100px"/> > - 上傳自己的或選取內建的 > - 選完後按GenerateFont來生成 > <img src="https://i.imgur.com/2MGRoC5.png" style="width:500px"/> > - 確認沒問題後Download > <img src="https://i.imgur.com/oxfTZFR.png" style="width:300px"/> > - 旁邊的設定鍵可以設定一些東西，例如圖標支援IE6 > - 將字體引用至頁面 > - 下載後解壓，有一個fonts資料夾，將他複製到Project資料夾中 > <img src="https://i.imgur.com/8qbraqB.png" style="width:200px"/> ### 轉檔工具 > - [FontSquirrel](https://www.fontsquirrel.com/tools/webfont-generator) > ``` > text/ > ├── fonts > │   ├── icomoon.eot > │   ├── icomoon.svg > │   ├── icomoon.ttf > │   └── icomoon.woff > ├── images > └── web >    └── index.html >    └── style.css > ``` > - 此時就可以使用了，接下來需聲明字體 ```css @font-face { /* 聲明字體, 內容除了font-family以外都不要改 */ font-family: 'icomoon'; /* font-family 定義名稱可以隨便取 */ src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; } ``` > - 讓盒子使用字體 ```css span { font-family: "icomoon" /* 必須跟聲明的變量名一樣 */ } ``` > 此時span以可以使用該字體，接著只要在html輸入該字體即可 > - 回到剛剛下載網頁，如果關掉了就打開剛剛解壓的資料夾有個demo.html > - <img src="https://i.imgur.com/AyDisHe.png" style="width:200px"/> > - 每個圖標都有一個框框跟一串字符串 > - 複製框框 > - 複製那個框框到標籤中 ```htmlmixed= <body> <span></span> </body> ``` > - 手打字符串(前面要加一個"\\") ```htmlmixed= <head> <style> div::before { content: "\ea92" } </style> </head> <body> <div></div> </body> ``` > - <img src="https://i.imgur.com/BRVtEkq.png" style="width:50px"/> ```htmlmixed= <head> <meta charset="utf-8"> <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?7kkyc2'); src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?7kkyc2') format('truetype'), url('fonts/icomoon.woff?7kkyc2') format('woff'), url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg'); font-weight: normal; font-style: normal; } span::before { content: "\ea91"; font-family: "icomoon"; } div { font-family: "icomoon"; font-size: 30px; /* 此時就可以使用font來玩了 */ color: darkblue; } </style> </head> <body> <span></span> <div></div> </body> ``` > - 追加ICONFont > - 打開IcoMoon > <img src="https://i.imgur.com/ouxauL9.png" style="width:100px"/> > <img src="https://i.imgur.com/MhNY77J.png" style="width:100px"/> > - 選擇selection.json > <img src="https://i.imgur.com/yD6NtQ5.png" style="width:200px"/> > - 此時會看到剛剛載下來的那幾個， > <img src="https://i.imgur.com/z142mmR.png" style="width:200px"/> > - 接著把想要的也都選一選重新下載後把project的fonts換掉就好了 > - 故下載下來的檔案在更新之前都要留著，否則之後要添加就要整個code改一改了 ## 滑動門 ![](https://i.imgur.com/O3tLs3d.png) > - 常常會遇到一些難做的框框，例如上圖， > - 通常這類都會使用背景圖來完成，惟字數都不一樣多是如何做到的呢？ > - CSS滑動門技術就是來解決這類問題 ### 核心想法 > - 運用padding來撐開寬度，如此寬度就能依內容而定 > - 運用背景圖片位置來完成框框 ```htmlmixed= <head> <meta charset="utf-8"> <style> a, a span { background: url(ao.png) no-repeat; /* a跟span都使用下面那張圖當背景 */ height: 33px; /* 輪廓整個高度為33px */ display: inline-block; } a { padding-left: 15px; /* 不能把寬度寫死，所以使用padding來撐開 * 輪廓的寬差不多為15px*/ } a span { background-position: right; /* span需要的是右半邊的輪廓 */ padding-right: 15px; } </style> </head> <body> <a href="#"> <span></span> </a> </body> ``` > - ao.png: ![](https://i.imgur.com/INakgjB.png) > - <img src="https://i.imgur.com/iBqMg9d.png" style="width:150px"/> > - 結果: <img src="https://i.imgur.com/IF7WiRY.png" style="width:80px"/> > - 此時就完成了左右兩邊的輪廓， > - 在span輸入字所撐開的寬之背景都是span背景剩下全黑的部分 > - 寬度也視內容而定，沒有內容就30px寬 > <img src="https://i.imgur.com/KpxZkLd.png" style="width:100px"/> ### 實作: 微信NAV ```htmlmixed= <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } ul { list-style: none; } .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } body { background: url(wx.jpg) repeat-x; } /* nav */ div { width: 965px; margin: 0 auto; } ul { height: 75px; float: right; } li { float: left; margin-top: 20px; line-height: 33px; } a { padding-left: 15px; color: #fff; text-decoration: none; } span { padding-right: 15px; } .first, .first span, a:hover, a:hover span { display: inline-block; height: 33px; } .first { padding-left: 15px; background: url(lTcb_ve.png) no-repeat; } .first span { padding-right: 15px; background: url(lTcb_ve.png) no-repeat; background-position: right; } a:hover { background: url(ao.png) no-repeat; } a:hover span{ /* 滑鼠經過a之後span也要換背景，因為a只有左邊15px那一塊*/ background: url(ao.png) no-repeat; background-position: right; } </style> </head> <body> <div class="clearfix"> <ul> <li> <a href="#" class="first"> <span>首頁</span> </a> </li> <li> <a href="#"> <span>幫助與反饋</span> </a> </li> <li> <a href="#"> <span>公眾平台</span> </a> </li> <li> <a href="#"> <span>開放平台</span> </a> </li> <li> <a href="#"> <span>微信支付</span> </a> </li> <li> <a href="#"> <span>微信網頁版</span> </a> </li> <li> <a href="#"> <span>表情開放平台</span> </a> </li> <li> <a href="#"> <span>微信廣告</span> </a> </li> </ul> </div> </body> ``` ## before & after > - 偽元素: 因為他不是真正HTML的元素，而是CSS製作貌似頁面元素的效果 > - 默認`display: inline;`且必須要有==content== ### 實作: 滑鼠經過品項後添加編框 ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 225px; height: 225px; margin: 300px auto; position: relative; } div:hover::before { /* 滑鼠經過後在div前面添加偽元素 */ content: ""; width: 100%; height: 100%; display: block; border: 10px solid rgba(0,0,0,0.2); position: absolute; top: 0; left: 0; box-sizing: border-box; } </style> </head> <body> <div> <img src="raccoon.jpeg"/> </div> </body> ``` ## 過渡(Transition, CSS3) ### 前情提要 <img src="https://i.imgur.com/fxGaz4C.png" style="height: 100px"/> -> <img src="https://i.imgur.com/MLBn6wN.png" style="height: 100px"/> > - 當我使用hover讓滑鼠經過圖一(`width: 100px`)時變成圖二(`width: 200px`) > ```css > div:hover { > width:200px; > } > ``` > - 此時他會瞬間轉換成200px > - 過渡就是讓轉換有動畫效果: 一幀幀案順序速度播放 ### 語法 `transition: property [ duration || timing-function || delay ];` > - `transition-preperty`: 要過渡的CSS屬性名稱 > - `transition-preperty: all;`：全屬性都要變化過渡 > - `transition-duration`: 過渡花費的時間 > - 必須寫單位, s/ms > - 預設: 0s > - `transition-timing-function`: 時間曲線 > - ![](https://i.imgur.com/7zTsBTx.png) > - 預設: ease > - `transition-delay`: 延遲 > - 必須寫單位, s/ms > - 預設: 0s > - 如果有多組變化, 用==逗號==隔開 > - 不限於hover ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; border: 1px solid skyblue; /*transition: width 0.5s ease 0s;*/ transition: width 0.5s, height 0.5s 1s, background 0.5s 1s; } div:hover { width: 200px; height: 200px; background: darkblue; } </style> </head> <body> <div></div> </body> ``` ## Transform(2D變形，CSS3) > - 實現位移，旋轉，縮放，矩陣 ### Translate(移動) > - `transform: translate(x,y);` > - `transform: translateX(x);` > - `transform: translateY(y);` > - XY可負值 > - 如果值是%，是以==自己==寬度去計算，與margin不同 > ```css > div { > width: 100px; > height: 100px; > transform: translateX(50%); /* 向右移動50px(100px*50%) */ > } > ``` > - 佔位是佔移動前的位置 > <img src="https://i.imgur.com/MobT9He.png" style="width: 100px;"/> -> <img src="https://i.imgur.com/7C07lz7.png" style="width: 100px;"/> > 前者為移動前, 後者為移動後, 移動後ds並沒有移動 ### 移動: 置中 ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; border: 1px solid skyblue; position: absolute; left: 50%; top: 50%; /* 以前的置中 margin-right: -50px; margin-top: -50px; 缺點: 要自己算，如果盒子大小改了，這裡也要跟著改*/ transform: translate(-50%, -50%); } </style> </head> <body> <div></div> </body> ``` ### Scale(縮放) > - `transform: scale(x,y);` > - 只設一個值: X=val, y=val > - `transform: scaleX(x);` > - `transform: scaleY(y);` > - scale預設值為1 > - 縮小: `scale(0.01~0.99)` > - 放大: `scale(1.01)`以上 ```htmlmixed= <!-- 常見的縮放應用: 滑鼠移到圖片會緩慢放大, 離開後縮小 --> <head> <meta charset="utf-8"> <style> div { width: 225px; height: 225px; border: 1px solid skyblue; margin: 300px auto; overflow: hidden; /* 超出隱藏 */ } img { /* 注意不是盒子在縮放, 是img! */ transition: transform 0.5s; } div:hover img{ transform: scale(1.25); } </style> </head> <body> <div> <img src="raccoon.jpeg"/> </div> </body> ``` > - 負數為反轉 ```htmlmixed= <head> <meta charset='utf-8'> <style> div { height: 200px; width: 200px; margin: 200px auto 0; background: yellow; transform: scale(1); transition: 1s all ease; } div:hover { transform: scale(-1, 1); } </style> </head> <body> <div>123</div> </body> ``` ### Rotate(旋轉) `transform: rotate(deg);` > - 單位是deg(度) > - 正值是順時針轉, 負值是逆時針轉 ### Transform Origin 設定變形點 `transform-origin: x y;` > - center | left | right | top | bottom > - px > - 預設是 `transform-origin: center center` ```htmlmixed= <head> <meta charset="utf-8"> <style> img { margin: 300px 300px; transition: transform 0.5s; transform-origin: right bottom; /* 變形點改成右下 */ } img:hover { transform: rotate(180deg); /* 以右下為基點轉180 */ } </style> </head> <body> <img src="raccoon.jpeg"/> </body> ``` ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 180px; height: 73px; border: 1px solid skyblue; margin: 300px auto; position: relative; } img { width: 100%; height: 100%; transition: all 0.3s; position: absolute; transform-origin: right bottom; } div:hover img:nth-child(1) { transform: rotate(60deg); } div:hover img:nth-child(2) { transform: rotate(120deg); } div:hover img:nth-child(3) { transform: rotate(180deg); } div:hover img:nth-child(4) { transform: rotate(240deg); } div:hover img:nth-child(5) { transform: rotate(300deg); } div:hover img:nth-child(6) { transform: rotate(360deg); } </style> </head> <body> <div> <img src="original.jpg"/> <img src="original-1.jpg"/> <img src="original-2.jpg"/> <img src="original-3.jpg"/> <img src="original-4.jpg"/> <img src="original-5.jpg"/> </div> </body> ``` ### Skew(傾斜) > - `transform: skew(xdeg,ydeg);` > - `transform: skewX(xdeg);` > - `transform: skewY(ydeg);` ### 多個 transform 變換 `transform: xx1() xx2() ...` > - 多個 transform 一起執行時, 執行順序是從後面執行到前面(xx2->xx1) > - 其實code是從前往後的, 是矩陣乘法的關係 > 任何一個圖形操作, 其實都是矩陣操作, > 如果我同時執行 5 個圖形操作, 其實是做[矩陣乘法](https://zh.wikipedia.org/wiki/%E7%9F%A9%E9%99%A3%E4%B9%98%E6%B3%95) > 而矩陣乘法最終結果看起來就是反過來的 > - 先執行誰當然就會影響最終圖形的成果 > - 正方形先拉長後旋轉 > <img src='https://i.imgur.com/wPJTzMG.png' style='width: 200px'/> > - 正方形先旋轉後拉長 > <img src='https://i.imgur.com/OHJcOaU.png' style='width: 200px'/> ```css div { height: 100px; width: 100px; border: 1px solid black; margin: 100px auto; } div:hover { /* 先旋轉再拉長 transform: scale(2,1) rotate(45deg);*/ /* 先拉長再旋轉 */ transform: rotate(45deg) scale(2,1); } ``` ## 3D Transform (CSS3) ### 3D > - 一般的3D方向 > ![](https://i.imgur.com/KHicG75.png) > - CSS3的3D方向 > ![](https://i.imgur.com/nZseXaF.png) ### Rotate(旋轉) > - `transform: rotateX(xdeg);`: 繞X軸轉 > - `transform: rotateY(ydeg);`: 繞Y軸轉 > - `transform: rotateZ(zdeg);`: 繞Z軸轉 > - `transform: rotateX(xdeg) rotateZ(zdeg) rotateY(ydeg);` > - 理解 XYZ 旋轉效果小技巧, 想像自己在+XYZ的末端看著軸, 順時鐘轉是正的 ### Perspective(透視) <img src="https://i.imgur.com/k0kfLBK.png" style="width: 300px"/> -> <img src="https://i.imgur.com/frm4FHS.png" style="width: 300px"/> <img src="https://i.imgur.com/Pnahet2.png" style="height: 300px"/>-><img src="https://i.imgur.com/qMNpN9D.png" style="height: 300px"/> > - 讓2D呈現3D效果 > - 原理: 近大遠小 > - 如果不寫的話, 透視預設就是無窮大 > 而透視給的越小, 3D 感覺越明顯, > 反之則越不明顯, 所以不加看起來當然就沒有3D效果 > - 下面透視圖的兩個原點就是透視點([滅點](https://zh.wikipedia.org/wiki/%E6%B6%88%E5%A4%B1%E7%82%B9)), 兩點越近越立體 > <img src='https://i.imgur.com/XeJ38zH.jpg' style='width: 200px'/> > - `perspective: px`: 設置視點距離 > `transform: perspective(px)`: 另一種寫法 > 常用 300 700 1200 > - perspective要設置在父元素，轉換其子元素的3D效果 ### TranslateZ `transform: translateZ(z)` > - translateX跟translateY是平面的上下左右移動 > - translateZ即前後移動，正值向前，負值向後 > - z 不能寫%數, 只能寫值 ![](https://i.imgur.com/ycZGi9D.png) > - perspective就是模擬眼睛到螢幕的距離(d) > - translateZ就是模擬盒子的高度(z) > - 亦即perspective = translateZ時，表示物體整個塞在你的眼睛前面，故呈現盒子的表面內容佔滿版 ### Translate3D `transform: translate3d(x,y,z)` > - 就是把translate寫在一起的東西 > - x,y跟上面一樣, 可寫%或值 > - z只能寫值 ### 實作: 開門 ```htmlmixed= <head> <meta charset="utf-8"> <style> .Door { width: 225px; height: 225px; margin: 300px auto; border: 1px solid skyblue; position: relative; perspective: 500px; } /* 門 */ .leftDoor, .rightDoor { width: 112.5px; height: 225px; background: orange; position: absolute; transition: all .5s; } .leftDoor { transform-origin: left; } .rightDoor { right: 0; background: red; transform-origin: right; } /* 門把 */ .leftDoor::before, .rightDoor::before { content: ""; position: absolute; top: 50%; width: 10px; height: 10px; border: 1px solid black; border-radius: 50%; transform: translateY(50%); } .leftDoor::before { right: 10px; } .rightDoor::before { left: 10px; } /* 動 */ .Door:hover .leftDoor { transform: rotateY(-135deg); } .Door:hover .rightDoor { transform: rotateY(135deg); } </style> </head> <body> <div class="Door"> <div class="leftDoor"></div> <div class="rightDoor"></div> </div> </body> ``` ### Backface-Visibility(背面顯示) > - `backface-visibility: hidden;` ### 實作: 翻轉圖片 ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; border: 1px solid skyblue; margin: 300px auto; position: relative; perspective: 500px; } .front, .behind { width: 100%; height: 100%; margin: 0; position: absolute; transition: all .8s; } .front { background: orange; z-index: 1; backface-visibility: hidden; } .behind { background: red; } div:hover .front, div:hover .behind { transform: rotateY(180deg); } </style> </head> <body> <div> <div class="front"></div> <div class="behind"></div> </div> </body> ``` ## Transform-Style `transform-style: flew | preserve-3d;` > - 默認為 `flew` > - 指定子元素看起來是二維還是三維 > - 當只有子元素設置旋轉時, 看起來是三維 > <img src="https://i.imgur.com/yAVxIVb.png" style="width: 100px;"/> > - 惟當父元素也設置旋轉時, 子元素會跟著父元素跑, 子元素會變成二維視覺 > <img src="https://i.imgur.com/pCDEpQh.png" style="width: 100px;"/> > - `preserve-3d` > - 讓子元素可以脫離父級 > - 如有需要脫離, 該父級都必須寫 > - vs. `perspective` > - 只是一種視覺效果 > - 一般只會加在最外層一次 ```htmlmixed= <head> <meta charset="utf-8"/> <style> body { perspective: 500px; } .father { width: 300px; height: 300px; border: 3px solid red; margin: 300px auto; transform: rotateY(0deg); transform-style: preserve-3d; /* 設置前, 子元素會跟著父元素轉 */ } .son { border: 3px solid blue; height: 100%; width: 100%; transform: rotateY(60deg); } </style> </head> <body> <div class="father"> <div class="son"></div> </div> </body> ``` ```htmlmixed= <head> <meta charset='utf-8'> <style> .f { height: 100px; width: 100px; border: 1px solid black; margin: 200px auto; transition: 1s all ease; transform: perspective(700px) rotateX(45deg) rotateZ(45deg); /* 這個只解除 .s 的 3d 限制 */ transform-style: preserve-3d; } .s { height: 100%; width: 100%; background: skyblue; /* 這個解除了 .s2 的 3d 限制 */ transform-style: preserve-3d; } .s:hover { transform: translateZ(30px); } .s2 { height: 70%; width: 100%; background: green; transform: translateZ(0); } .s2:hover { transform: translateZ(30px); } </style> </head> <body> <div class='f'> <div class='s'> <div class='s2'></div> </div> </div> </body> ``` ### 實作: 正方體 ```htmlmixed= <head> <meta charset='utf-8'> <style> .main { height: 200px; width: 200px; margin: 300px auto; background: gray; position: relative; transition: 3s all ease; transform: perspective(700px) rotateX(30deg) rotateY(30deg); transform-style: preserve-3d; } .main:active { transform: perspective(700px) rotateX(360deg) rotateY(360deg); } .main div { position: absolute; top: 0; right: 0; border: 1px solid black; height: 100%; width: 100%; } .top { transform: rotateX(90deg) translateZ(100px); } .botton { transform: rotateX(-90deg) translateZ(100px); } .right { transform: rotateY(90deg) translateZ(100px); } .left { transform: rotateY(-90deg) translateZ(100px); } .front { transform: translateZ(100px); } .back { transform: translateZ(-100px); } </style> </head> <body> <div class='main'> <div class='top'>上</div> <div class='botton'>下</div> <div class='left'>左</div> <div class='right'>右</div> <div class='front'>前</div> <div class='back'>後</div> </div> </body> ``` ### 實作: 翻轉副克牌 ```htmlmixed= <head> <meta charset='utf-8'> <style> .main { height: 200px; width: 150px; background: blue; margin: 300px auto 0; transform: perspective(300px) rotateY(0); transition: 1s all ease; position: relative; transform-style: preserve-3d; /* 解放子元素的 translateZ */ } .main:hover { transform: perspective(300px) rotateY(180deg); } .main div { height: 100%; width: 100%; position: absolute; top: 0; left: 0; } .front { background: red; transform: translateZ(10px); } .back { background: green; transform: translateZ(-10px) scaleX(-1); } </style> </head> <body> <div class='main'> <div class='front'>紅心A</div> <div class='back'>紅心A</div> </div> </body> ``` ### 實作: 超酷炫旋轉 ![](https://i.imgur.com/cnDDNqF.png) > - 想法: 滑鼠放上淺藍色盒子時, 全部旋轉 > - 邏輯: > - 由於是立體的, 中間盒子與外圍盒子要有距離(translateZ), (prespective) > - 每個盒子都水平繞著中間盒子的感覺, Y軸旋轉 > - 要讓子盒子有3D感(transform-style: preserce-3d) ```htmlmixed= <head> <meta charset="utf-8"/> <style> body { perspective: 1000px; } nav { width: 100px; height: 100px; background: skyblue; margin: 300px auto; position: relative; transition: all 5s; transform-style: preserve-3d; } nav:hover { transform: rotateY(360deg); } div { width: 100%; height: 100%; background: darkblue; position: absolute; top: 0; left: 0; } div:nth-child(1) { transform: rotateY(0deg) translateZ(400px); } div:nth-child(2) { transform: rotateY(60deg) translateZ(400px); } div:nth-child(3) { transform: rotateY(120deg) translateZ(400px); } div:nth-child(4) { transform: rotateY(180deg) translateZ(400px); } div:nth-child(5) { transform: rotateY(240deg) translateZ(400px); } div:nth-child(6) { transform: rotateY(300deg) translateZ(400px); } </style> </head> <body> <nav> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </nav> </body> ``` ### 實作: 翻書 ```htmlmixed= <head> <meta charset='utf-8'> <style> .book { width: 200px; height: 100px; position: relative; margin: 200px auto 0; /* 讓書本倒下來 */ transform: perspective(300px) rotateX(30deg); transform-style: preserve-3d; } .book .page { position: absolute; top: 0; width: 98px; /* 200/2-2(邊框) */ height: 98px; /* 100-2(邊框) */ border: 1px solid black; } /* 左邊頁 */ .book .page1 { left: 0; } /* 右邊頁 */ .book .page4 { right: 0; } /* 翻書頁 */ .book .page23 { left: 50%; position: relative; transform-style: preserve-3d; transition: 1s all ease; transform-origin: left; /* 旋轉的軸線 */ } /* 翻書 */ .book .page23:active { transform: rotateY(-180deg); } .book .page2, .book .page3 { height: 100%; width: 100%; position: absolute; } .book .page2 { transform: translateZ(1px); background: red; } .book .page3 { transform: translateZ(-1px) scaleX(-1); background: green; } </style> </head> <body> <div class='book'> <div class='page page1'>123</div> <div class='page page23'> <div class='page2'>456</div> <div class='page3'>789</div> </div> <div class='page page4'>10</div> </div> </body> ``` ### 其他 > - transform-3d 很難做非常複雜的東西 > - Q. 如何製作更複雜的幾何? > - 必須依靠 JS 的 webGL, 這東西可以做出非常非常複雜的 3D 模型, 只是我不會 ## Animation(動畫) ### @keyframes 定義動畫 > `@keyframes animationname { keyframes-selector { css-styles;}}` > - `animationname`: 必須, 動畫名稱 > - `keyframes-selector`: 必須, 動畫時長百分比 > - 0~100% > ```css > @keyframes test { > 0%{top: 10px} /* 時間一開始時在哪裡 */ > 10%{top: 15px} /* 時間走到10%時在哪裡 */ > 100%{top: 300px} /* 時間走到底時在哪裡 */ > } > ``` > - from {} to {} > ```css > @keyframes test2 { > from { /* 相當於0% */ > transform: translateX(10px); > } > to { /* 相當於100% */ > transform: translateX(300px); > } > } > ``` > - `css-styles`: 必須, 動畫效果 ### 執行動畫 `animation: name, duration, timimg-function[, delay,iteration-count, direction];` > - `animation-name:` > - `keyframesname;`: @keyframe定義的名字 > - `none;`: 無動畫效果, 用來取消的 > - `animation-duration: time(s/ms)`: 持續時間, 默認0 > - `animation-timimg-function:`: 時間曲線 > - `ease`: 低速起, 加速, 低速尾 (默認) > - `ease-in`: 低速起 > - `ease-out`: 低速尾 > - `ease-in-out`: 低速起尾 > - `linear`: 勻速 > - `cubic-bezier(n,n,n,n)`: 自定義yframes > - `animation-fill-mode`: 停在什麼位置上 > - `backwards`: 回到初始 > - `both`: 是次數而定, 第一次在起點, 第二次在終點 > - `forwards` : 保持在終點狀態 > - `none` > > - `animation-delay: time(s/ms);`: 延遲時間, 默認0 > - `animation-iteration-count`: 播放次數 > - `n`: 次數 > - `infinite`: 無限 > - `animation-direction`: 方向 > - `normal`: 正常播放(默認) > - `alternate`: 輪流反向 > - `animation-fill-mode` > - `animation-play-state`: 滑鼠經過時的動畫狀態 > - `paused`: 暫停 > - `running`: 持續 > - `animation-play-state` : 動畫的狀態 > - `paused` > - `running` ```htmlmixed= <head> <meta charset='utf-8'> <style> @keyframes test { 0%{height: 100px; width: 100px; background: blue; color: red;} 25%{height: 200px; width: 100px; background: blue; color: red;} 50%{height: 200px; width: 200px; background: blue; color: red;} 75%{height: 200px; width: 200px; background: black; color: red;} 100%{height: 200px; width: 200px; background: black; color: white;} } div { height: 100px; width: 100px; background: skyblue; /*transition: 1s all ease;*/ transition: 1s width ease, 3s background ease; animation-name: test; animation-duration: 2s; animation-timing-function: ease; animation-fill-mode: forwards; /*animation-delay: 2s;*/ animation-iteration-count: infinite; animation-direction: alternate; } div:hover { animation-name: null; /*animation-play-state: paused;*/ } </style> </head> <body> <div>123</div> </body> ``` ### 實作: 移動的浣熊 ```htmlmixed= <head> <meta charset="utf-8"> <style> div { width: 100px; height: 100px; border: 1px solid skyblue; position: relative; /*animation: test 2s ease-in 0s infinite alternate;*/ animation: test 5s infinite; } img { position: absolute; } /* @keyframes test { form { transform: translateX(30px); } to { transform: translateX(100px); } }*/ @keyframes test { 0% { transform: translate3d(0,0,0); } 49% { transform: translate3d(800px, 0, 0); } 50% { /* 相同屬性不同值，用空格隔開就好 */ transform: translate3d(800px, 0, 0) rotateY(180deg); } 99% { transform: translate3d(0, 0, 0) rotateY(180deg); } 100% { transform: rotateY(-180deg); } } </style> </head> <body> <div> <img src="raccoon.jpeg"/> </div> </body> ``` ### 實作: KKBOX ```htmlmixed= <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } ul { list-style: none; } div { width: 1800px; height: 365px; border: 1px solid skyblue; overflow: hidden; } ul { width: 9000px; /* 圖給兩次, 所以總寬要兩倍 900*5*2 */ animation: moving 10s linear; animation-iteration-count: infinite; } li { float: left; } div:hover ul{ /* 滑鼠經過盒子時, 動畫暫停 * kkbox沒有設這個屬性 我測試用 */ animation-play-state: paused; } @keyframes moving { 0% { /* 100%-0% 要剛好是一圈的寬度，這樣才能無縫接上 */ transform: translate3d(-725px, 0, 0); } 20% { transform: translate3d(-1625px, 0, 0); } 22% { transform: translate3d(-1625px, 0, 0); } 40% { transform: translate3d(-2525px, 0, 0); } 42% { transform: translate3d(-2525px, 0, 0); } 60% { transform: translate3d(-3425px, 0, 0); } 62% { transform: translate3d(-3425px, 0, 0); } 80% { transform: translate3d(-4325px, 0, 0); } 82% { transform: translate3d(-4325px, 0, 0); } 98% { transform: translate3d(-5225px, 0, 0); } 100% { transform: translate3d(-5225px, 0, 0); } } </style> </head> <body> <div> <ul> <li> <img src="kkbox.jpg"/> </li> <li> <img src="kkbox-1.jpg"/> </li> <li> <img src="kkbox-2.jpg"/> </li> <li> <img src="kkbox-3.jpg"/> </li> <li> <img src="kkbox-4.jpg"/> </li> <!-- 跑最後一張圖後，跑下一圈前，中間會產生空白 故需要一些圖來補後面的空白，所以圖給兩次 --> <li> <img src="kkbox.jpg"/> </li> <li> <img src="kkbox-1.jpg"/> </li> <li> <img src="kkbox-2.jpg"/> </li> <li> <img src="kkbox-3.jpg"/> </li> <li> <img src="kkbox-4.jpg"/> </li> </ul> </div> </body> ``` ## Flex ### 舊版佈局 ```htmlmixed= <head> <meta charset="utf-8"> <style> nav { width: 80%; height: 300px; border: 1px solid skyblue; margin: 300px auto; } div { height: 100%; width: 33.3%; float: left; } div:nth-child(1) { background: blue; } div:nth-child(2) { background: green; } div:nth-child(3) { background: red; } </style> </head> <body> <nav> <div></div> <div></div> <div></div> </nav> </body> ``` > - 缺點: > - 要計算，否則很容易超過寬度而掉下來，很麻煩 > <img src="https://i.imgur.com/YdO8Wl7.png" style="width: 200px;"/> -> <img src="https://i.imgur.com/8oHBadS.png" style="width: 200px;"/> > - 要給的屬性多(至少要給寬高, 要讓block元素在一行還要float) ### flex > - 將盒子分等份，等比縮放(響應式) > - 不一定要指定flex屬性，也可以混搭 > - `min-width: px`: 使用響應式網站時，避免嚴重縮放造成變形, 可以設置盒子最小寬 > - `max-width: px`: 最大寬 > - `flex` 是一個簡寫屬性: 包含 `flex-grow` `flex-shrink` `flex-basis` > - 雙值的首值必須是 `flex-grow` > - `flex` 裡的 `float` `clear` `vertical-align` 不起作用 ```htmlmixed= <head> <meta charset="utf-8"> <style> nav { width: 80%; height: 300px; border: 1px solid skyblue; margin: 300px auto; display: flex; min-width: 700px; } div { /* 舊版排版 float: left; margin: 0 2px; width: 33.3%; height: 100%;*/ /* flex啥都不用給, 給等分就行了 */ /* 所有div都拿到一等分 flex: 1; margin: 0 2px;*/ } div:nth-child(1) { background: blue; /*flex: 1;*/ width: 300px; /*混搭也沒問題 */ } div:nth-child(2) { background: green; flex: 2; margin: 0 2px; /* 不會掉下來 */ } div:nth-child(3) { background: red; flex: 3; /* 總共六等分, 紅色拿一半*/ } </style> </head> <body> <nav> <div></div> <div></div> <div></div> </nav> </body> ``` ### flex-grow & flex-shrink > - `flex-grow` 是把剩餘空間加權分配給各個子元素 > - 例如剩餘空間 120, 子元素有兩個, 分別設 `flex-grow: 1;` `flex-grow: 2;` > - 那麼剩餘空間分配就是 120 / 3 * 1 跟 120 / 3 * 2 > <img src='https://i.imgur.com/3zRAjet.png' style='width: 100px;'/> ```htmlmixed= <head> <meta charset="utf-8"> <title></title> <style> .fa { height: 300px; width: 420px; display: flex; } .son1 { background: blue; width: 100px; flex-grow: 1; /* 拉伸 120 / 3 * 1 */ } .son2 { width: 100px; background: yellow; flex-grow: 2; /* 拉伸 120 / 3 * 2 */ } </style> </head> <body> <div class='fa'> <div class='son1'></div> <div class='son2'></div> </div> </body> ``` > - `flex-shrink` 則是把多餘空間按比例縮減 > - 例如超出120px, 兩個盒子分別設 `flex-shrink: 1;` `flex-shrink: 2;` > 則多餘空間就按比例縮減 120 / 3 * 1 跟 120 / 3 * 2 > <img src='https://i.imgur.com/SbU3th4.png' style='width: 100px;'/> ```htmlmixed= <head> <meta charset="utf-8"> <title></title> <style> .fa { height: 300px; width: 300px; display: flex; } .son1 { background: blue; width: 210px; flex-shrink: 1; /* 縮減 120 / 3 * 1 = 40 */ } .son2 { width: 210px; background: yellow; flex-shrink: 2; /* 縮減 120 / 3 * 2 = 40 */ } </style> </head> <body> <div class='fa'> <div class='son1'></div> <div class='son2'></div> </div> </body> ``` > - 如果你有一個東西不想被縮，那就可以設置 `flex-shrink: 0` ，這樣就只會縮其他人 ```html <body> <style type="text/css"> .fa { max-width: 300px; display: flex; } .son1 { width: 400px; height: 300px; background: blue; } .son2 { background: red; flex-shrink: 0; } </style> <div class="fa"> <div class="son1"></div> <div class="son2">a b c d</div> </div> </body> ``` ### flex-basis > - `flex-basis` 跟 `width` 與 `flex-direction: column` 的 `height` 相衝突, > 以 `flex-basis` 為主 ```htmlmixed= <head> <meta charset="utf-8"> <title></title> <style> .fa { height: 300px; width: 300px; display: flex; } .son1 { background: blue; width: 100px; flex-basis: 200px; } .son2 { background: yellow; flex-grow: 1; } </style> </head> <body> <div class='fa'> <div class='son1'></div> <div class='son2'></div> </div> </body> ``` ### flex-direction > - 設定方向 > - `flex-direction: row`: 行對齊(預設) > ![](https://i.imgur.com/HDT9Hi0.png) > - `flex-direction: row-reverse;`: 水平, 順序相反 > ![](https://i.imgur.com/Naew7jd.png) > - `flex-direction: column`: 列對齊 > ![](https://i.imgur.com/csTfEoG.png) > - `flex-direction: column-reverse;`: 列對齊, 順序相反 > ![](https://i.imgur.com/Afsgl4u.png) > #### 另外一種說法(Amos): > - 資料流向(主軸): 就是資料怎麼排的, 預設由上至下, 由左至右 > - 交叉軸(次軸): 跟資料流向垂直 > - 如果資料流向是由上至下, 那交叉軸就是由左至右 > - 反之亦同 > - flex-direction: 設定資料流向 > - `flex-direction: row`: 由左至右(預設) > - `flex-direction: row-reverse;`: 由右至左 > - `flex-direction: column`: 由上而下 > - `flex-direction: column-reverse;`: 由下而上 ### 實作 <img src="https://i.imgur.com/Zi7BMrh.png" style="width:500px"/> ```htmlmixed= <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } body{ min-width: 320px; max-width: 540px; margin: 0 auto; } header { height: 100px; width: 100%; background: gray; } nav { padding: 5px; } .raw { height: 90px; width: 100%; /*margin: 5px; 用margin會整個向右移動5px 因為100%+5px(左), 所以用nav的padding來包*/ display: flex; border-radius: 5px; margin-bottom: 5px; } .raw:nth-child(1) { background: #FF8384; } .raw:nth-child(2) { background: #3A9FFF; } .raw:nth-child(3) { background: #42B820; } .raw:nth-child(4) { background: #FFA319; } .raw-in { flex: 1; border-left: 1px solid #fff; } .raw-in:first-child { border: 0; } .column { display: flex; flex-direction: column; } .column a{ flex: 1; text-align: center; color: #fff; line-height: 45px; text-decoration : none; font-size: 16px; } .column a:first-child { border-bottom: 1px solid #fff; } .icon { display: column; } .icon span { flex: 1; line-height: 45px; text-align: center; color: #fff; text-decoration: none; display: block; } .icon div { flex: 1; text-align: center; height: 45px; } </style> </head> <body> <header></header> <nav> <div class="raw"> <div class="raw-in icon"> <span>酒店</span> <div>icon</div> </div> <div class="raw-in column"> <a href="#">海外酒店</a> <a href="#">特價酒店</a> </div> <div class="raw-in column"> <a href="#">海外酒店</a> <a href="#">特價酒店</a> </div> </div> <div class="raw"> <div class="raw-in icon"> <span>機票</span> <div>icon</div> </div> <div class="raw-in column"> <a href="#">海外酒店</a> <a href="#">特價酒店</a> </div> <div class="raw-in column"> <a href="#">海外酒店</a> <a href="#">特價酒店</a> </div> </div> <div class="raw"> <div class="raw-in icon"> <span>旅遊</span> <div>icon</div> </div> <div class="raw-in column"> <a href="#">海外酒店</a> <a href="#">特價酒店</a> </div> <div class="raw-in column"> <a href="#">海外酒店</a> <a href="#">特價酒店</a> </div> </div> <div class="raw"> <div class="raw-in column"> <a href="#">海外酒店</a> <a href="#">特價酒店</a> </div> <div class="raw-in column"> <a href="#">海外酒店</a> <a href="#">特價酒店</a> </div> <div class="raw-in column"> <a href="#">海外酒店</a> <a href="#">特價酒店</a> </div> </div> </nav> </body> ``` ### Justify-Content `justify-content: flex-start | flex-end | center | space-between | space-around;` > - 調整X軸的對齊方向 > - 沒有讓父元素被子元素佔滿時, 會有剩餘空間 > - 以下子元素`width: 30%;height: 100%;` > - `justify-content: flex-start;`: 子元素的起始與父元素的起始對齊, 順序不變 (預設) > ![](https://i.imgur.com/upTUwv4.png) > > - `justify-contnet: flex-end;`: 子元素的結束與父元素的結束對齊, 順序不變 > ![](https://i.imgur.com/HKlT9su.png) > > - `justify-content: center;` > ![](https://i.imgur.com/L9k0lAV.png) > > - `justify-content: space-between;`: > ![](https://i.imgur.com/pRlQHYk.png) > ![](https://i.imgur.com/yge1uUF.png) > - 首個子元素的起始與父元素起始對齊, > - 末個子元素的結束與父元素結束對齊 > - 剩餘子元素間分配剩餘空間 > - `space- between`: 剩餘空間分散在中間 > > - `justify-content: space-around;` > - 剩餘空間分散在兩邊 > - 相當於每個盒子添加相同margin > ![](https://i.imgur.com/gXgmnEu.png) ### align-items `align-items: flex-start | flex-end | center | stretch` > - 調整Y軸對齊方向 > - 以下子元素 `width: 100%;` > - `align-items: stretch`: 不給高度的前提下, 拉伸子元素的高度與父元素相同 (預設) > ![](https://i.imgur.com/ILA1xHs.png) > > - `align-items: flex-start;` > ![](https://i.imgur.com/c8WzIHh.png) > > - `align-items: flex-end;` > ![](https://i.imgur.com/rIQAg3p.png) > > - `align-items: center;` > ![](https://i.imgur.com/6O7SCGF.png) ```htmlmixed= <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .father { width: 600px; border: 1px solid red; margin: 300px auto; display: flex; /* align-items: center; * align-items: flex-start; * align-items: flex-end; */ align-items: stretch; /* 預設 */ } .son1, .son2, .son3 { width: 100px; } .son1 { background: blue; } .son2 { background: green; } .son3 { background: red; } </style> </head> <body> <div class='father'> <div class='son1'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 </div> <div class='son2'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 </div> <div class='son3'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 舍利子。是諸法空相。不生不滅。不垢不淨。 </div> </div> </body> ``` > #### Amos > - align系列是設定次軸(交叉軸)的對齊 > - 如果主軸(資料流向)是由左至右, > - 那麼次軸就是由上而下, > - 上面是起點, 下面是終點 > - `align-items: flex-start;`: 對齊起點(上) > - `align-items: flex-end;`: 對齊終點(下) ### flex-wrap `flex-wrap: nowrap | wrap | wrap-reverse` > - 控制超出時，是否換行 > - 以下子元素`height: 100%; width: 40%` > - `flex-wrap: nonwrap`: 不換行，強制壓縮成一行 (默認) > ![](https://i.imgur.com/mNSBpij.png) > > - `flex-wrap: wrap`: 換行 > ![](https://i.imgur.com/r7MBHAQ.png) > > - `flex-wrap: wrap-reverse`: 換行後翻轉 > ![](https://i.imgur.com/V9otXLo.png) ### 解決問題: 使用float無法讓每列等高 #### float > - 根據內容給高後, 內容不同就沒有等高 ![](https://i.imgur.com/tJQeRgV.png) ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .clearfix:before, .clearfix:after { content: ''; display: table; } .clearfix:after { clear: both; } .clearfix { /* IE6,7 */ *zoom: 1; } .father { width: 600px; border: 1px solid red; margin: 300px auto; } .son1, .son2, .son3 { width: 200px; float: left; } .son1 { background: blue; } .son2 { background: green; } .son3 { background: red; } </style> </head> <body> <div class='father clearfix'> <div class='son1'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 舍利子。是諸法空相。不生不滅。不垢不淨。 不增不減。是故空中無色。無受想行識。 無眼耳鼻舌身意。無色身香味觸法。 無眼界。乃至無意識界。 無無明。亦無無明盡。乃至無老死。亦無老死盡。 </div> <div class='son2'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 </div> <div class='son3'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 舍利子。是諸法空相。不生不滅。不垢不淨。 不增不減。是故空中無色。無受想行識。 無眼耳鼻舌身意。無色身香味觸法。 無眼界。乃至無意識界。 無無明。亦無無明盡。乃至無老死。亦無老死盡。 </div> <div class='son3'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 舍利子。是諸法空相。不生不滅。不垢不淨。 不增不減。是故空中無色。無受想行識。 無眼耳鼻舌身意。無色身香味觸法。 無眼界。乃至無意識界。 無無明。亦無無明盡。乃至無老死。亦無老死盡。 </div> <div class='son1'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 舍利子。是諸法空相。不生不滅。不垢不淨。 不增不減。是故空中無色。無受想行識。 無眼耳鼻舌身意。無色身香味觸法。 無眼界。乃至無意識界。 無無明。亦無無明盡。乃至無老死。亦無老死盡。 </div> <div class='son2'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 舍利子。是諸法空相。不生不滅。不垢不淨。 不增不減。是故空中無色。無受想行識。 無眼耳鼻舌身意。無色身香味觸法。 無眼界。乃至無意識界。 無無明。亦無無明盡。乃至無老死。亦無老死盡。 </div> </div> </body> </html> ``` > #### flex ![](https://i.imgur.com/tlDiX13.png) ```htmlmixed= <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .father { width: 600px; border: 1px solid red; margin: 300px auto; display: flex; flex-wrap: wrap; } .son1, .son2, .son3 { width: 200px; } .son1 { background: blue; } .son2 { background: green; } .son3 { background: red; } </style> </head> <body> <div class='father'> <div class='son1'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 舍利子。是諸法空相。不生不滅。不垢不淨。 不增不減。是故空中無色。無受想行識。 無眼耳鼻舌身意。無色身香味觸法。 無眼界。乃至無意識界。 無無明。亦無無明盡。乃至無老死。亦無老死盡。 </div> <div class='son2'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 </div> <div class='son3'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 舍利子。是諸法空相。不生不滅。不垢不淨。 不增不減。是故空中無色。無受想行識。 無眼耳鼻舌身意。無色身香味觸法。 無眼界。乃至無意識界。 無無明。亦無無明盡。乃至無老死。亦無老死盡。 </div> <div class='son3'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 舍利子。是諸法空相。不生不滅。不垢不淨。 不增不減。是故空中無色。無受想行識。 無眼耳鼻舌身意。無色身香味觸法。 無眼界。乃至無意識界。 無無明。亦無無明盡。乃至無老死。亦無老死盡。 </div> <div class='son1'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 舍利子。是諸法空相。不生不滅。不垢不淨。 不增不減。是故空中無色。無受想行識。 無眼耳鼻舌身意。無色身香味觸法。 無眼界。乃至無意識界。 無無明。亦無無明盡。乃至無老死。亦無老死盡。 </div> <div class='son2'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 舍利子。是諸法空相。不生不滅。不垢不淨。 不增不減。是故空中無色。無受想行識。 無眼耳鼻舌身意。無色身香味觸法。 無眼界。乃至無意識界。 無無明。亦無無明盡。乃至無老死。亦無老死盡。 </div> </div> </body> </html> ``` ### flex-flow `flex-flow: <'flex-direction'> || <'flex-wrap'>` > - flex-flow 是複合屬性 > - 預設: `flex-flow: row nowrap` ### align-content `align-content: flex-start | flex-end | center | space-between | space-around | stretch` > - 使用前提: > - 父元素要設置flex `display: flex` > - 排列方式要設置成row `flex-direction: row` > - 換行 `flex-wrap: wrap` > ```css > E { > display: flex; > flex-flow: row nowrap; > } > ``` > - 以下子元素 `width: 40%;` > - `align-content: flex-start` > ![](https://i.imgur.com/cRONSmE.png) > - `align-content: flex-end` > ![](https://i.imgur.com/cFydeeK.png) > - `align-content: center` > ![](https://i.imgur.com/zc4jvah.png) > - `align-content: space-between` > - 剩餘空間分散在中間 > ![](https://i.imgur.com/1kXsygk.png) > - `align-content: space-around` > - 剩餘空間分散在兩邊 > ![](https://i.imgur.com/3HkRbBj.png) > - `align-content: stretch`(預設) > ![](https://i.imgur.com/Nyk8ptg.png) > - flex 的多行排列 vs. `align-items`單行排列 > - `align-items` 是設定單行交叉軸的對齊 > - `align-content` 是設定整體交叉軸的對齊 > - 兩個都預設 (兩個都是拉伸到最大) > ![](https://i.imgur.com/CHAVcCP.png) > - 如果我只有設 `align-items: center;` > ![](https://i.imgur.com/QTtGbZr.png) > - 如果我只有設 `align-content: center;` > ![](https://i.imgur.com/7MJggET.png) > - 如果我兩個都設 `center;` > ![](https://i.imgur.com/ANur8Ki.png) ### align-self > - 這東西其實就是拿來覆蓋父級的 align-items > - 個別設置交叉軸的對齊 ![](https://i.imgur.com/DR3or04.png) ```htmlmixed= <head> <meta charset="utf-8"> <style> * { margin: 0; padding: 0; } .father { width: 600px; height: 600px; border: 1px solid red; margin: 300px auto; display: flex; align-items: center; /* 預設全部都對其中間 */ } .son1, .son2, .son3 { width: 200px; } .son1 { background: blue; } .son2 { background: green; align-self: flex-start; /* 第二個盒子對其flex-start*/ } .son3 { background: red; } </style> </head> <body> <div class='father'> <div class='son1'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 </div> <div class='son2'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 </div> <div class='son3'> 觀自在菩薩。行深波若波羅蜜多時。照見五蘊皆空。 度一切苦厄。舍利子。色不異空。空不異色。 色即是空。空即是色。受想行識。亦復如是。 舍利子。是諸法空相。不生不滅。不垢不淨。 </div> </div> </body> ``` ### order `order: <int>` > - 使用CSS來調換盒子排序 > - int越小排會前面, 可以有負數, 預設皆為0 > - 使用場景: > - 電腦畫面呈現想要123排序 > - 手機畫面呈現想要213排序 > - 平板畫面想要321排序 > - 此時不可能改 HTML 的內容, 因為三個排序都不一樣, 改誰另外兩個都倒霉 > - 此時就可以直接利用 order 來改排序 <img src="https://i.imgur.com/mTDvUM2.png" style="width: 300px;" /> -> <img src="https://i.imgur.com/qhTGlgf.png" style="width: 300px;" /> ```css div:nth-child(3) { background: orange; order: -1; /* 其他兩個都是0, 最後一個設為-1, 故橘色跑到第一個 */ } ``` ## BFC(Block Formatting Context) > - BFC是一個隔離的獨立容器 ### 創建BFC的前提 > - 有寬有高有邊距有邊框的屬性 > ![](https://i.imgur.com/obj1EWD.png) > - display屬性中，`block | list-item | table` 會產生BFC > - `list-item` 就是 \<ul> \<ol> \<dl> 所默認的屬性 > - `table` 就是 \<table> 所默認的屬性 > - display的其他屬性, 如`inline` 會產生IFC ### 觸發BFC > 以下其中之一都會觸發 > - `html` 根元素 > - `float: [^none]`: Float不要是None > - `position: absolute | fixed;` > - `display: inline-block | table-cell | table-caption | flex | inline-flex ;` > - `overflow: [^visibility];` overflow不為visibility > - 如果只是要觸發BFC，那 `overflow: hidden;` 較為常用，因為比較沒有副作用 ### BFC特性 > 1. 盒子從頂端排列下來 > 2. 盒子垂直距離由 Margin 決定, 同個BFC間垂直 margin 會互吃 > 3. 盒子 margin-left 會碰觸到容器的 border-left > 4. BFC區域不與浮動盒子產生交集，而是緊貼邊緣 > 5. BFC高度時會包括浮動或定位盒子的高度 ### BFC應用 > - 清除浮動 > - 子元素浮動時, 如果父元素沒有設高，由於沒東西撐開父元素, 故父元素`height:0;` > - 利用BFC第五個特性可以把沒有高度的容器撐開 > ![](https://i.imgur.com/ssWOwFZ.png) -> ![](https://i.imgur.com/ePsfOv2.png) ```htmlmixed= <head> <meta charset="utf-8"/> <style> .father { border: 1px solid gray; width: 100px; /*overflow: hidden;*/ /*position: absolute;*/ /*display: inline-block;*/ float: left; } .son1, .son2 { width: 30px; height: 30px; float: left; } .son1 { background: skyblue; } .son2 { background: darkblue; } </style> </head> <body> <div class="father"> <div class="son1"></div> <div class="son2"></div> </div> </body> ``` > - 外邊距合併問題 > - 相同BFC的垂直外邊距會合併 > - 那不同BFC就解決合併問題了 > <img src="https://i.imgur.com/stbGUzQ.png" style="width: 200px;" /> -> <img src="https://i.imgur.com/LC8yTdD.png" style="width: 200px;" /> ```htmlmixed= <head> <meta charset="utf-8"/> <style> .father { border: 1px solid gray; width: 100px; } .son1, .son2 { width: 30px; height: 30px; } .son1 { background: skyblue; margin-bottom: 5px; overflow: hidden; } .son2 { background: darkblue; margin-top: 10px; overflow: hidden; } </style> </head> <body> <div class="father"> <div class="over"> <!-- overflow隔開, 如此.son1與.son2 就是不同BFC而沒有合併問題 --> <div class="son1"></div> </div> <div class="son2"></div> </div> </body> ``` > - 製作右側適應盒 > - 行動端常用, 因為每台手機都不同大小, 控制浮動盒子就能控制BFC > - 下面這個盒子淺藍色給固定寬高, 深藍色沒給任何寬高, 讓文字撐開 > <img src="https://i.imgur.com/ImF0qLj.png" style="width: 200px;" /> > - 當淺藍色浮動時, 深藍色會往上跑, 並環繞淺藍色 > <img src="https://i.imgur.com/NKLUYks.png" style="width: 200px;" /> > - 而深藍色創造BFC後, 因為BFC不予浮動交集並緊貼的特性, 就換產生右側適應盒 > <img src="https://i.imgur.com/RB305t1.png" style="width: 200px;" /> > - 淺藍色的寬擴大或縮小, 都會影響深藍色的大小 > <img src="https://i.imgur.com/97pwk0u.png" style="width: 200px;" /> ## 瀏覽器前綴 > - 處理老版本瀏覽器兼容性問題 > - 現在寫 css 可以不用加前綴, 在編譯的時候讓他自己加就行了 - `-webkit-`: Chrome, Safari, Andriod Browser - `-moz-`: firefox - `-o-`: opera - `-ms-`: IE - `khtml`: Konqueror ## 背景漸層 (Linear Gradient) `<linear-gradient>: [ <angle> | to <side | corner> ]? <color-stop>#` - `<angle>`: `num [deg | grad | rad | turn]` - `<side | corner>`: `[ left | right ] || [ top | bottom ]` - `to left` = 270 deg - `to right` = 90 deg - `to top` = 0 deg - `to bottom` = 180 deg (預設) - `<color stop>`: `color [ length | percentage ]` ```htmlmixed= <head> <meta charset="utf-8"/> <style> div { width: 20%; height: 100px; margin: 300px auto; background: linear-gradient(to bottom left, blue, skyblue 10%, red 30%, yellow 40%); } </style> </head> <body> <div></div> </body> ```