[WebTech #63] CSS > 4. CSS 範例 > 4-3 排版相關語法

CSS 最早被發明的原因，就是用來把「排版」這件事，從 HTML 身上抽離，讓 HTML 能夠專心標記「文章結構」（標題、小標、段落...）。至於標題要用什麼字型、幾點字、是否對中...這些事，就統一交給 CSS 執行。

本篇將介紹 CSS3 排版相關語法的範例。透過了解這些範例，並參照下方的 CSS 參考手冊，相信您就能了解 CSS 排版語法的全貌了！

排版語法介紹： http://www.netmagazine.com/tutorials/master-new-css-layout-properties
一個複雜版面的範例： http://www.netmagazine.com/tutorials/create-fluid-layouts-html5-and-css3
排列出「內縮」版型的範例： http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/styling-simple-nested-comments-with-css/
多欄排列：
- 簡介： http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/an-introduction-to-the-css3-multiple-column-layout-module/
- 範例： http://www.hongkiat.com/blog/css3-multi-columns/
文字框排列： http://net.tutsplus.com/tutorials/html-css-techniques/an-introduction-to-css-flexbox/

最棒的 CSS Selector 或 Properties 線上參考手冊：
（進入後，Selector 在中央，Properties 在左下選單）
http://www.w3schools.com/cssref/css_selectors.asp

這兩天有朋友用 ask.fm 問了一些很有趣的問題XDD，在此分享給大家。原由就是所謂的「換一行」梗(笑

Q1.
http://www.ptt.cc/bbs/joke/M.1365982468.A.43A.html
看到這篇文章很有趣 看了底下回覆發現有好多種寫法 請問 \n 到底有什麼不同?
A1.

是 HTML 網頁的斷行；
\n 可以説是程式語言的斷行吧！
至少我碰過的 C, CGI, PHP 換行都是寫 \n
這題有趣！期待更多高手解答 XDDD

其實我自己對 \n &
有啥不同也似懂非懂，在我看來輸出成 HTML 之後兩者都一樣阿XD，只是我不會在 C 用
，會用 \n。以前好像有學過這個東西叫做逃逸字元 ?

接著有強者我朋友幫忙利用 ask.fm 解答：
\n 是等於 ASCII Code 的 10，代表一串字串中的換行字元。因為有它，字串顯示在螢幕上的時候才會有換行的感覺，不然字串在記憶體裡面也不管就是一串長長的碼而已。好像是因為 C 語言先用這種寫法，而且普遍被人接受，所以後來很多語法都用這種寫法代表換行。
至於
這種寫法是 HTML 的一種排版語法，只能透過瀏覽器觀看才有換行效果。不然把 HTML 整個檔案利用程式讀進記憶體裡，它在裡面還是，沒有換行。 個人淺見，請其它高手指教:)

Q2.
r -> return n -> 軟換行
ㄟ 這樣好像不太對, 怎變成是你問, 我回答了ww
A2.
等等，居然還有軟換行這種名詞 XDDD
我是知道

= \r

= \n
可是我都是講「段落換行」跟「換一行」耶 XDDDDD ((真的是換一行來著了 艸

第一次聽到軟換行這種名詞真的好新鮮喔 (笑)

沒想到 ask.fm 除了可以爆隱私之外，還可以討論這種有深度的問題，太令人感動了 (抹淚

那麼，歡迎大家繼續討論： http://ask.fm/mukiwu