# 挑戰-金魚都能懂的網頁切版：破格式設計
網址：
https://judyyutong.github.io/my-projects/breakFrame.html

### 學習重點
1. 滾動條顯示與否＋flex垂直置中
2. margin-top給予負值做出破格版面
3. line-height垂直置中技巧
4. 偽元素的絕對定位與相對定位
5. border框線寬度計算會影響對齊
6. 使用transform讓半圓轉-45度
7. 破格時的版面空間計算補償
8. 動畫@keyframes使用

### （筆記尚待整理中...）

https://www.youtube.com/watch?v=l-sQNXNrw3s&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&t=279s
因為已設基底容器wrap寬1200px，內層三個item若平分寬度則每個400px，但追加設定item外距margin左右各15px，則每個item實際寬度必須內縮15x2=30px，不然會超出wrap總寬度，所以item寬度修改為400-30=370px

https://youtu.be/l-sQNXNrw3s?list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&t=412
讓整個畫面元素放到瀏覽器頁面正中間，

html, body{height:100%;}
/*不懂特地指定高100%和畫面正中間的關聯是？*/
/*但是發現加上高100%之後，畫面產生滾動條。*/

body{
    display:flex;
    align-items:center;
    }
/*一加上flex，捲軸就消失了。*/
/*讓畫面所有元素整包「垂直置中」於瀏覽器*/
/*前面已經對wrap進行margin左右auto，
所以畫面元素此時不僅垂直置中，還會水平置中
*/

【關於滾動條的筆記】
margin是往外增生，所以如果已經先css歸零，然後html和body都設定100%，但是現在卻有個div設定margin-top:50px，那麼這個上方外距等於是向上方外面長出極限，畫面塞不下了，所以會出現滾動條。
如果不想要出現滾動條，就要在body的高度上面扣除這個margin-top的數值：

<div class="box">
</div>

*{
  margin:0;
  padding:0;
}

html{ height:100%;}

body {
  height: calc(100% - 50px);
}

div.box {
    margin-top: 51px;
    width: 30px;
    height: 30px;
    background-color:red;
}

如果不想要滾動條，另一個邏輯的解套方式，就是讓間距往內長，也就是改用padding取代margin。這樣body不用特別減去數值，而長出來的原訂正方形藍色box則會因為受到padding影響而看起來變成50+30=80px高與寬30px的直向長方形。

html,
body {
  height: 100%;
  margin: 0;
}


div.box {
    padding-top: 50px;
    width: 30px;
    height: 30px;
    background-color:blue; 
}

https://www.youtube.com/watch?v=l-sQNXNrw3s&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&t=516s

破格生出，給予``.icon``容器``margin-top``負值「-75px」則``.icon``容器就會往上凸出``.item``，產生破格畫面。

margin: -75px auto 0; 
/* margin: 上 左右 下; */

https://youtu.be/l-sQNXNrw3s?list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&t=602
特殊class的icon是被視為「文字」，所以控制大小要用font-size

https://www.youtube.com/watch?v=l-sQNXNrw3s&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&t=621s
line-height可以用來作為當行文字的垂直居中
icon的height是150px時，line-height也同樣設定150px，
在icon裡面的「文字型圖示」就會居中。

https://youtu.be/l-sQNXNrw3s?list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&t=632
當容器本身是長寬等高的正方形時，``width:150px;height:150px``
圓角設一半``border-radius:50%;``，容器就會變成正圓。

https://www.youtube.com/watch?v=l-sQNXNrw3s&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&t=765s
偽元素:before的絕對定位與相對定位，
希望``.icon:before``時，產生一個和icon等寬等高的「方框」，除了設定``width:100%``和``height:100%``，還得指定「絕對定位」，並且類比於父子層定位邏輯，必須給還沒有加上``:before``時的``.icon``設定「相對定位」，這樣這個「:before方框」才知道自己必須依據``.icon``抓到自己的位置。

