“新建样式”和“修改样式”对话框 ->“布局”
通过**“新建样式”对话框和“修改样式”对话框的“布局”**类别可为网页上 UI 元素的布局定义级联样式表 (CSS) 样式规则。 可以直接将这些样式规则应用于 HTML 元素，也可以将它们添加到当前页或外部样式表中。
为当前页上的 UI 元素定义 CSS 布局样式规则
在**“设计”视图或“源”**视图中打开该页。
还可以选择要将样式应用到的文本和/或 HTML 元素。
在**“格式”菜单中单击“新建样式”**。
将显示**“新建样式”**对话框。
在**“类别”窗格中选择“布局”**。
将在右窗格中显示布局样式选择。
当对**“设计”视图中选定的文本应用样式时，将以内联方式向页的 HTML 标记中插入样式特性。 切换到“源”**视图以检查新样式特性。
向外部样式表中定义的 CSS 样式规则中添加布局特性
打开现有的外部样式表。
将光标置于要修改的样式规则的大括号内。
执行下列操作之一。
右键单击编辑器的样式表，然后从快捷方式菜单中选择 生成样式。
在样式表工具栏上，选择 生成样式。
将显示**“修改样式”**对话框。
在左窗格中单击**“布局”**。
将在右窗格中显示布局样式选择。
通过将元素的 class 属性设置为类选择器的名称，可将 CSS 样式类应用于网页中的一个元素或 body 元素本身。
下面的表列出了**“新建样式”和“修改样式”对话框中的“布局”**类别下提供的选项。
布局选项
可见性
元素是可见的还是隐藏的。 值如下：collapse 在用于表格元素时，此值将隐藏行或列。 对于所有其他元素，此值也表示隐藏。
hidden 使元素不可见。
visible 使元素可见。
inherit 元素从父元素继承 visibility 属性。
显示
元素的显示方式。 值如下：block 元素将在块级别显示，前后都带有换行符。
inline 元素将以内联方式显示，前后没有换行符。
inline-box 元素将以内联方式显示为一个框，框前后没有换行符。
inline-table 元素将以内联方式显示为一个表格，表格前后没有换行符。
list-item 元素将显示为列表中的项。
none 元素将被隐藏。
run-in 元素将在块级别显示或以内联方式显示，具体取决于上下文。
table 元素将显示为一个块表格，表格前后都有换行符。
table-caption 元素将显示为表格标题。
table-cell 元素将显示为表格单元格。
table-column 元素将显示为表列。
table-column-group 元素将显示为一组表列。 此组可能包含一个或多个列。
table-footer-group 元素将显示为一组表格表尾。 此组可能包含一个或多个表尾。
table-header-group 元素将显示为一组表格表头。 此组可能包含一个或多个表头。
table-row 元素将显示为表行。
table-row-group 元素将显示为一组表行。 此组可能包含一个或多个行。
inherit 元素从父元素继承 display 属性。
float
元素将向左还是向右浮动，使文本环绕在其周围还是以内联方式显示。 此属性最常用于图像，但也适用于文本块。 值如下：left 元素在父元素内向左浮动。
none 元素在其在文本中所处的位置以内联方式显示。
right 元素在父元素内向右浮动。
inherit 元素从父元素继承 float 属性值。
clear
元素的哪侧禁止浮动元素。 值如下：both 元素在其左侧或右侧禁止浮动元素。
left 元素移动到在其左侧的浮动元素的下方。
none 元素在其各侧均允许浮动元素。
right 元素移动到在其右侧的浮动元素的下方。
inherit 元素从父元素继承 clear 属性。
光标
要显示的光标类型。 值如下：auto（默认值） 浏览器设置光标。
crosshair 光标呈现为十字线。
default 默认光标（通常是一个箭头）。
e-resize 用于向右（东）调整元素的光标。
help 指示帮助可用的光标（通常是个问号）。
move 指示对象可以移动的光标。
n-resize 用于向上（北）调整元素的光标。
ne-resize 用于向右上方（东北）调整元素的光标。
nw-resize 用于向左上方（西北）调整元素的光标。
pointer 光标呈现为指针（通常是手形）。
progress 指示程序正在取得进展的光标。
s-resize 用于向下（南）调整元素的光标。
se-resize 用于向右下方（东南）调整元素的光标。
sw-resize 用于向左下方（西南）调整元素的光标。
text 用于文本的光标。
w-resize 用于向左（西）调整元素的光标。
wait 指示程序繁忙的光标（通常是一个沙漏）。
inherit 元素从父元素继承 cursor 属性。
Overflow — 溢出
当元素的内容溢出其区域时发生的情况。 值如下：auto 仅在剪辑内容时才显示滚动条。
hidden 剪辑内容以适合元素，不显示滚动条。
scroll 剪辑内容以适合元素，显示滚动条。
visible（默认值） 即使内容在元素外也会显示内容。
inherit 元素从父元素继承 overflow 属性。
Clip — 剪辑
元素的矩形尺寸。 如果元素比定义的区域大，则将剪辑元素以适合区域。 若要指定尺寸，请使用**“top”、“right”、“bottom”和“left”**框。top
剪辑矩形的上边缘。 如果指定一个值，则可在列表中选择单位。right
剪辑矩形的右边缘。 如果指定一个值，则可在列表中选择单位。bottom
剪辑矩形的下边缘。 如果指定一个值，则可在列表中选择单位。left
剪辑矩形的左边缘。 如果指定一个值，则可在列表中选择单位。
其他 UI 元素
选择器
（仅限于**“新建样式”对话框）使您可以键入类名或单击 HTML 元素，以应用样式。 类名必须以句点 (.) 开头。 还可以选择“(级联样式)”**，从而以内联方式将样式应用于所选的文本或 HTML 元素。定义位置
（仅限于**“新建样式”**对话框）使您可以指定写入样式规则定义的位置。 值如下：当前网页 将样式规则写入当前页中的 style 元素。
新建样式表 将一个新的 CSS 样式表添加到项目中，并将规则写入该样式表。
现有样式表 将样式规则添加到您使用**“URL”**列表指定的 CSS 样式表中。
URL
（仅限于**“新建样式”对话框）使您可以选择现有的 CSS 样式表。 仅当“定义位置”设置为“现有样式表”**时，才启用此选项。将新样式应用于文档选择内容
（仅限于**“新建样式”**对话框）指定将样式应用于所选的文本、类或 HTML 元素。预览
显示样式规则在应用之后的显示情况的示例。说明
显示样式规则的 CSS 定义。