Dreamweaver CC教程：CSS布局块

Dreamweaver CC教程：CSS布局块

CSS 布局块
在“设计”视图中工作时，可以使 CSS 布局块可视化。CSS 布局块是一个 HTML 页面元素，您可以将它定位在页面上的任意位置。更具体地说，CSS 布局块是不带 display:inline 的 div 标签，或者是包括 display:block、position:absolute 或 position:relative CSS 声明的任何其他页面元素。下面是几个在 Dreamweaver 中被视为 CSS 布局块的元素的示例：

div 标签 指定了绝对或相对位置的图像 指定了 display:block 样式的 a 标签 指定了绝对或相对位置的段落

注意:
出于可视化呈现的目的，CSS 布局块不包含内联元素（即代码位于一行文本中的元素）或段落等简单块元素。
Dreamweaver 提供了多个可视化助理，以供查看 CSS 布局块。例如，在设计时可以为 CSS 布局块启用外框、背景和框模型。将鼠标指针移动到布局块上时，也可以查看显示有选定 CSS 布局块属性的工具提示。
下面的 CSS 布局块可视化助理列表描述 Dreamweaver 为每个助理呈现的可视化内容：
CSS 布局外框
显示页面上所有 CSS 布局块的外框。
CSS 布局背景
显示各个 CSS 布局块的临时指定背景颜色，并隐藏通常会出现在页面上的任何其他背景颜色或图像。
每次启用可视化助理查看 CSS 布局块背景时，Dreamweaver 都会自动为每个 CSS 布局块分配一种不同的背景颜色。（Dreamweaver 使用一个算法过程选择颜色 — 您无法自行指定颜色。）指定的颜色在视觉上与众不同，可帮助您区分不同的 CSS 布局块。
CSS 布局框模型
显示所选 CSS 布局块的框模型（即填充和边距）。

查看 CSS 布局块

如果需要，可以启用或禁用 CSS 布局块可视化助理。要查看所有 CSS 布局块，请选择“查看”>“设计视图选项”>“可视化助理”。
您可以启用或禁用 CSS 布局背景、CSS 布局框模型和 CSS 布局外框。