# CSS 出狀況

### 可預先避免的

* 推距離時候優先使用 padding，若使用 margin 可能遇到推不開的 margin collapsing 問題
* 對於 ul 、 li 盡量不要設定他，設定他內層的元素優先。
* 重複用到的樣式可以提取到 SCSS 的全域範圍
* 字級、字重應該是可以抽出來統一設定( reset 之後 )，不然每次都要設定會很冗而且會記錯

---

### 01.文字對齊誤差調整 transform 失效

Q : 2020 跟 斜線 沒有在同一水平上要如何解決？

A : 直接對 inline element 做 transform 無效，需要轉為有 block element 屬性才會生效，故此範例中要保持不換行且生效就是使用 display: inline-block


<h3>2007<span>/</span><span>年</span></div></h3>

span:first-child {
    display: inline-block;
    transform: translateY(-0.3rem);
}


---

### 02.SVG 消失不見

Q : img 標籤使用 SVG ，實際上 SVG 有佔位置但卻是透明的原因？

A : 只發現可能是特效套件影響，原本掛上屬性 data-aos 時候圖不見，移除後就顯示了，原因未知。

[AOS scroll lib](https://michalsnik.github.io/aos/)


---
### 03.手刻 RWD height 設定

Q : 電腦版的版面高度以 vh 設定，在螢幕變窄時版面上下底色會直敘延伸，如何有效解決？

A : 目前是依照每一個尺寸斷點變更 vh 數值，但此方法有個問題就是，尚未到達斷點前都會一直延伸，等到抵達斷點時才會跳成新設定的數值，好像不是很好的處理方式。

A : 更新，是因為原本一個 section 區塊設定滿版 100vh ，所以當螢幕比例不同時造成內容不足以滿版，多餘的部分就變為空白

A : 更新，不該設定高度，由內容去推開即可


---

### 04.@media 在 max-width:980px 以下時失效

Q : 980px 以上正常，一到以下就失效

A : HTML 的 head 少了以下這一行標籤，要做 RWD 都一定要有這一行。

<meta name="viewport" content="width=device-width,initial-scale=1"> 

---

### 05.要如何實際讓圖片旋轉

Q : 使用 transform 時是視覺變化但實際位置無改變，但當我要做 RWD 時會有以下狀況，何解？

A : 只能想到直接編輯原始圖片，範例中是原始紅箭頭做 rotate(90deg)，但是有上下間距過大問題

A : 補充，上下可以用負數的 margin 來壓縮


---

### 06.動畫會卡一下才消失再執行

Q : CSS fadeinLeft 在執行時會先出現在終點一瞬後消失再執行進場動畫，整個很怪，何解？

A : unknow，應該是套件使用方式跟 CSS animation 有衝突

---

### 07.圖片縫隙問題

Q : img 標籤在下方連接處出現不明縫隙( Bug )要如何解決?

A : 以下為各種解法，都可以解決此問題。

.brand-spirit{
    width: 100%;
    line-height: 0; // 方法01在父層添加
    .bs-img{
        position: relative;
        width: 55%;
        img{
            width: 100%;
            vertical-align:bottom; // 方法02
            display: block; // 方法03
        }
    }
}


---

### 08.animate 讓 teansform 失效

[解答](https://css-tricks.com/forums/topic/transform-translate-isnt-working-with-animation-2/)

Q : 用了 transform 的元素後套用動畫會讓畫面回歸原位，何解?

A : 把要做動畫的元素多包一層 div 再將定位做在這層即可，另外子層要是 block 才可以正確執行動畫，ex : a tag 要改為 block。

<div class="buying-btn">
    <a class="animate__animated animate__bounce" href="#">詢問購買</a>
</div>


---

### 09.選擇器錯亂

Q :

A : 選擇器 '空白' and '>' and '~' and '+' 要注意使用。
* 空白 : 選取以下所有的
* \> : 僅選擇它的的子層對象（child）
* \+ : 僅選擇它**同層**之後的第一個對象（siblings）
* ~ : 選擇它**同層**之後的所有對象（siblings）

// 這個會讓所有子孫層內第一個 li 都被選到
$('.h-menu-list li:first-child').click(function(e){
    e.preventDefault();
    $('.menu-a').css('right','0')
})
// 這個只選定底下第一個 li 而已
$('.h-menu-list > li:first-child').click(function(e){
    e.preventDefault();
    $('.menu-a').css('right','0')
})

---

### 10.margin 重疊問題

Q : 出現垂直的 li 元素設定 margin: 2rem 0; 後 li 之間只有 2rem 間距而不是預期的 4rem 發現 margin 重疊再一起了？

A : margin collapsing 是個常見問題，待研究，先使用 padding

---

### 11.漢堡的做法以及動畫問題

Q : 漢堡被點開的時候三槓要轉換為叉叉該如何實作？

A : 原本三槓的做法是坐中間一槓後用 before after 去做上下槓，在要變成叉叉的時候要上中槓隱藏，上下槓旋轉，但是一旦主體中槓 display:none 、 visibility:hidden 、 opacity:0 都會讓所有槓消失 ; 所以可能不能使用偽類元素來製作需動化效果的物件。

A : before after 是依照主體來做出來的，所以要三根槓槓都要是實際 block 才行 ; 實作方法為以下
1. 在一範圍內先置中一個正方形
2. 裡邊包 3 根 100% 寬的均分槓槓
3. 點擊時加上 class
4. class 為上槓下移後旋轉 ; 中槓消失 ; 下槓上移後旋轉
5. 完成 ( 記得要加 transition )

[可直接參考](https://codepen.io/ywg228/pen/PKaGxj)

---

### 12.div 只設定背景圖片沒有給高的話圖出不來，但又不能高度寫死的情況

Q : 寫好 100vh 後在 PC 正常，但是切 RWD 時會讓超出內容被 hidden？

A : 單給 padding-bottom:50% 百分比即可放內容顯示，那這個的百分比好像不是參考父層，而是變為與寬度的比例顯示。

---

### 13.margin: 0 auto 沒有效果

Q : button 想要置中時 margin: 0 auto 卻沒有效果?

A : button 是 inline element 所以無法生效，補上 display: block 即可生效

---

### 14.before 跟 after 的定位使用

Q : 使用情境為設定好主標並搭配偽元素長出裝飾線，套用在各個位置，但是定位有些會因為在用 padding 推開的時候而造成定位基準跑掉?

A : 改為使用 margin 推距離，因為有設定 box-sizing: border-box ?所以 padding 所推的距離也算是內容會造成定位基準的位置不同

---

### 15.z-index 的使用問題

Q : 為什麼 z-index 的堆疊順序不如預期？

A : z-index只能在有設定位（position）的元素上才會奏效

---

### 16.background-image 因內容不足撐滿版而被切掉

Q : 區塊內的背景圖因沒寫死高度，而是靠內容去撐開，但內容不足時背景圖就被切掉部分，尤其 RWD 時寬度到達某尺寸時也會發生

A : unknow

---

### 17.label 無法設定寬高樣式

Q : 

A : dispaly: block 即可，總是忘記 inline element

---

### 18.關於 animate 觸發事件
當我的 css animate 是 infinity 的時候會無法觸發 animationend 事件

DOM.addEventListener('animationend', () => {
    start++
    console.log(start);
});

---

### 19. overflow-x: hidden 在手機版失效

原因應該是移動端的瀏覽器的關係

[參考](https://stackoverflow.com/questions/24193272/overflow-xhidden-on-mobile-device-not-working)

原本只下在 body 會失效，好像是瀏覽器會無視 body 上的 overflow: hidden

// Evonik 專案上下樣就可行了
html, body {
  overflow-x:hidden 
}
// or
html, body {
  position:relative;
  overflow-x:hidden;
}

另外，有許多此問題的回答都是說不要在 body 下層直接寫內容，先用一個容器包著全部的內容，在對該容器下 overflow: hidden 也是個方式

---

### 20. flexbox內容物被擠壓問題

第二個圓球因為右邊的字數就多所以會被壓縮，對不要被壓縮到的內容下 flex-shrink: 0; 代表我這個 flex 物件不要被壓縮到，解決。


.phase {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  height: 104px;
  margin-bottom: 1rem;
  .number {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background-color: $mainPurple;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    margin-right: 1.5rem;
    flex-shrink: 0; // 這這這這這
    p {
      font-size: 20px;
    }
    span {
      font-size: 40px;
      transform: translateY(-6px);
    }
  }
  & > p {
    width: calc(100% - 124px); // 也可以這樣處理 土法煉鋼比較笨一點
  }
 }