region 屬性：
印刷**，例如一本雜誌或乙份報紙，相比**最大的優勢是完全靈活的安排頁面和段落布局。例如,印刷**已經能夠優雅地在多個列中填充內容,甚至複雜到如下面螢幕截圖所示。
然而,由於web的內容結構,試圖在web上模仿類似的布局非常棘手。
為了使頁面布局更加靈活到如印刷**一般,乙個新的css3模組出現了——css3 regions。相比通常的在多個元素中放置內容，此模組允許內容流在頁面的指定區域(regions)放置。
讓我們看看這個模組是如何工作的。
大家在理解css region的時候，可以這麼理解，我在文件中放了乙個容器，這個容器裝滿了水。但是我想把水分到a區域 b區域 c區域，我不需要人工去「分」這個水，而是讓瀏覽器去分配這些水到這些區域內。因此水裝到哪個容器是無所謂的，分完了就不顯示了，你只需要告訴區域跟大容器，區域是放水的地方，容器是取水的地方即可。
啟用瀏覽器實驗特性
此模組仍處於實驗階段,目前只在google chrome和ie下面支援帶字首的屬性。如果您使用的是google chrome首先需要啟用實驗特性。在位址列輸入chrome:/ /flags/。設定」啟用實驗webkit特性」為enabled狀態。
基本用例
在這個例子中,我們將有兩個型別的內容:主要內容和次要內容。區域1,2和4中我們填充主要內容,而次要內容將顯示在區域3,見下圖。
html
讓我們開始寫html結構。
css3區域模組是不受結構限制的,因此我們可以簡單地把次要內容部分的html新增到主要內容外,正如我們上面提到的,我們將在主要內容的中部顯示次要內容。
xml/html code
複製內容到剪貼簿
然後,我們需要新增區域標記來標記內容流向什麼區域。新增標記的區域是否高於或低於實際內容是沒有什麼影響的。
這裡的意思是 假設有個div裡面裝了很多文字，你要把這些文字流向另乙個div中，這個div放到哪都是無所謂的。
xml/html code
複製內容到剪貼簿
"regions cf">
"region-1" class="region cf">
"region-2" class="region">
"region-3" class="region">
"region-4" class="region cf">
css在樣式表中,我們指定區域的寬度和高度。高度是必須的，因為高度指定內容斷點,否則內容不會流向其他區域。
這裡的意思是高度規定這個容器能容納多少內容，超過了則會流向其他容器。——@99
css code複製內容到剪貼簿
width: 100%;
height: 250px;
}height: 400px;
}width: 50%;
height: 700px;
margin-bottom: 25px;
}為了在區域內新增內容,我們使用新的css屬性flow-into和flow-from。這些屬性建立了內容和區域的橋梁。我們可以如下編寫樣式規則來使內容流向區域。
這個地方flow-into跟flow-from後面的單詞是你自己定義的!比如說我想把a容器的文字流b c區域，我可以設定flow-into:a或者你能想象到的任何名稱，之後用flow-from：你剛才用的名稱。
css code複製內容到剪貼簿
article
-webkit-flow-into: aside;
flow-into: aside;
}#region-1,
#region-2,
#region-4
#region-3
新增一些額外的css,我們將在瀏覽器中得到下面的結果。
CSS3 動畫模組
動畫模組 動畫格式 1.告訴系統需要執行哪個動畫 animation name 動畫名 3.告訴系統動畫持續時間 animation duration 時間 2.告訴系統所需要建立乙個名字為 動畫名 的動畫 keyframe 動畫名 from 0 margin left 0 to 50 margin...
CSS3過渡模組
過渡模組 1.過渡模組三要素 1.1必須要有屬性發生變化 1.2必須告訴系統哪個屬性要執行過渡效果 1.3必須告訴系統實現什麼樣的效果 2.書寫格式 transition 過渡屬性 過渡時長 運動速度 延遲時間 transition property,transition duration,tran...
CSS3相關效果整理
1.過長省略 white space nowrap 為應用text overflow做準備，禁止換行 overflow hidden 為應用text overflow做準備，禁止文字溢位顯示 text overflow ellipsis 相容ie，safari webkit o text overf...