🇹🇼

[week 6] CSS - 認識基礎標籤 & 屬性（二）

發佈時間

本篇為 [FE101] 前端基礎：HTML 與 CSS 這門課程的學習筆記。如有錯誤歡迎指正。

學習目標:

 P1 你知道 CSS 是什麼
 P1 你知道 inline、block 跟 inline-block 的區別
 P1 你知道什麼是 box model
 P1 你知道 position 的所有屬性及其差別
 P2 你知道 :hover, :before, :after
 P2 你知道 :nth-child 的各種用法
 P2 你熟悉 CSS selector，可以輕鬆選到想選到的元素

display: inline, block 跟 inline-block 的差別#

display 是 CSS 中用於控制排版的屬性。每個 HTML 元素都有一個預設的 display 值，大部分的元素可分為 block（區塊元素）和 inline（行內元素）兩類：

block：區塊元素#

  • 元素寬度預設會占滿整行
  • 可設定寬高/margin/padding，但會占滿一整行
  • 常見區塊元素：div、h1~h6、p、ul、li 等

inline：行內元素#

  • 元素可在同一行內呈現
  • 無法設定寬高，元素的寬高靠內容物撐開
  • 仍可設定上下 margin/padding，但字仍在行內，排版不會隨設定改變
  • 常見行內元素：a、span、input、img 等

inline-block：行內區塊元素#

  • 以 inline 方式呈現：可水平排列
  • 擁有 block 的屬性：可設定元素的寬高/margin/padding

以長寬同樣為 100px 的 box 為例：#

display: block#

block

display: inline#

inline

display: inline-block#

inline-block

以文字排版為例：DEMO#

Display 實戰篇#

以製作圖文小卡為例：DEMO

參考資料：

  1. CSS 教學-關於 display:inline、block、inline-block 的差別
  2. 金魚都能懂網頁設計入門 : 網頁兩大主角 (鐵人賽第十天)
  3. 關於"display" 屬性 - CSS

Position 屬性#

  • position 屬性可用來指定元素定位方式，以進行版面配置。
  • 當我們使用定位元素時，若元素方框重疊，可搭配 z-index 屬性設定元素堆疊順序。

static：正常流向#

  • 為預設值。在瀏覽器中會依照預設配置，由上而下自動排列

relative：相對定位#

  • 以「原本顯示的位置」作為基準，且該元素原本所佔的空間仍會保留

absolute：絕對定位#

  • 跳脫排版流，不會影響頁面其他元素
  • 以「基準元素」左上角為起點，進行絕對位移。基準元素是往上層找的「第一個 position 不是 static 的元素」，才可作為定位點
  • 若沒有指定基準元素，預設是以 body 元素（整個視窗）左上角為起點

fixed：固定定位#

  • 跳脫排版流。是一種絕對定位，同樣不影響其他元素
  • 將元素固定在瀏覽器視窗的相對位置，捲動頁面時仍會在固定位置

以文字排版為例：DEMO#

Position 實戰篇#

以製作彈窗為例：DEMO

參考資料：

  1. 關於 position 屬性 - 學習 CSS 版面配置
  2. CSS position 位置屬性（定位） - Wibibi
  3. position 屬性的基礎概念 - Medium

水平置中：#

margin: auto;#

設定左右外邊距（margin-left 與 margin-right）為 auto 可達成水平居中。

參考資料：學習 CSS 版面配置

補充：盒模型為什麼無法貼邊？#

盒模型在瀏覽器中會有默認的外邊距。此時只要利用 CSS Reset 即可解決空隙問題。

CSS Reset#

  • 方法一：利用全域選擇器
* {
  margin: 0;
  padding: 0;
}
  • 方法二：直接對元素進行設定
/* 設定基底字體大小 */
html {
  font-size: 12px;
}
/* 取消預設空隙 */
html, body, h1, h2, h3, h4, p{
  padding: 0;
  margin: 0 ;
}

CSS Reset 與 CSS normalize#

優點：統整、重置了各個瀏覽器的樣式設定。 缺點：必須全部重新做設定，比較沒有彈性。且在使用開發者工具時，會看到一大坨的繼承鏈（inheritance chain）。

最大的特色就是保留原本預設 HTML 標籤的樣式，僅針對不同瀏覽器與各版本間不相容的標籤進行些微調整。

參考資料： Day21：小事之 CSS Reset 與 CSS normalize

切版注意事項#

盡量不要把高度寫死#

例如：.header、.content、.footer 不用寫死高度，以內容撐出高度，並用 padding 產生留白，往後若更動內容才不易跑版。

如何垂直置中？#

  • 加上 padding 留白
  • 使用行高，但僅限只有一行字的時候才能使用

原理：「DIV 區塊的高度設定 = 文字的 line-height（行高）」

如何水平置中？#

  • 文字水平置中：text-align: center
  • 區塊元素本身置中：margin: 0 auto

如何讓 img 自適應容器大小#

不管容器有多大，只要將 img 的寬高設定成 100 %（這裡的 100%是相對於父級寬高而言）就能自適應容器大小。

參考資料：css 讓圖片自適應容器（div）大小- IT 閱讀 - ITREAD01.COM

CSS 屬性用法紀錄#

  1. CSS 限制字數/行數，讓過長的文字隱藏變"…"
/* 修飾過長的文字，ellipsis：用點點點來表示被切斷的字串 */
text-overflow: ellipsis;
/* 不進行換行 */
white-space: nowrap;
  1. box-shadow 屬性的參數
/* 投影方式 X軸偏移 Y軸偏移 模糊半徑 擴展半徑 顏色}*/
box-shadow: inset x-offset y-offset blur-radius spread-radius color;
  1. [教學] CSS3 半透明背景的四種設定方法 (RGBa、HSLa、Opacity、HEX)
opacity: x
/* x　取值 0~1，該區塊元素均會調整透明度 */
background: rgba(red, green, blue, alpha)
/* alpha 代表透明度，取值 0~1 */
  1. 決定換行的屬性
/* 預設不換行 */
flex-wrap: no-wrap;
/* 換行 */
flex-wrap: wrap;
  1. 文字跑板問題
  • word-break：文字斷行效果

word-break: break-all;：遇到邊界就換行

  • white-space：如何處理元素內的空白

white-space: pre-line;：自動合併多個空白，但保留換行符號