网页设计css布局方式,css制作网页布局代码

首页 > 技术 > 作者:YD1662023-02-09 15:47:00

浏览器兼容

grid 网格布局中的基本概念

此部分直接摘自CSS Grid布局:什么是网格布局

网格线(Grid Lines)

网格线组成了网格,他是网格的水平和垂直的分界线。一个网格线存在行或列的两侧。我们可以引用它的数目或者定义的网格线名称。

网页设计css布局方式,css制作网页布局代码(17)

网格线(Grid Lines)

网格轨道(Grid Track)

网格轨道是就是相邻两条网格线之间的空间,就好比表格中行或列。所在在网格中其分为grid column和grid row。每个网格轨道可以设置一个大小,用来控制宽度或高度。

网页设计css布局方式,css制作网页布局代码(18)

网格轨道(Grid Track)

网格单元格(Grid Cell)

网格单元格是指四条网格线之间的空间。所以它是最小的单位,就像表格中的单元格。

网页设计css布局方式,css制作网页布局代码(19)

网格单元格(Grid Cell)

网格区域(Grid Area)

网格区域是由任意四条网格线组成的空间,所以他可能包含一个或多个单元格。相当于表格中的合并单元格之后的区域。

网页设计css布局方式,css制作网页布局代码(20)

上一页12345下一页

栏目热文

文档排行

本站推荐

Copyright © 2018 - 2021 www.yd166.com., All Rights Reserved.