iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 8
2
Modern Web

前端新手村系列 第 8

前端新手村 橫向排列

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻

前言

網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網頁前端技術的關鍵字,成為比較有系統性的視野。

讓一開始接觸網頁前端的新手們,有一個比較友善的系統來架構你的學習,至於技術本身的深入探討,就留給其它的高手們吧。

橫向排列

在 HTML 中,直向排列會預設 width: 100%; ,但是在橫向排列時,會預設 width: auto 也就是依照內容決定寬度。在 Normal flow 的規則之下,它就會成為文字的排列方式。

橫向排列時的思考方式,比較不接近 Box Model 而是要使用「 inline 排版」的思考方式。

舉例來說

div 可以使用 margin-right: auto; 靠左,用 margin-left: auto; 靠右。
但是 span 不會有這樣的表現。

個人的 inline 排版觀念

這一段,純屬我個人的推敲,尚未全部證實,但是卻很好用。

文由行組成,行由字組成。

表現「文」形式的做法,最簡單就是將文裝進 block 容器中。
這樣就可以將「文」當作「文字區塊」的概念進行排版。

對「文章」的設定,可以設定在容器(在此為div)。

可作用在容器的 CSS

  • text-align[1]: 設定文章靠左還是靠右對齊。
  • white-space[2] 控制斷行是不是要變空白

可作用在元素的 CSS

  • white-space[2] 控制「原始碼的斷行」是不是要變空白

文由行組成,不是由字組成。
相對於 block 排版,「行」是在 inline 排版裡較特別的概念。

可作用在容器的 CSS

  • line-height[3] 行高
  • text-indent[4] 行起始字縮排

可作用在元素的 CSS

  • line-height[3] 行高設定在元素,但是影響整個文的行高(被撐開了)

行由字組成。

有字距(字母) letter-space ,有單字距 word-space
文字可以改大小寫 text-transform

可作用在容器的 CSS

  • text-transform [5] 字母大小寫轉換
  • text-decoration [6]文字的修飾線條 (去掉底線改這個)
  • letter-space [7]字距,字母之間的距離(中文字距)
  • word-space [7]字距,單字之間的距離(空白的大小)

可作用在元素的 CSS

  • virtual-align [3] 字有大有小時,就可以設定字的垂直對齊方式。
  • text-transform [5] 字母大小寫轉換
  • text-decoration [6]文字的修飾線條 (去掉底線改這個)
  • letter-space [7]字距,字母之間的距離(中文字距)
  • word-space [7]字距,單字之間的距離(空白的大小)

inline 的垂直對齊

文字的垂直對齊,對於初學者來說是一件很不好理解的事情。
因為,要垂直對齊,必須要在「行高」空間裡。

也就是說, inline 元素要垂直對齊,必須要先找到該元素的「行」,並且「把行撐開」,才可以使用 inline 的對齊屬性

在多行的情況中,文字的垂直對齊更受限於行與行之間,並不像 block 元素般自由的移動。必須使用另一種排版觀念思考,掌握度比較高。

參考資料

[1]: 16.2 Alignment: the 'text-align' property - w3.org
[2]: 16.6 White space: the 'white-space' property - w3.org
[3]: 10.8 Line height calculations: the 'line-height' and 'vertical-align' properties - w3.org
[4]: 16.1 Indentation: the 'text-indent' property - w3.org
[5]: 16.5 Capitalization: the 'text-transform' property - w3.org
[6]: 16.3 Decoration - w3.org
[7]: 16.4 Letter and word spacing: the 'letter-spacing' and 'word-spacing' properties - w3.org


上一篇
前端新手村 垂直排列 與 Box Model
下一篇
前端新手村 橫向排列 & 實現純手工 RWD
系列文
前端新手村30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

0
LeeBoy
iT邦新手 4 級 ‧ 2018-05-14 22:42:01

大推 virtual-align 的使用方式!豁然開朗

Chris iT邦新手 4 級 ‧ 2018-05-15 08:21:06 檢舉

很開心收到你的留言。
對你有幫助,真是太好了。

0
阿展展展
iT邦好手 1 級 ‧ 2020-02-22 11:01:43

精美的手繪稿 <3

我要留言

立即登入留言