為了讓「:before框」居中於「icon容器本身」，就要設定「:before框」「左邊緣」與「上邊緣」距離「icon容器本身」為0，讓兩者相疊，就像取左上角歸零的概念，但因為東西是放在容器內，所以會從「邊框」開始計算，``border``也會佔地盤，因此還要「扣除」邊框線的寬度``10px``，這樣``left``與``top``對位才會真正歸零，讓``.icon``和``.icon:before``彼此置中。

因此要設定

.item .icon:before{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    border:10px solid #f9cec2;
    left:-10px;
    top:-10px;
}

https://ithelp.ithome.com.tw/articles/10253814?sc=iThomeR
> Top 、Right 、Bottom 、Left 4個 CSS 屬性是搭配 position 一起使用的，倘若沒有 position 的話，這4個屬性是不會有作用的。此外 Top 、Right 、Bottom 、Left 這 4個屬性僅需設定一個值。基本上水平軸只要設定一個屬性，垂直軸也只要設定一個屬性即可。

https://youtu.be/l-sQNXNrw3s?list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&t=852
border-top和border-left框線顏色指定為透明transparent，則看到圓圈的左下圈段看不見了，之後再使用transform讓「:before框」圈段「逆時針」轉45度，也就是指定rotate(-45deg)，就會得到一個正坐的的上半圓。

https://www.youtube.com/watch?v=l-sQNXNrw3s&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&t=897s

https://www.youtube.com/watch?v=l-sQNXNrw3s&t=907s

上半圓凸出去了
版面實際佔有的區塊應該是灰色``wrap``那塊，還沒有算進包含半圓形的那一區，這樣版面計算會有問題，應該要算包含計算才正確。

這個圓形屬於``.icon:before``，直徑等同``.icon``的寬高，而``.icon``是寬高皆為150px的正方形，表示``.icon:before``的半圓高度是75px，也就是凸出父層``wraper``75px，那就再把``wraper``補回去75px，這樣在專案中計算版面尺寸分配時才會是清楚，誰包裹誰很清楚，不會包了結果又凸出去變成沒有包到。版面的層遞關係乾淨。

https://www.youtube.com/watch?v=l-sQNXNrw3s&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&t=981s
在``item``身上加上``box-shadow:左右偏移 上下偏移 模糊範圍 陰影顏色``

https://www.youtube.com/watch?v=l-sQNXNrw3s&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&t=1038s

動畫``@keyframes ss``
這個``ss``是任意命名，用來代表其所設定的動畫值，之後會帶入其他地方。
動畫內容指定初始從0%時是-10deg，直到終點100%變成10deg

不想要搖動整個``icon``容器，而是只搖動裡面的圖示文字(圖案)

而且想要``.item``被「摸到」時圖示文字就搖動，
而圖示文字有共用的``class``名稱叫做``fa``，

所以CSS選擇器寫作：

.item:hover .fa{}

並給它``animation``屬性，此時再把剛才自定義過的動畫內容``ss``帶入，並設定總搖動時間歷時0.2s，也就是所有動作必須在0.2秒內搖完（搖很快），並且搖動的加速度設為linear，也就是平均搖動、沒有任何加減速地搖，且infinite表示無止境的重複搖，且希望他來回搖``alternate``，也就是說-10deg到10deg以後，會從10deg搖回去-10deg，再週而復始，會來回雙向地動作，如果沒有設這個，會變成單向的無止境看起來不自然。

https://www.youtube.com/watch?v=l-sQNXNrw3s&list=PLqivELodHt3hxeuLX8PYaI8u1GcDaBoJo&t=1241s
:hover前面多了空格，導致游標必須明確摸到icon才會搖，只摸整個塊狀時沒反應，但是把空格刪除，修正CSS後，就變成原本想要的游標只要碰到塊狀任一區，icon就會開始搖動。

https://youtu.be/l-sQNXNrw3s?t=1279
微調文字內距``padding``

.item .txt{
    padding: 20px 20px 2em;
    }
/*padding: 上 右左同值 下*/