有關CSS3佈局排版的講解

　　前提

#　　在介紹佈局排版之前，我們首先引入一個尺寸單位，這個尺寸單位是在CSS3 中新引入的，它就是rem ，所有引用rem 定義的字體大小都是相對於根元素 文字的大小，相對於使用 em，這種方式將我們從手動計算字體大小的繁瑣過程中解脫出來。

　　效果一

　　demo01.png

#　　只要利用CSS3 提供給我們的新屬性，我們可以很輕易的做出這麼一個效果。下面我們針對用到的幾個主要屬性來講解。

• 　　column-width : 用於指定列的寬度，一旦指定一個值，瀏覽器會根據目前瀏覽器的寬度，動態的決定將內容分為多少列。

• 　　column-rule : 這個屬性是一種簡寫，其實它包含了三個不同的屬性，分別是 column-rule-width, column-rule-style, column-rule-color，反正實現的就是在列之間加上一個分割線，和 border 屬性的設定是相同的。

• 　　column-gap : 用來設定分欄的空隙屬性，這個數值由分欄兩側平攤。

　　如果想要實作分欄，我們可以利用 column-width ，也可以使用 column-count 屬性，但是我們通常不會這麼做，因為這意味著必須將內容分成三列，而不考慮當前瀏覽器的寬度，這是非常不友善的設計。

　　知道了以上屬性之後，相信你可以很快的將我們示圖中的效果實現出來，這裡我們不在貼上原始程式碼，你可以 點此下載 。這裡需要將一下，我們在頁面中引用了一些好看的字體，如果你也想使用，你住需要將下面這一行程式碼貼到你的 標籤下即可。

<link href=&#39;http://fonts.googleapis.com/css?family=Lobster|Terminal+Dosis&#39; rel=&#39;stylesheet&#39; type=&#39;text/css&#39;>

　　效果二

　　demo02.png

#　　這個效果我們讓利用Flexbox 實現的，以下針對用到的幾個屬性進行解說。

• 　　display : 如果想要使用 Flexbox 佈局，那麼我們首先要將這個屬性的值設為 flex。

• 　　flex-flow : 這個屬性其實是兩個屬性的縮寫，其中一個是 flex-direction 用來設定主軸的方向，如果設定為 row 則是一水平方向為主軸，若為 column 垂直方向為主軸。還有一個屬性是 flex-wrap， 用於設定元素換行，當元素超出父元素寬度時就自動換行，這就可以實現自適應螢幕的效果。

• 　　flex : 這個屬性一般在設定 display 為 flex 的子元素中設置，有三個參數，在這裡不在詳細解釋，因為我也不太能組織語言解釋它，可以百度查看一下該屬性的使用方法。

以上是有關CSS3佈局排版的講解的詳細內容。更多資訊請關注PHP中文網其他相關文章！