网页元素常见的定位方式，除了表格定位以外，其他方式TaskBuilder都可以支持。下面给大家介绍一下在TaskBuilder中如何设置组件的定位方式。
1. 设置新建组件默认的定位方式
在使用TaskBuilder创建前端TFP页面时，有一个“定位方式”的选项，可以用来设置在该页面内新建组件时默认的定位方式，为了简化操作，目前仅支持两种默认定位方式：浮动定位 和 绝对定位 ，默认是浮动定位，如下图所示：
上图是创建空白TFP页面的示意图，创建数据查询、添加、修改和详情TFP页面时，也都有这个定位方式的选项。
如果在创建TFP页面时，定位方式选择的是浮动定位，则后续从组件库里拖拽组件到该页面上时，新建的组件会按下面的规则进行显示：
l 容器组件按照流式定位里的块级元素进行显示，多个容器组件默认从上到下显示，每个独占一行，宽度默认为100%
l 非容器组件按照浮动定位从左至右浮动显示，一行可以显示多个
如果在创建TFP页面时，定位方式选择的是绝对定位，则后续从组件库里拖拽组件到该页面上时，不管是容器组件还是非容器组件，新建的组件默认都会采用绝对定位，即鼠标在哪里松开，新建的组件就会插入到该位置的容器组件中，并显示在鼠标松开的位置，如果还需调整位置，可以继续用鼠标拖拽调整。
绝对定位和传统的桌面GUI应用开发采取的定位方式非常相似，例如：VB、Delphi、PowerBuilder、VS WinForm等，如果原来用过这些开发工具，对绝对定位就会很熟悉，很容易上手。
注意：新建组件时，有一种特殊情况不会按照上述规则处理，即从组件库中拖拽组件到 弹性面板 组件中时，新建的组件不会采用当前页面里设置的默认定位方式，而是会按弹性定位进行处理，后面会详细讲解弹性面板组件的使用。
2. 修改已有组件的定位方式
上面介绍的默认定位方式只是为了确定在新建组件时采用哪种定位方式，并不代表创建完的组件只能是这种定位方式。如果想修改页面上已有组件的定位方式，可以在TaskBuilder前端页面设计器中先选中组件，然后在顶部的外观样式设置栏的“显示和定位”中，点击定位方式选项，在弹出的列表中选择相应的定位方式即可，如下图所示：
(1) 流式定位设置
如果将组件设置为流式定位，则可以在右侧选择具体的显示方式，可以选系统默认（即该组件对应的HTML元素在浏览器里默认的显示方式）、显示为内联元素、显示为块级元素和显示为行内块元素，如下图所示：
(2) 浮动定位设置
如果选择的是浮动定位，则可以在右侧的浮动方式中选择是左浮动还是右浮动，如果选的是左浮动，则组件靠左对齐，这也是浮动定位时，非容器组件默认的对齐方式，如下图所示：
如果选的是右浮动，则组件会靠右浮动，如下图所示：
(3) 坐标定位设置
如果选择的是相对定位、绝对定位、固定定位和粘性定位这几种定位方式，则可以设置组件的堆叠顺序和上下左右的具体偏移量，如下图所示：
其中，堆叠顺序（CSS样式名：z-index）用来确定组件在当前层叠上下文中的层叠级别，参数类型为整数，数值大的在上面，数值小的在下面，例如下图所示的a、b、c三个面板组件，就是按照堆叠顺序从小到大、从底到上的顺序显示的。
如果上下偏移量只设置其中一个，另外一个为空，则组件的高度由正常的CSS样式的height确定。如果左右偏移量只设置其中一个，另外一个为空，则组件的宽度由正常的CSS样式的width确定。组件的宽度和高度可以在TaskBuilder前端页面设计器顶部样式设置栏的“显示和定位”里查看和设置，如下图所示：
如果上下偏移量都设置，并且未设置高度，则组件高度会根据父组件的高度和自身上下偏移量动态确定，计算公式如下：
组件高度 = 父组件内容区高度 - 上偏移量 - 下偏移量
如果左右偏移量都设置，并且未设置宽度，则组件宽度会根据父组件的宽度和自身左右偏移量动态确定，计算公式如下：
组件宽度 = 父组件内容区宽度 - 左偏移量 - 右偏移量
采用 绝对定位 时，如果组件设置了上下左右中的三个偏移量，另外一个为空，则可以实现固定停靠在父组件内容区某一侧的效果，即使父组件的大小发生了变化，停靠位置不会发生变化。
例如，设置了左右和上侧偏移量，下侧未设置，则组件向上停靠，如下图：
如果设置了左右和下侧偏移量，上侧未设置，则组件向下停靠，如下图：
如果设置了上下和左侧偏移量，右侧未设置，则组件向左停靠，如下图：
如果设置了上下和右侧偏移量，左侧未设置，则组件向右停靠，如下图：
如果上下左右四个偏移量都设置，且不设置组件的宽度和高度，则该组件会铺满整个父组件的内容区，并且与父组件上下左右边框的边距就是这四个偏移量的值，当父组件的大小发生变化时，该组件的大小随之变化，保持与父组件的边距不变，如下图所示：
(4) 弹性定位设置
弹性定位需要先将一个父元素设置为弹性盒子，子元素（项目）才能进行弹性定位，不是说将某个独立的网页元素设置一下就能实现弹性定位，所以在TaskBuilder里，没有将弹性定位设置为默认的定位方式，而是可以通过 弹性面板 和 弹性栅格 这两个组件来实现弹性定位，下面分别介绍一下这两个组件。
1) 弹性面板组件
弹性面板组件可以像普通面板组件一样，作为其他组件的容器，区别就是，在面板组件内创建新的子组件时，默认的定位方式按照当前页面选择的定位方式进行定位，而在弹性面板组件里创建新组件时都会按照弹性定位进行定位，默认子组件（元素）从左至右排列、水平左对齐、垂直居中对齐、不自动换行，可以在属性设置中修改这些设置。
新建的弹性面板组件，默认里面是没有任何子元素的，需要开发者自己从组件库拖拽创建所需的子组件，子组件的弹性定位有关的样式可以在顶部样式设置栏的“显示和定位”里设置，如下图所示：
2) 弹性栅格组件
弹性栅格组件最外层跟弹性面板组件一样，都是一个采用弹性布局的容器元素，新建弹性栅格组件时，默认会创建两个子元素，并从左至右横向显示，点击属性设置里的“元素集合”，可以打开元素设置对话框，在此批量设置具体要显示多少个子元素，及各个子元素的扩展量、收缩量和基准长度等。弹性栅格里的每个子元素都是一个面板组件，里面又可以拖拽放入其他组件，这样就就可以快速创建多列或多行的栅格容器。
相对弹性面板组件，弹性栅格组件多了一层，它不是直接把其他组件拖拽到其内部，而是先设置有多少个栅格，然后再把其他组件拖入到这些栅格里，拖入到这些栅格里的组件具体采用什么定位方式，取决于当前页面设置的默认定位方式。
网页元素的边距和边框
由于网页元素的边距和边框会影响到元素的显示位置，所以在此也统一介绍一下。网页元素在浏览器中实际占用的空间大小由外边距（margin）、边框（border）、内边距（padding）和内容区这四个部分构成，如下图所示：
在TaskBuilder前端页面设计器顶部的样式设置栏里的“边距和边框”中可以设置选中组件的外边距、内边距和边框，如下图所示：
下面，分别介绍一下这几个参数的具体含义：
外边距（margin）：外边距用来设置该元素与父元素边框及相邻兄弟元素之间的间距，外边距没有背景颜色，是完全透明的，可以使用负值。内联元素的外边距在水平方向上设置有效，垂直方向上无效。
内边距（padding）：内边距用来设置该元素的子元素与其边框之间的间距，与外边距不同，内边距会受到元素背景属性的影响，不允许指定负内边距值。内联元素水平方向上的内边距(padding-left, padding-right)可以正常设置，垂直方向上的内边距不会影响它的内容区高度，但是会影响他的背景高度。
边框（border）：边框是围绕元素内容和内边距的一条或多条线，对于这些线条，您可以自定义它们的宽度、样式以及颜色。
在TaskBuilder前端页面设计器顶部的样式设置栏里，点击“边距和边框”，再点击“边框”右侧的设置按钮，即可打开如下图所示的边框设置窗口：
在该窗口内，可以设置全部边框的宽度、样式和颜色，也可以分别设置上下左右四个边里的一个或某几个的边的宽度、样式和颜色。
另外，在该窗口底部，还可以设置边框的四个角是否使用圆角，依次为左上角、右上角、右下角和左下角。如果要想让某个角显示为圆角，则输入具体的圆角半径即可。通过四个圆角值的不同组合，可以设置出各种各样的形状，包括圆角矩形、椭圆形、圆形等等，如下图所示：