阿葛廷

人一定要靠自己!

1 minute read

Tags: ,

廢話不多說! 傳送門~~~

position

value description
static(default) 當元素設定為 static 時，不管怎麼設定 TRBLZ 都沒意義
relative 當元素設定為 relative 時，代表元素要放的位置與預設的不同，而不同的程度會再依據設定 TRBLZ 而定
absolute 當元素設定為 absolute 時，瀏覽器會往該元素的外層找是否有其他 position 非預設值的元素(如果沒有，就會以網頁頁面<body>左上角為定位點)，並根據外層元素的位置再根據 TRBLZ 改變
fixed 當元素設定為 fixed 時，除了放置位置 TRBLZ 可設定外，當網頁卷軸滾動時，該元素的位置不會改變
sticky 當元素設定為 sticky 時，在沒有遇到可滾動的父層元素時，效果就和 relative 一樣；但碰到可滾動的副層元素時，會有類似 absolute 浮在最上層的效果

object-fit

value description
fill(default) 填滿容器，如長或寬的長度不足時，會將圖片比例破壞並延長到將整個容器填滿(如 windows 桌布「延展」的效果)
contain 根據圖片較長邊對應容器的比例，等比例縮放將整張圖片完整呈現於容器中(如 windows 桌布「全螢幕」的效果)
cover 維持圖片比例，並以類似裁剪的方式將容器填滿(如 windows 桌布「填滿」的效果)
none 不調整圖片大小
scale-down 圖片尺寸會和 none 或 contain 其中一個相同，並依據哪一個的結果圖片會比較小來決定

object-position

  • MDN

  • x/y 位移值
  • 靠上(top)、靠右(right)、靠下(bottom)、靠左(left)，或置中(center)

css global values: inherit, initial, unset

inherit 繼承父層元素屬性
initial 根據瀏覽器預設值而定
unset 實際呈現為 inherit 或 initial 其中一個，如果父層有設定就是 inherit，反之則為 initial

Ex:

  • 範例

  • html

    <figure class="myWrapper">
  <img src="" class="myImage" />
</figure>

  • css

    figure.myWrapper {
  position: relative;
  width: 500px; /* 外層控制寬度大小 */
  height: 500px; /* 外層控制高度大小 */
  border: 2px solid #ccc; /* 方便參考外框大小，不需要就拿掉 */
}

img.myImage {
  position: absolute;
  width: 100%; /* 適應外層寬度 */
  height: 100%; /* 適應外層高度 */
  object-fit: cover; /* 填滿外層給的寬高 */
  object-position: center; /* 調整圖片根據外層置中對齊 */
}

練習是成長之母!

  1. 製作一張包含 250px*250px 圖片的人物介紹小卡，如果沒想法的話可以從 這裡 開始
  2. 試著和 Bootstrap 4 的 Grid System 合用，製作出像 KKBOX 歌曲排行榜 的呈現方式，專輯封面高度不小於 80px

山迷姐的解答:

  1. ANS_1

  2. ANS_2

我愛 CSS 我愛 CSS:

1.

我是可愛皮卡糾 ~

ans: 我就是 inline 之王!!! XDDD

<div
  style="
    border: 10px dotted yellow;
    width: 400px;
    height: 500px;
    background-color: black;
    color: snow;
    "
>
  <div
    style="
  border:5px solid snow;
  margin:5px;
  padding:5px;
  text-align:center;
  "
  >
    <img
      style="
     position: relative;
     width: 250px;
     height: 250px;
     object-fit: cover;
     object-position: top;
     "
      src="https://stickershop.line-scdn.net/stickershop/v1/product/12797/LINEStorePC/main.png;compress=true"
    />
  </div>
  <h1>我是可愛皮卡糾 ~</h1>
</div>

2.

好先吃飯 XDDD

好吃完飯 XDD

#
Album Cover
Artist & Album
Released

1

AFI: Decemberunderground
June 6, 2006

2

Blue October
April 4, 2006

3

Angels & Airwaves
May 23, 2006

ans: 我就是 inline 之王!!!!!!!

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
  rel="stylesheet"
  integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x"
  crossorigin="anonymous"
/>

<div class="container" style="background-color:black; color:snow;">
  <div class="row" style="border-bottom:2px solid snow; margin-bottom:5px;">
    <div class="col-2">#</div>
    <div class="col-3">Album Cover</div>
    <div class="col-5">Artist & Album</div>
    <div class="col-2">Released</div>
  </div>
  <div class="row" style="margin:2px;">
    <div class="col-2">
      <h3>1</h3>
    </div>
    <div class="col-3">
      <div style="min-height:80px; padding: 5px;">
        <img
          src="https://upload.wikimedia.org/wikipedia/en/0/04/AFI_-_Decemberunderground_cover.jpg"
        />
      </div>
    </div>
    <div class="col-5">AFI: Decemberunderground</div>
    <div class="col-2">
      <a
        style="color:snow;"
        href="https://en.wikipedia.org/wiki/Decemberunderground"
        target="_blank"
        >June 6, 2006</a
      >
    </div>
  </div>
  <div class="row" style="margin:2px;">
    <div class="col-2">
      <h3>2</h3>
    </div>
    <div class="col-3">
      <div style="min-height:80px; padding: 5px;">
        <img
          src="https://upload.wikimedia.org/wikipedia/en/3/37/Foiled_pop.jpg"
        />
      </div>
    </div>
    <div class="col-5">Blue October</div>
    <div class="col-2">
      <a
        style="color:snow;"
        href="https://en.wikipedia.org/wiki/Foiled"
        target="_blank"
        >April 4, 2006</a
      >
    </div>
  </div>
  <div class="row" style="margin:2px;">
    <div class="col-2">
      <h3>3</h3>
    </div>
    <div class="col-3">
      <div style="min-height:80px; padding: 5px;">
        <img
          src="https://upload.wikimedia.org/wikipedia/en/f/fe/Angels_%26_Airwaves_-_We_Don%27t_Need_to_Whisper_cover.jpg"
        />
      </div>
    </div>
    <div class="col-5">Angels & Airwaves</div>
    <div class="col-2">
      <a
        style="color:snow;"
        href="https://en.wikipedia.org/wiki/We_Don%27t_Need_to_Whisper"
        target="_blank"
        >May 23, 2006</a
      >
    </div>
  </div>
</div>

You May Also Enjoy