[Other] - 那些在 CSS 遇到的問題


Posted by Kayla on 2020-11-27

看起來意思都是背景的 background / background-image 差別

background:設置背景屬性。
background-image:設定背景圖像。

background 是多種背景屬性的縮寫,也就是說如果不設定其中的一項屬性,也不會出現問題。而 background-image 是 background 其中的一項單個屬性,意思是設定圖片,並不能去使用像是 background-repeat no repeat 的值。

background 概括的屬性如下:

  • background-color
  • background-position
  • background-size
  • background-repeat
  • background-origin
  • background-clip
  • background-attachment
  • background-image

要怎麼選才是我要的? - CSS 多重選擇器

在同一個 HTML 標籤間中,包含兩個 class 名稱,有無空格和分號隔開的差異。
HTML

<div class="one two"></div>

CSS

CSS class 差別 說明
.one .two{} 中間空格 須要是在 one 裡面的 two,才會被選擇到。
.one.two{} 沒有空格 同時具有 one 和 two 的 class 時,才能被 CSS 所選擇到到。
.one, .two{} 逗號 class 中有 one 或 two,都會被編輯器所選擇到。

資料參考: [技術分享] CSS中的多重選擇器(Multiple Selectors)包含空白或逗號

CSS各種對齊

  1. line-height:
    適用於單行文字置中對齊,透過單行行高的設定,讓一行字所需要佔據的空間分配到文字的上下方。
  2. Absolute/ margin 負值:
    利用 top, left 50%,將網頁的物件定位在空間中的頂端與左側的50%位置,但由於是以物件左上角做為定位起始點,最後再使用margin-top:-50%,設定成高度的一半。
  3. Absolute / margin auto:
    當物件設定 absolute 後,預設是抓不到整體可運用範圍的,搭配 left/right/top/bottom 這類屬性。使用top/bottom:0的用意在於,讓瀏覽器去計算空間的頂部和底部空間,這時候使用margin:auto 就會生效。 缺點是定位物件必須有固定的寬高(%數也可)才能正常置中。
  4. absolute / translate:
    物件不需固定寬高,與使用margin 負值同概念。transform: translate(-50%, -50%) 讓物件的X軸移動-50%,50%是以物件本身的寬度作為100%來做計算,所以物件寬度是多少,都會自動跑負一半的位置。
  5. flex/align-items:
    設定父層 display: flex ,設定次軸(cross axis)置中屬性 align-items: center,不需設定高度即可置中。

##css







Related Posts

[TensorFlow Certification Day2] 課程規劃與安排時間

[TensorFlow Certification Day2] 課程規劃與安排時間

[第八週] ajax

[第八週] ajax

PDIS 實習日誌:神啊!請賜給我完美陌生人

PDIS 實習日誌:神啊!請賜給我完美陌生人


Comments