html 线重叠,HTML5重复网格线

HTML5重复网格线

时间：2014-6-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];}