CSS

梗概

  • 一种类似于表格布局模式
  • 布局容器上定义表格的形状以及单元格大小
  • 被布局元素可以选择填在哪个单元格上

基本概念

1. 单元格

和excell中的单元格差不多

2. 网格线

3. 容器

使用网格布局的html标签

4. 项目(item)

容器内的html标签, 用于填入网格中

失效的属性

1. 容器被覆盖的属性

1.1. width和height属性

容器的宽度和高度将会被列宽总和和行高总和所覆盖

2. item的失效属性

设为网格布局以后,容器子元素(项目)的floatdisplay: inline-blockdisplay: table-cellvertical-aligncolumn-*等设置都将失效。

可用的属性

示例