Permalink↓ 今日學習重點 ↓
- 了解網頁上三種常見的 display 屬性:block、inline、inline-block
在 CSS 中,display
屬性是一個關鍵的屬性,它可以改變 HTML 元素在網頁中的顯示方式。本篇我們將學習三種常見的 display
屬性值:block
、inline
和 inline-block
,並了解它們的特性和使用情境。
Permalink1. block
Block 區塊級元素通常會單獨占據一行,佔據父層的整個寬度。我們在講解 HTML 時曾經有提過好幾種預設為 block 的 HTML 元素,如:div、h1 等等。
.example-block {
display: block;
}
Permalink一、Float 排版:讓 Block 能夠浮起來
block 如果加上 float 屬性可以浮起來,可以往左飄也可以往右飄,這在過去是最主流的排版方式之一,只不過 flex 出現後就減少了。
不過,如果父層裡全是浮起來的元素,父層會沒有自己的高度(因為孩子全部浮起來了)。
這個時候我們可以在 float 元素的後面,新增一個元素(可以使用偽類)設置 clear 屬性為 both,意思是清除兩邊的浮動,這樣父層的高度就能包含浮動元素(新建個東西把浮起來的孩子抓回地面的概念)。
.child {
float: left;
}
.parent::after {
content: "";
display: block;
clear: both;
}
另外一種新方法則是:將父層設為 display: flow-root
。
.child {
float: left;
}
.parent {
display: flow-root;
}
Permalink2. Float :文繞圖
利用 float 的特性,與 inline 元素放在一起,我們可以很輕鬆就做出文繞圖的版面。
Permalink3. 使用 margin: auto 可左右置中
當 block 元素有固定寬度時,而且 margin
的左右設為 auto
時,可以簡單達到左右置中效果。
Permalink二、inline
inline 元素不會獨立占據一行,而是在同一行內與其他 inline 元素共享空間,並根據自身內容的大小進行調整。我們在講解 HTML 時曾經也有提過好幾種預設為 inline 的 HTML 元素,包括 <span>
、<a>
、<strong>
、<em>
、<img>
等。
.example-inline {
display: inline;
}
Permalink1. 無法設置上下 margin
inline 的元素無法設置 margin 的上與下,但是 margin 的左右可以。而 padding 是都可以設置,但是垂直高度不會推開。
Permalink2. 可以調整 vertical-align 與 line-height
雖然 inline 的元素無法使用 margin 調整自己的上與下,但是還有兩個屬性可以調整自己的垂直方向:
line-height
(行高),行高直接設定 1、2、3⋯⋯指的是倍數,除了倍數外也可以直接設定絕對單位。一般來說,文章的line-height
設為 1.5 - 2,閱讀起來會比較舒服。vertical-align
是文字的對齊方式,預設是baseline
,它是字母底部的基線,如圖所示。
Permalink3. inline 的細部設定
Permalink(1) text-align
text-align
決定文字排列的方向,可設置 left
、center
、right
、justify
。
Permalink(2) letter-spacing
letter-spacing
可調整文字的間距,這個間距是加在文字的後面。不過,講究的話,要注意如果搭配置中(如:text-align: center;
),會因為這個間距而導致不是完全置中喔,如圖所示:
遇到這個情況,可以使用 margin
或 padding
作微調。當 letter-spacing
數值小時,可能會看不太出來,但是當數值越大偏移的感覺就會越明顯。
Permalinktext-indent
text-indent
可設定文字首行縮排,設為負的就會變成凸排。
Permalink三、inline-block
inline-block 結合了 block 和 inline 的特性,它讓元素既能夠在同一行內排列,又能夠設置寬度、高度、margin 和 padding,也可以像 inline 一樣用父層設定 text-align
,全部的內容就會往右、置中、往左排列。
.container {
text-align: right;
}
.example-inline-block {
display: inline-block;
}
Permalink1. 使用情境:icon
inline-block 的特性這非常好用,最常使用情況在設定文字旁邊搭配 icon 的時候。
Permalink2. 小提醒:關於縮排時的空白
我們在寫 html 的時候這些縮排排版都是空白,瀏覽器會把這重複的空白視為一個。
<div class="content-social">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
</div>
若直接用 inline 或 inline-block 排版,就會多出這些空白,這時候可以於外層加上 font-size: 0; 消除空白。
但是因為 CSS 字體預設會繼承爸爸的設定,如果裡面的子層要顯示文字,文字會一起不見,這時候要在子層內加回 font-size
設定。
如果講究間距的寬度,每次要這樣設定稍微有點麻煩。下篇我們將解釋 flex
,可以更輕鬆完成版面排版。
雖然現在幾乎都使用 flex
排版了,但是了解 block
、inline
和 inline-block
的特性,能夠讓你排版的時候更靈活,遇到一些特殊情況也許還會需要。大家也可以來練習看看傳統的排版方式。
Permalink↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
感謝看到最後的你,若你覺得獲益良多,請不要吝嗇給我按個喜歡。❤️
如果你喜歡我的創作,還想看看其他有趣的分享與日常,
可以追蹤我的 IG @im1010ioio,或者是🧋送杯珍奶鼓勵我,謝謝你🥰。
Subscribe to our newsletter
Read articles from Eva Chen | 網頁設計師下班後 directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Article Series
Super Easy CSS,極度簡單:寫出好的 CSS,從零開始前端生涯
#00 文章目錄 / 參賽前言 | Super Easy CSS
參賽前言 本系列文章目標是學習 CSS 基本知識,並且研究 The State of CSS 中值得令人期待新屬性,讓想要學習 CSS 的人也能一起學到新知識,不用再零零散散地去爬文搜尋。此外,還會提…
#01 網頁的基本名詞:UI/UX?切版&切圖?前端&後端?靜態&動態?RWD or Mobile First? | Super Easy CSS
↓ 今日學習重點 ↓ 理解網頁設計師、工程師常用的詞彙是什麼? 網頁的基本名詞 UI/UX? UI/UX 分別代表使用者介面設計(User Interface Design,簡稱 UI)和使用…
#03 人在江湖,版控要有:了解 GIT / GitHub / GitLab / Git Flow
↓ 今日學習重點 ↓ 理解版本控制的重要性 了解 Git 版控的概念 了解 Git Flow,開發上的使用情況 我把我所知的 Git 知識都放在這了,自己去拿吧!(航海王口吻)不過也許有誤…
#04 GIT 實戰練習:GitHub Desktop、GitHub Page 基礎教學
↓ 今日學習重點 ↓ 安裝寫程式必要軟體 實際操作 GIT & GitHub 上一篇我們了解了 Git 與實際應用的概念,接下來我們要實際練習使用 GIT 和 GitHub。 安裝必要軟體 …
#05 Html 基礎語法
↓ 今日學習重點 ↓ 了解 HTML 的語法 上一篇文章,我們有建立了一份 HTML 檔案,那麼這些語法到底是什麼意思呢?讓我們往下看。 HTML、HTML5、HTM 是什麼? HTML(Hy…
#06 寫一份簡單的 Html,常用 Html Tag 總整理
↓ 今日學習重點 ↓ 練習使用 HTML 的各種標籤(tag) 知道 CSS 和 JS 要放在 HTML 的哪裡? 今天,讓我們來了解一份簡單的 HTML 會長什麼樣?然後,修改一下第 #0…
#06補充 網頁的根、絕對路徑、相對路徑,那些關於路徑的小知識
HTML 的屬性 href、src 都需要指定檔案路徑才能載入進來,所以這邊補充個關於路徑的小知識。 何謂網頁的根(root)? 指的是網域底下第一層的檔案,例如:https://test.com/…
#07 Css 基本語法 & 權重介紹
↓ 今日學習重點 ↓ 了解 CSS 的基本語法 對於 CSS 的權重有基本概念 我們終於進入我們的重點 CSS 啦!今天要來講解 CSS 權重與選擇器。 本篇會先講解如何撰寫 CSS 與權重…
#08 Css 選擇器總整理!
↓ 今日學習重點 ↓ 了解 CSS 各種實用的選擇器 本篇會用實例與註解說明各種實用的 CSS 選取器,由於很多所以可以先存起來,之後要用到時再查詢。 我的 Photoshop 老師游閔州曾說過…
#09 原生的 Css 變數,基本與進階應用
↓ 今日學習重點 ↓ 了解如何設定 CSS 變數,並且使用它們 CSS 變數(CSS Variables)可以讓人在整個網站的樣式中輕鬆重複使用相同的值,更輕鬆地調整網站的外觀,同時保持一致性。…
#10 原生的 CSS 巢狀 (CSS Nesting) 終於支援啦!
↓ 今日學習重點 ↓ 了解如何使用原生 CSS 巢狀 (CSS Nesting) 了解原生 CSS 巢狀的限制 (與 SCSS 比較) 以往 CSS 要使用巢狀管理要透過 Sass (SCS…
#11 開始寫 Css 或程式必須知道的:Dry & Kiss & Yagni
↓ 今日學習重點 ↓ 了解開發的三大原則:DRY & KISS & YAGNI 在進入寫 CSS(或其他程式碼)的世界之前,有幾個重要的原則值得我們了解和牢記。這些能夠提高 code 的品質,讓…
#12 Css 設計方法與命名建議:oocss、smacss、bem、rscss
↓ 今日學習重點 ↓ 了解 CSS 命名建議:OOCSS、SMACSS、BEM、RSCSS 上篇我們了解了寫 Code 的三大方向,主要都是為了更簡單、更好維護。 所以,以此延伸,有許多 CSS…
#13 CSS 盒子模型 (Box Model):border-box & content-box
↓ 今日學習重點 ↓ 了解網頁上,構成一個 Box 盒子的內容 了解 CSS border-box & content-box 有何不同 在網頁中,每個 HTML 元素都是一個方塊,我們又稱…
#14 Reset CSS!變回你該有的樣子
↓ 今日學習重點 ↓ 了解 CSS 為什麼需要 Reset? 了解 CSS 有哪些 Reset 的方法? CSS 為什麼需要 Reset? 不同的瀏覽器會有不同的預設樣式,可能包含字體大小、…
#15 網頁使用的單位大解析:px、rem、em、%、vw、vh (dvh, lvh, svh)、vmin、vmax
↓ 今日學習重點 ↓ 了解好用的 CSS 單位並使用它們 在網頁設計中,我們會使用到各種單位來調整尺寸和排版,而單位分成絕對單位和相對單位。以下是各種好用的單位介紹: 絕對單位 1. 像素(pi…
#16 CSS 數學函式 calc()、max()、min()、clamp()
↓ 今日學習重點 ↓ 了解四個實用的 CSS 數學函式:calc()、max()、min()、和 clamp() CSS 的數值可以做簡單的運算,今天我們要介紹 CSS 的數學函式,數學函式可以…
#17 CSS block、inline、inline-block:網頁排版的御三家
↓ 今日學習重點 ↓ 了解網頁上三種常見的 display 屬性:block、inline、inline-block 在 CSS 中,display 屬性是一個關鍵的屬性,它可以改變 HTML …
#18 CSS Flex 彈性盒子:網頁排版的超級寵兒
↓ 今日學習重點 ↓ 了解 Flex 的主軸線與交錯軸、flex-wrap(容器) 了解 flex-grow、flex-shrink、flex-basis、align-self、order(Fle…
#19 CSS Grid、Subgrid:網頁排版的神奇格子,來排個照片牆與雞腿便當吧!
↓ 今日學習重點 ↓ 學習 Grid 容器的各種設定 了解如何劃分 Grid 區域 了解 Subgrid 學習 Grid 細節設定:Gap、Order 昨天我們介紹的 flex 是單向的…
#20 CSS 內部尺寸 (Intrinsic Sizing):min-content、max-content、fit-content
↓ 今日學習重點 ↓ 了解 3 個 CSS 內部尺寸與實際應用:min-content、max-content 和 fit-content 今天來點簡單的主題! CSS 中的尺寸分為兩種,一種叫…
#21 CSS Position:relative、absolute、fixed、sticky 找到適合的定位
↓ 今日學習重點 ↓ 了解 5 種 CSS Position 定位方式 了解 z-index CSS Position 屬性可以用來設定元素在網頁中的位置,也是必學的屬性之一。它主要有 5 …
#22 CSS display: contents:讓你變成小透明,製作 JS Components 時的好東西!
↓ 今日學習重點 ↓ 了解 display: contents; 是什麼? 了解 display: contents; 的運用時機 了解 display: contents; 與 subgrid…
#23 CSS 邏輯屬性 Logical properties 與 Writing modes
↓ 今日學習重點 ↓ 了解 CSS 邏輯屬性的使用情境 了解 CSS 邏輯屬性的語法 CSS 新推出了另外一種排版邏輯,叫作邏輯屬性(Logical properties),特別是針對需要處…
#24 RWD & CSS Media Queries & iOS Safari 上的經驗談
↓ 今日學習重點 ↓ 了解 RWD 的概念與常見螢幕尺寸斷點 了解 Media Queries 的使用方法 了解開發 iOS Safari 的注意事項 當我們在設計網站時,我們希望網站能夠…
#25 CSS 列印的小技巧:@media print、break-before/after/inside、@page
↓ 今日學習重點 ↓ 了解如何設定列印樣式 了解如何防止元素換頁時被截半 了解如何處理列印頁面 網頁需要列印的情況,通常是一些表單頁面(收據、報告等)。上一篇我們講解了 CSS Media…
#26 CSS Container Queries 容器查詢:隨著自己變大變小變畫面
↓ 今日學習重點 ↓ 了解 Container Queries 的用法 了解 Container Queries 特有的單位 了解 Container Queries 的使用情境 前幾篇我…
#27 網頁載入字體、Icon Font 與 CSS font-family、font-weight
↓ 今日學習重點 ↓ 了解字體的基本知識 了解網頁如何載入字體 了解 CSS font-family、font-weight 了解如何使用 Icon Font 我們關於版面編排與 RWD…
#28 CSS 文字過長、行數過多顯示點點點、文字自動折行、強制換行:white-space、word-break、-webkit-line-clamp 的妙用
↓ 今日學習重點 ↓ 學會設定文字過長、行數過多顯示點點點(刪節號 ellipsis) 了解如何讓文字強制換行 學會如何讓文字依據 \r\n 自動折行 在網頁中,許多資料是動態產生的,也就…
#29 CSS 立體字、霓虹字、外框字、漸層字:text-shadow、-webkit-text-stroke、-webkit-background-clip
↓ 今日學習重點 ↓ 了解 CSS 的 text-shadow 與其應用 了解製作文字外框的方法 了解如何製作 CSS 文字遮罩 之前我們都是著重在網頁排版上,今天我們要來做點吸睛的文字視…
#30 iT 鐵人賽心路歷程 & 我的寫作方法
這 30 天真的是很經歷了好多,這中間經歷了去日本玩、首次確診、兩個連假,同時要整理過去熟悉的知識,還要研究其他我不會的,一度還逼近棄賽,能完賽很感動。 今天不寫 CSS,來分享這 30 天的心路歷程…
#31 CSS 顏色設定:基本的 hex、rgb()、cmyk()、hsl()、hsb() 、hwb() 與明日之星的 lch()、oklch()
↓ 今日學習重點 ↓ 了解 hex、rgb()、cmyk()、hsl()、hsb() 了解廣色域是什麼 了解 lch()、oklch() 與他們的優勢 顏色在之前的範例中雖然有用到,但是一…
#32 CSS 顏色變數 currentcolor、checkbox/radio 顏色、input placeholder、閃動的光標顏色、文字反白的顏色、與混色的 color-mix() 製作色彩系…
↓ 今日學習重點 ↓ 了解 currentcolor 及他的使用時機 了解 accent-color、placeholder 了解怎麼改動 input 閃動的光標顏色 了解怎麼改動文字反白的顏…
#33 CSS 切換淺色/深色模式:Media Queries 的 prefers-color-scheme 搭配 CSS 變數
↓ 今日學習重點 ↓ 使用 Media Queries 的 prefers-color-scheme 搭配 CSS 變數設定預設的淺色/深色模式 使用 HTML input checkbox 做…
#34 CSS 讓圖片填滿容器的各種方法,以圓形大頭貼為例:object-fit 與 background-size,搭配 aspect-ratio
↓ 今日學習重點 ↓ 在 HTML 加入圖片 使用 object-fit 讓圖片填滿容器 使用 background 讓圖片填滿容器 在 HTML 加入圖片 我們可以使用 HTML 的 <…
#35 圖片的 1x, 2x, 3x 是什麼?關於網頁上圖片解析度的處理:HTML <img> srcset、CSS image-set() 與 @media resolution
↓ 今日學習重點 ↓ 了解向量圖、點陣圖是什麼? 了解像素密度 (Pixel Density) 的原理 使用 HTML <img>srcset 屬性處理圖片 使用 CSS background…
#36 HTML <video> 用影片當背景,使用 iframe 嵌入 Youtube自動播放/ IG/ TikTok/ X (Twitter) 影片
↓ 今日學習重點 ↓ 使用 HTML <video> Tag 放入影片並操作各種屬性 使用 CSS 製作網頁的影片主頁橫幅 (Hero Image) 使用 <iframe> 嵌入YouTube …
#37 CSS 基本漸層:線性/放射/圓錐漸層 (CSS linear-gradient, radial-gradient, conic-gradient)
↓ 今日學習重點 ↓ 學會使用線性/放射/圓錐漸層 了解如何設定漸層的色彩空間 除了背景圖片,漸層色也是屬於 CSS 的背景一種,今天我們就來練習畫各種漂亮漸層吧! 單純用漸層色就能夠表現出…
#38 CSS background 組合技:多重背景、背景位置、簡易視差滾動 (iOS 不支援)
↓ 今日學習重點 ↓ 學會 CSS 背景的詳細設定方式 學會使用多重背景,並了解使用情境 學會設定背景的原點 background origin,及了解他的使用情境 學會使用簡易的視差滾動 …
#39 CSS 幾何背景:條紋、格子、點點、棋盤格子背景 (CSS background)
↓ 今日學習重點 ↓ 學會繪製各種條紋、格子背景 學會繪製各種點點背景 學會繪製各種棋盤格背景 除了單純的漸層色外,漸層還能夠延伸畫出其他的圖案:如條紋、格子、點點、棋盤格背景等等,很神奇…
#40 使用 CSS filter blur 製作簡易的任意形狀漸層 (流動/暈染背景)
↓ 今日學習重點 ↓ 學習 CSS filter blur() 特效 使用偽元素 ::before / ::after 製作裝飾元素 使用 box-shadow 製作裝飾元素 在平面設計中…
#41 用 CSS border-radius 畫圓角與圓圓的形狀:圓、圓柱、橢圓、蛋型、鐘型、葉子 (眼睛)、花瓣 (水滴/心形)、牛角 (彎月)
↓ 今日學習重點 ↓ 學會 border-radius 的基本用法 了解繪製出圓角的原理 在上篇文章中,我們用簡單的圓形加上模糊效果繪製了不規則的漸層,這篇我們來探討如何繪製各種形狀,其實使…
#42 用 CSS border 繪製三角形箭頭 (等腰/直角三角形)
↓ 今日學習重點 ↓ 學會用 border 繪製等腰與直角三角形 在 CSS 中,可以使用邊框 border 來繪製三角形,通常會被當成箭頭使用,用在提示框的邊緣或操作步驟按鈕上。 CSS b…
#43 用 CSS clip-path 剪裁各種形狀的色塊/圖片/影片
↓ 今日學習重點 ↓ 學會使用 CSS clip-path 繪製各種圖形 在 CSS 中除了使用 border 來繪製形狀,還有一個語法 clip-path 也可以繪製圖形,它可以將東西指定在某…
#44 CSS 邊框 border 與各種花式邊框的小技巧:borde-image、outline、box-shadow
↓ 今日學習重點 ↓ 學會 CSS 基本邊框 border 的用法 了解 border-image 的原理與用法 了解如何繪製多重邊框:outline / box-shadow 前幾篇我們…
#45 CSS 中的半透明遮罩 mask,實現各種模糊邊緣特效
↓ 今日學習重點 ↓ 學會 CSS 遮罩 mask 的用法 了解 mask-mode 常用兩種模式下的差異 前幾篇寫到 CSS clip-path 時,可以剪裁任何 HTML 的元素,包含色…
#46 CSS 濾鏡 filter/ backdrop-filter:模糊、透明圖陰影、調色與毛玻璃效果
↓ 今日學習重點 ↓ 學會 CSS 濾鏡 filter 的用法 學會 CSS 背景濾鏡 backdrop-filter 的用法 除了用繪圖軟體在圖片上調整色調,CSS 內建的濾鏡效果也能讓我…
#47 一次搞懂 CSS 各種混合模式:mix-blend-mode/ background-blend-mode
↓ 今日學習重點 ↓ 了解 CSS 各種混合模式 將混合模式應用在 mix-blend-mode 和 background-blend-mode 上 mix-blend-mode 和 bac…