css3网格布局(grid-layout)基础知识

《css3网格布局(grid-layout)基础知识》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、CSS3引入了新的网格布局(gridlayout),以适应敁示和设计技术的发展(尤其是移动设备优先的响应式设计)。主耍目标是建立一个稳定可预料且语义正确的网页布局模式，用来替代过往表现不稳定且繁琐的table,flow以及JS脚本混合技术来实现的网页动态布局。1.概述网格模板区域(grid-template-areas)>网格模板行(grid-template-rows)和网格模板列(grid-template-columns)，这3个属性井同显式定义了一个网格容器。而网格模板(grid-template)属性是一个用来同吋设置这3个属性的速写(shorthand)。griditems内

2、容可能会超fli显式网格，这时网格容器会Q动生成隐式轨道(implicittrack)，这些隐式轨道的尺寸由grid-auto-rows和grid-auto-columns域件所确定。显式网格的大小是由网格模板区域定义的行/列数以及在网格模板行/网格模板列属性定义Y尺、j*的行/列数中的较大者决定的。任何由网格模板区域定义的行或列但没有在网格模板行/网格模板列中定义尺寸,则由grid-auto-rows或grid-auto-columns域件来确定大小。如果没有定义显式轨道，显式网格依然在每根轴线上包含一个网格线。网格定位(grid-placement)属性中的数字索引从显式网格的边缘开

3、始计算。如果从起始侧幵始，索引为以1幵始的正数。反之从结束侧幵始，则为以-1开始的负数。1.轨道尺寸：grid-template-rows和grid-template-columns这两个城性用来定义一组空格分开的轨道列表(tracklist),轨道列表本身使用网格线名称和轨道尺寸函数来定义。轨道尺、j*函数可以是兵体的长度、和对于网格容器的百分比、按实际填充内容计算(如min-content)或者可用空间片段。它还可以通过minmax(min,max)函数来指定一个长度范围，也就是介于min和max之间的一个尺寸，其中min/max参数同样可以使用前面提到的这些尺寸定义方式。grid-

4、template-columns属性指定网格列的轨道列表，而grid-template-rows属性指定网格行的轨道列表。2.命名IX域：grid-template-areas属性此属性指定命名网格区域，该区域与任何特定的网格项无关，但可在网格定位(grid-placement)属性中引用。网格模板

5、x:域(grid-template-areas)属性也提供了一个可视化的网格结构，使网格容器的整体布局更容易被理解。+代表一系列字符串。网格模板区域属性中每个单独的字符串(string)定义了一个行，而字符串中的每个单元(cell)定义了一个列。浏览器使用最长匹配语义来把字符

6、申解析为如下标记(token)列表：1.一串名称编码点(namecodepoints),代表一个命名单元标记(namedcelltoken),其名称由codepoints(即Unicode编码空间中的字符)组成。2.一串单个或多个代表一个空单元标记(nullcelltoken)。3.一串空格(whitespace)，代表不会生成任何标记。1.其它字符申，代表一个垃圾标记(trashtoken)。1.应用实例上述描述严格但有点死板，我们还是用一个经典的响应式多列多行页面布局实例来进行说明：[CSS代码]#page{display:grid;width:100%;height:250px;g

7、rid-template-areas:’’headhead.."navmain""footgrid-template-rows:50pxlfr30px;grid-template-columns:150pxlfr;}#page>header{grid-area:head;background-color:#8ca0ff;}#page>nav{grid-area:nav;background-color:#ffa08c;}#page>main{grid-area:main;background-color:}#page>footer{grid-area:foot;background-co

8、lor:#8cffa0;}[HTML代码]〈sectionid="page">