CSS3高級(jí)屬性有哪些

這篇文章將為大家詳細(xì)講解有關(guān)CSS3高級(jí)屬性有哪些，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

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

1、CSS3創(chuàng)建多列

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

效果如下：

這樣一來，我們就可以將文本分成3列顯示，超出的文本自動(dòng)隱藏，我們?cè)趯戫憫?yīng)式頁面的時(shí)候就可以用到它哦！

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

調(diào)整多列中列與列間的間隙的時(shí)候我們就可以用column-gap，它就指定了列與列間的間隙，我們?cè)僖膊恍枰獙ｉT給div設(shè)定浮動(dòng)，還要設(shè)置它們之間的margin，有了它就可以像Swiper那樣一個(gè)屬性，輕輕松松設(shè)置間距，效果如上圖那樣，分成三列，并設(shè)置間距。代碼如下：

3、CSS3 列邊框

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

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

達(dá)到的效果如下：

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

4、指定元素跨越多少列

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

5、指定列的寬度

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

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

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

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

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

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

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

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

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

1、flex-direction

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

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

2、justify-content 屬性

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

效果如下：

平時(shí)space-between用的最多，它會(huì)讓彈性子元素均勻的分布在彈性盒子呢，而且是響應(yīng)式的排列。

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

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

@media 可以針對(duì)不同的屏幕尺寸設(shè)置不同的樣式，特別是如果你需要設(shè)置設(shè)計(jì)響應(yīng)式的頁面，@media 是非常有用的。

當(dāng)你重置瀏覽器大小的過程中，頁面也會(huì)根據(jù)瀏覽器的寬度和高度重新渲染頁面。

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

關(guān)于“CSS3高級(jí)屬性有哪些”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。