html5重復網格線
作者：佚名 時間：2014-06-15 分享到：
目前為止,本章所定義的網格都很易學習,且能應用于一些實際情況,然而為了實現更好的控制性能,常常會用到更復雜的網格,12列或者16列的網格是最常見的,每兩列之間通常還有一個孔(gutter,空白的間隔)用來把相鄰列隔開.但如果使用網格而已語法,即使是6列帶孔的網格的代碼都是十分繁瑣的:
e{grid-columns;1fr 10px 1fr 10px 1fr 10px 1fr 10px 1fr;}
想象如果有16列的話代碼有多繁瑣吧,為了解決這個問題,可以使用repeat()函數.此函數有兩個參數:一個用來設置重復次數的整數,另一個是要被重復的網格線的值:
e{grid-columes:1fr repeat(5,10px 1fr);}
此行代碼定義了一個軌跡,它寬1個fr,然后把一個10像素和1fr的樣式重復4次,和上例中的代碼是等效的.
ie10使用的是一個老版本標準的語法,此語法里重復次數這個參數放在圓周括號后面的一個方括號里,若要為win8的界面設計應用,則用以下語句:
e{ -ms-grid-columns:1fr repaet(10px 1fr)[5];}
如沒特殊注明，文章均為上海聯楷網絡原創,轉載請注明來自：http://www.ktcbnqb.cn/hynews/20151126/n3348.html
