Positioning Elements in Design View

  • 项目

 

发布时间: 2016年4月

在 HTML 设计器中创建 HTML 页或 ASP.NET 网页时，元素的物理布局是从上至下。  默认情况下，当在浏览器中呈现页时，元素按照相同的从上至下顺序呈现。  这有时称为流布局。  

也可以按两维方式布局元素，方法是使用水平和垂直坐标在页中的任何位置定位元素。  此布局选项利用的是可通过样式使用的定位选项。  

在“设计”视图中，可以拖动元素以将其定位在页上某处，也可以选择元素然后对其应用定位选项。  在“设计”视图中，页将在您定位元素的位置显示元素。  可以通过元素的切换控点来拖动它以进行重新定位。  在“源”视图中，可以在各个元素的标记中设置定位选项。  

呈现页时，浏览器将使用您指定的定位信息显示元素。

流布局

如果元素没有任何定位样式属性，则它们将在页中从上至下、从左至右或从右至左排列，具体取决于页的 dir 特性的设置、元素的容器元素或浏览器的语言设置。  任何 Web 浏览器都可显示使用此布局的 HTML 文档。  如果调整页的大小，元素有时将被重新定位。  

如果对页使用流布局，则可以对齐 table 元素中的元素，或使用具有定位样式或文本对齐属性的 div 元素。  但是，元素不能重叠。  当调整页的大小时，元素可能会根据使用的是绝对单位还是表和单元格宽度的百分比而移动。  

二维定位

可以对单个元素应用定位选项，从而可将元素放置在页中的精确位置。

也可以为添加到页中的任何新元素指定定位选项。

Microsoft Visual Web Developer Web 开发工具允许您指定与 W3C 规范中为级联样式表定义的定位选项对应的定位选项。  定位选项在实现 W3C HTML 4.0 标准的任何浏览器（包括支持 XHTML 1.1 的浏览器）中都有效。  

提供了以下选项：

  • absolute

    元素呈现到页中由 left, right、top 和 bottom 样式属性的任意组合所定义的位置。  位置 0,0 是基于当前元素的父级定义的。  父级是具有定位信息的第一个容器元素。  例如，如果当前元素在具有定位信息的 div 元素内，则将基于 div 元素的位置来计算绝对定位信息。  如果当前元素没有带定位信息的容器元素，则将基于 body 元素计算定位信息。  

  • relative

    元素呈现到页中由 left 和 top 样式属性所定义的位置。  此选项与 absolute 的区别在于，0,0 位置是根据元素在页面流中的位置来定义的。  具有相对定位并且 top 和 left 都设置为 0 的元素将在流中正常显示。  

    备注

    使用绝对或相对定位的元素在页中可能会不按照页标记声明中的顺序显示，这可能会引起混乱。  例如，在“源”视图中，可能将某个按钮定义为标记中的第一个元素，但设置它的定位后，该按钮可能在呈现的页或“设计”视图中显示为最后一个元素。  

  • static

    元素使用流布局呈现；即元素不使用两维定位。  如果要对重写设置（该设置继承自主题或样式表）的单个控件设置定位选项，则可选择此选项。  

Visual Web Developer 也影响定位选项 Not Set，该选项允许您从将来可能要添加的单个控件或多个控件中移除任何现有的定位信息。

定位静态文本或元素组

若要将浮动静态文本或元素组创建为一个单元，可以向页中添加一个层。  层是包含定位信息的 div 元素，使用层可以在页中拖动元素。  然后可以键入文本或将元素拖动到 div 元素中。  Visual Web Developer 在**“格式”**菜单上包括用于添加层的命令，也可以自己创建 div 元素，并手动为其添加定位信息。  

对照网格约束位置

如果您使用的是绝对或相对定位，并且使用像素作为定位的基础（即 left 和 top 属性的单位是像素），则可以设置选项以将元素与不可见的网格对齐。  这有助于对齐页上的元素。  有关详细信息，请参见 “选项”对话框 ->“HTML 设计器”->“标尺和网格”。  

分层元素

如果使用的是绝对或相对定位，则可以重叠元素，然后这些元素将在浏览器中重叠呈现。  如果使用表定位元素，则不能重叠对象。  

具有绝对或相对定位的元素可以包括 z-index 属性，该属性指定第三维中的元素顺序为从后至前。  如果两个元素共享相同的空间，则 z-index 特性值较高的元素显示在前面。  如果在“设计”视图中使用命令来设置定位，则将自动设置 z-index 属性，开始时最后面的元素的该属性值为 100。  如果在“源”视图中添加定位属性，则必须手动添加 z-index 属性。  

请参阅

NIB: How to: Position Elements in Design View
“选项”对话框 ->“HTML 设计器”->“标尺和网格”
“选项”对话框 ->“文本编辑器”->“HTML”->“验证”