4. 表格定位
顾名思义,表格定位就是用表格来实现网页内容的定位,先绘制一个多行多列的表格,并设定表格各列的宽度和各行的高度,然后在表格的单元格里插入相关网页元素,最终实现这些元素的位置定位。
这种定位方式比较适合可以将页面内容清晰明确地划分为多行多列的场景,例如各种业务单据和数据报表等。
有两种方式可以实现表格布局: HTML Table(<table>标签)和CSS Table(display:table 等相关属性)。HTML Table是早期网页设计采用的表格定位方式,由于其渲染性能较低,且有些界面效果较难实现,用的人已经比较少了,现在推荐使用CSS Table,能实现一些HTML Table做不到的效果。
目前,TaskBuilder只是在报表设计器里集成了一个第三方的表格插件,在前端tfp页面设计器里,还没有提供表格定位相应的容器组件,未来会提供。(现有的可编辑表格和数据表格不是用来为其他组件提供定位的,所以不能算作是表格定位的容器组件)
5. 弹性定位
弹性定位又叫弹性布局,这种定位方式最大的特点就是可以让子元素的大小可以根据父元素的大小自动扩张或收缩,从而可以做到自动适应不同终端的屏幕尺寸,或者在用户改变浏览器窗口大小时自动伸缩。
这种定位方式需要先将一个父元素的CSS属性display设置为flex,然后该元素里的子元素即可实现弹性定位。
采用弹性定位的容器元素可以设置以下CSS样式:
元素排列方向(flex-direction):用来设置子元素的排列方向,有四种方式可以选择:从左到右显示(row)、从右到左显示(row-reverse)、从上到下显示(column)、从下到上显示(column-reverse)。
元素水平对齐方式(justify-content):用来设置子元素在水平方向的对齐方式,可以选左对齐(flex-start)、右对齐(flex-end)、居中对齐(center)、两端对齐(space-between)和等距对齐(space-around)。
元素垂直对齐方式(align-items):用来设置子元素在垂直方向的对齐方式,可以选顶部对齐(flex-start)、底部对齐(flex-end)、居中对齐(center)、基线对齐(baseline)、自动伸展(stretch)。
内容整体对齐方式(align-content):当有多行子元素时,可以用该属性设置全部子元素整体的垂直对齐方式,包括自动拉伸(stretch)、在容器的顶部排列(flex-start)、在容器的底部排列(flex-end)、在容器内居中排列(center)、均匀分布,上下靠边(space-between)、均匀分布,每行等距(space-around)。