擊上方“Web前端進階指南”關注我呦

跟程序員小強一起學前端

這一篇呢，我們來說說CSS3一些高級有趣的屬性，幫助我們更好的，更高效的去開發我們的頁面，不僅在效率上提高很多，而且頁面效果上更炫酷，下面一起來看看吧。

CSS3多列屬性

CSS3多列屬性有很多，我們一一來介紹一下，包括以下幾個屬性：

• column-count
• column-gap
• column-rule-style
• column-rule-width
• column-rule-color
• column-rule
• column-span
• column-width

1、CSS3創建多列

column-count屬性指定了需要分割的列數，就是說你想要讓你的文本顯示多少列，我們不需要寫很多個div，然后去限制字數，分別在每個div里調用多少字，還需要讓div浮動，麻煩滴很啊，這是用CSS3多列我們自己就可以達到這樣的需求。如圖所示：

效果如下：

這樣一來，我們就可以將文本分成3列顯示，超出的文本自動隱藏，我們在寫響應式頁面的時候就可以用到它哦！

2、CSS3 多列中列與列間的間隙

調整多列中列與列間的間隙的時候我們就可以用column-gap，它就指定了列與列間的間隙，我們再也不需要專門給div設定浮動，還要設置它們之間的margin，有了它就可以像Swiper那樣一個屬性，輕輕松松設置間距，效果如上圖那樣，分成三列，并設置間距。代碼如下：

3、CSS3 列邊框

還有更好玩的多列屬性。上面我們設置完了列與列的間距，這呢我們用column-rule-style屬性來設置列與列之間的邊框樣式，我們不再用圖片或者更多的CSS去寫，它就可以了，例如：

這樣我們就可以將文本分成3列，間距40px，列邊框的樣式為虛線，此外，我們還設定邊框的寬度（column-rule-width），顏色（column-rule-color），并且像CSS中那樣去用（column-rule）簡寫我們的多列邊框，例如：

達到的效果如下：

順便給大家說一下CSS有哪些邊框樣式，直接上圖啦：

4、指定元素跨越多少列

就是給被指定的某個元素應該跨多少列，這時候我們就要用到（column-span）這個屬性了，這個屬性有兩個值，一個是1，一個是all，這就是說如果有個文本我們把它分成3列，我們就可以指定它的標題占1列或者所有的列。如下圖：

5、指定列的寬度

我們不僅可以把文本分成幾列，還可以專門指定被分成列的寬度，這時候我們可以用column-width屬性，來指定列的寬度。例如：

CSS3行數限制

限制在一個塊元素顯示的文本的行數，我們就可以用-webkit-line-clamp，由于它是一個不規范的屬性，他沒有出現在CSS規范草案中，不過并不代表我們不能用，為了使用它達到我們想要的效果，我們得結合一些屬性，例如：

這樣一來，我們就可以讓我們的文本顯示6行，其余的用省略號代替。

此外，我們也可以顯示一行文本，多余的用省略號代替，例如：

CSS3 writing-mode 屬性

writing-mode 屬性定義了文本在水平或垂直方向上如何排版，這樣我們就可以省去大量的CSS代碼，一個屬性就可以搞定，writing-mode有5個值，分別是：

• horizontal-tb：水平方向自上而下的書寫方式。即 left-right-top-bottom
• vertical-rl：垂直方向自右而左的書寫方式。即 top-bottom-right-left
• vertical-lr：垂直方向內內容從上到下，水平方向從左到右
• sideways-rl：內容垂直方向從上到下排列
• sideways-lr：內容垂直方向從下到上排列

我們可以讓元素以任何形式放置在我們的表格當中，例如下圖：

CSS3彈性盒子

這也是我們常用的知識，彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。通過設置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。容器內包含了一個或多個彈性子元素。

正常情況下，我們只需設置display:flex即可，彈性子元素元素就會在一行內顯示（彈性子元素通常在彈性盒子內一行顯示。默認情況每個容器只有一行），從左到右。

當然我們也可以修改排列方式，例如我們將body設置direction 屬性為 rtl （right-to-left），彈性子元素的排列方式也會改變，頁面布局也跟著改變，所有的子元素會靠近左側排列，并且以倒序排列。

1、flex-direction

flex-direction 屬性指定了彈性子元素在父容器中的位置。其屬性值：

• row：橫向從左到右排列（左對齊），默認的排列方式。
• row-reverse：反轉橫向排列（右對齊，從后往前排，最后一項排在最前面。
• column：縱向排列。
• column-reverse：反轉縱向排列，從后往前排，最后一項排在最上面。

例如我們用row-reverse將子元素倒序排列：

2、justify-content 屬性

內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。這樣我們就可以更好地排列我們的文本了，它呢有5個值，例如：

• flex-start：彈性項目向行頭緊挨著填充。這個是默認值。第一個彈性項的main-start外邊距邊線被放置在該行的main-start邊線，而后續彈性項依次平齊擺放。
• flex-end：彈性項目向行尾緊挨著填充。第一個彈性項的main-end外邊距邊線被放置在該行的main-end邊線，而后續彈性項依次平齊擺放。
• center：彈性項目居中緊挨著填充。（如果剩余的自由空間是負的，則彈性項目將在兩個方向上同時溢出）。
• space-between：彈性項目平均分布在該行上。如果剩余空間為負或者只有一個彈性項，則該值等同于flex-start。否則，第1個彈性項的外邊距和行的main-start邊線對齊，而最后1個彈性項的外邊距和行的main-end邊線對齊，然后剩余的彈性項分布在該行上，相鄰項目的間隔相等。
• space-around：彈性項目平均分布在該行上，兩邊留有一半的間隔空間。如果剩余空間為負或者只有一個彈性項，則該值等同于center。否則，彈性項目沿該行分布，且彼此間隔相等（比如是20px），同時首尾兩邊和彈性容器之間留有一半的間隔（1/2*20px=10px）。

效果如下：

平時space-between用的最多，它會讓彈性子元素均勻的分布在彈性盒子呢，而且是響應式的排列。

CSS3多媒體查詢

CSS3多媒體查詢可以針對不同的媒體類型(包括顯示器、便攜設備、電視機，等等)設置不同的樣式規則。但是這些多媒體類型在很多設備上支持還不夠友好。目前很多針對蘋果手機，Android 手機，平板等設備都會使用到多媒體查詢。像別的媒體，例如打印機、屏幕閱讀器等的兼容性還不是很好。

使用 @media 查詢，你可以針對不同的媒體類型定義不同的樣式。

@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。

當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面。

比如說我們常用的響應式頁面，我們想在媒體寬度最大500px顯示圖片，其余媒體不顯示，我們就可以這樣寫：

總結

在使用本篇講解的CSS3屬性時，一定要注意其瀏覽器的兼容性，因為很多的CSS3屬性都不支持主流的低版本的瀏覽器，基本IE10以上、FireFox3.5以上、Chrome21.0以上、Safari4.0以上才能很好地兼容，希望小伙伴們注意。

本期的CSS3到這里就全部講解完了，也希望小伙伴們學的快樂，馬上也到了寒假過年的好日子，希望大家不要忘記學習哈！

接下來的我們會很長一段時間去學習JavaScript，如果你想學，關注我，我將帶領大家一起去學習。