Table布局 Flex布局 Grid布局

Table 布局方式

在网页制作过程中,有两种实现 table 布局的方式:

  • 布局方式一:使用 table 元素及相关元素进行布局。

  • 布局方式二:使用与表格相关的 display 属性值来模拟表格进行布局。

table 元素通常用于描述一条或一组数据。而非表格内容用 table 来描述,不符合标签语义化要求。如果项目中需要类似表格的布局怎么办呢?可以用 display: table; 来解决。

display: table; 系列几乎是和 table 系的元素相对应的,请看下表:

display的值 描述
table 类似 ,此元素会作为块级表格来显示。
inline-table 类似 ,此元素会作为内联表格来显示。,此元素会作为一个或多个行的分组来显示。,此元素会作为一个或多个行的分组来显示。,此元素会作为一个或多个行的分组来显示。,此元素会作为一个表格行显示。,此元素会作为一个或多个列的分组来显示。,此元素会作为一个单元格列显示。
table-row-group 类似
table-header-group 类似
table-footer-group 类似
table-row 类似
table-column-group 类似
table-column 类似
table-cell 类似 ,此元素会作为一个表格单元格显示。
table-caption 类似
,此元素会作为一个表格标题显示。

Flex 布局

布局的传统解决方案,基于盒状模型,依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。

Flex 布局是什么

Flex 是 Flexible Box 的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

.box{
  display: flex;
}

行内元素也可以使用 Flex 布局。

.box{
  display: inline-flex;
}

 

基本概念

采用 Flex 布局的元素,称为 Flex 容器(flex container),简称容器。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称项目

容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做 main start,结束位置叫做 main end;交叉轴的开始位置叫做 cross start,结束位置叫做 cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。

你可能感兴趣的:(html,css,css3)