网页元素常见的定位方式

1. 流式定位

这是网页元素默认的定位方式，网页元素按照其HTML标签的先后顺序，在网页内依次显示，就像液体一样“流动”，所以称为“流式定位”，这种方式将所有网页元素的默认显示方式分为以下几种类型：

块级元素（display: block）： 可以设置宽度，默认宽度为100%，但不管多宽都会独占一行，多个块级元素按从上到下的顺序纵向显示，默认显示为块级元素的包括：段落(p)、层(div)、表单(form)等。

内联元素（display: inline）： 不会独占一行，可以多个元素共享一行，按从左至右的顺序横向显示，默认显示为内联元素的包括：文本标签(label)、链接(a)等。

行内块元素（display: inline-block）： 这种定位方式兼具块级元素和内联元素的优势，既可以像块级元素一样设置宽度和高度，又可以一行放置多个，默认显示为内联元素的包括：图片(img)、输入项(input)、多行文本(textarea)等。

可以通过设置HTML元素的CSS样式的display属性来改变元素默认的流式定位方式，例如将层(div)元素设置为行内块元素后，就可以跟文本标签(label)、图片(img)等元素放在同一行显示，不再独占一行。

流式定位存在一些问题，主要包括：

l 块级元素很难被有效利用起来，因为其独占一行的特性，不能一行显示多个。

l 内联元素无法设置宽度、高度和垂直方向边距，不好精确控制元素大小和显示位置。

l 内联元素之间水平方向会因为代码中的空格、换行等产生间隙，垂直方向存在默认的底部间隙，这给水平布局带来额外的麻烦。

2. 浮动定位

浮动定位会让元素脱离原来的标准文档流浮动起来，直至它的外边缘遇到父元素的内边缘或者另一个兄弟浮动元素的外边缘。

任何HTML元素都可以设置为浮动，可以通过设置HTML元素的CSS样式的float属性来设置具体的浮动方式，可以选择向左浮动（float: left）或向右浮动（float: right）。

相对于网页默认的流式定位，浮动定位有以下优势：

l 多个块级元素可以共享一行。

l 内联元素可以设置宽度和高度。

l 元素之间的空格、换行不影响元素的显示位置。

浮动定位最初被设计出来是为了实现文字环绕图片显示的效果，但由于其上述优势，后来大家也用浮动定位来设置更多网页元素的位置，代替默认的流式定位，也是TaskBuilder默认的组件定位方式。

不过，浮动定位也有一些问题，不是所有的场合都适合，大家根据需要选择，这些问题包括：

l 居中对齐问题：浮动定位不太好实现垂直和水平居中对齐。

l 父元素的高度塌陷问题：如果元素不浮动，会自动撑开父元素的高度，浮动后，由于浮动元素已经脱离原来的标准流，如果父元素没有设置高度，且父元素中没有其他非浮动元素时，会造成父元素的高度塌陷（高度变成了0）。

3. 坐标定位

坐标定位是指为HTML元素设置上下左右的偏移量来确定其具体的显示位置或大小，通过设置元素CSS的position属性，可以选择坐标定位的具体方式，包括：