36、CSS 属性全解析：布局、样式与分页的实用指南

最新推荐文章于 2025-12-03 16:01:20 发布

c6d7e8f9g

最新推荐文章于 2025-12-03 16:01:20 发布

阅读量28

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS艺术：从理论到实践文章标签： CSS 布局样式

本文链接：https://blog.youkuaiyun.com/c6d7e8f9g/article/details/153253922

CSS艺术：从理论到实践专栏收录该内容

38 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

CSS 属性全解析：布局、样式与分页的实用指南

1. 基础属性及值

在网页设计中，有许多重要的 CSS 属性可用于控制元素的布局和样式。以下是一些常见属性及其值的详细介绍：

1.1 测量单位属性

当使用 n [ n n n] measurement_units 这种形式时，不同数量的值会有不同的效果：
- 若只有 1 个值，所有边框都设置为该数值。
- 若有 2 个值，上下和左右边框分别取这两个数值。
- 若有 3 个值，上、右左、下边框分别取这三个数值。
- 若有 4 个值，上、右、下、左边框分别取这四个数值。
- INHERIT ：如果允许，会采用父元素该属性设置的值。

示例代码：

<P STYLE="MARGIN: 1 in">This text has a margin set to one inch.</P>

1.2 边距属性

边距属性用于设置元素与浏览器窗口边缘或相邻元素之间的距离，包括 MARGIN-TOP 、 MARGIN-RIGHT 、 MARGIN-BOTTOM 和 MARGIN-LEFT 。这些属性的取值及含义如下表所示：
| 属性 | 描述 | 取值 |
| ---- | ---- | ---- |
| MARGIN-TOP | 指定元素与浏览器窗口顶部边缘或上方元素的距离 | AUTO （使用浏览器默认值）、 % （元素宽度的百分比值）、 length (units) （以测量单位指定的长度值）、 INHERIT （继承父元素属性值） |
| MARGIN-RIGHT | 指定元素与浏览器窗口右侧边缘或右侧相邻元素的距离 | 同 MARGIN-TOP |
| MARGIN-BOTTOM | 指定元素与浏览器窗口底部边缘或下方元素的距离 | 同 MARGIN-TOP |
| MARGIN-LEFT | 指定元素与浏览器窗口左侧边缘或左侧相邻元素的距离 | 同 MARGIN-TOP |

示例代码：

<H1 STYLE="MARGIN-TOP: 50MM">Header positioned 50 millimeters from the top margin.</H1>
<IMG SRC="augustus.jpg" STYLE="MARGIN-RIGHT: 0.5CM">This text is set half a centimeter from the image.
<P STYLE="MARGIN-BOTTOM: 2IN">This text is indented 2 inches from the element below it.</P>
<P STYLE="MARGIN-LEFT: 3IN">This paragraph is indented 3 inches from the left margin.</P>

1.3 标记偏移属性（MARKER-OFFSET）

该属性用于设置标记框边框与关联的主框之间的距离。其取值如下：
- n value ：设置长度单位值。
- AUTO ：默认长度值。
- INHERIT ：继承父元素属性值。

示例代码：

<HTML>
<HEAD>
<TITLE>Marker-Offset</TITLE>
<STYLE>
P {MARGIN-LEFT: 10EM} /* Make space for counters */
LI:BEFORE {DISPLAY: MARKER; MARKER-OFFSET: 5EM;
CONTENT: counter(mycounter, UPPER-ALPHA) ".";
COUNTER-INCREMENT: mycounter;}
</STYLE>
</HEAD>
<BODY>
<P>
<OL>
<LI> Here is the first item.
<LI> Here is the second item.
<LI> Here is the third item.
</OL>
<P>
</BODY>
</HTML>

1.4 页面标记属性（MARKS）

此属性用于设置页面框要显示的标记类型，可用于添加裁剪标记或十字标记来定义页面范围。取值如下：
- CROP ：为页面添加裁剪标记，用于确定页面的裁剪位置。
- CROSS ：为页面添加十字标记，用于对齐纸张。
- NONE ：不显示任何标记。
- INHERIT ：继承父元素属性值。

示例代码：

<STYLE>
@page {SIZE: 8.5IN 11IN; MARKS: CROP;}
</STYLE>

2. 元素尺寸属性

元素尺寸属性用于控制块级元素的最大和最小宽度与高度，包括 MAX-HEIGHT 、 MAX-WIDTH 、 MIN-HEIGHT 和 MIN-WIDTH 。以下是这些属性的详细介绍：

2.1 最大高度属性（MAX-HEIGHT）

该属性用于设置块级元素的最大高度。取值如下：
- n value ：设置长度单位值。
- % value ：相对于包含块高度的长度百分比值。
- NONE ：默认值，不设置元素高度的最大值。
- INHERIT ：继承父元素属性值。

示例代码：

<H1 STYLE="MAX-HEIGHT: 1CM;">This Header Must Be No Bigger than 1CM</H1>

2.2 最大宽度属性（MAX-WIDTH）

用于设置块级元素的最大宽度。取值与 MAX-HEIGHT 类似：
- n value ：设置长度单位值。
- % value ：相对于包含块宽度的长度百分比值。
- NONE ：默认值，不设置元素宽度的最大值。
- INHERIT ：继承父元素属性值。

示例代码：

<H1 STYLE="MAX-WIDTH: 5CM;">This Header Must Be No Wider than 5CM</H1>

2.3 最小高度属性（MIN-HEIGHT）

设置块级元素的最小高度。取值如下：
- n value ：设置长度单位值。
- % value ：相对于包含块高度的长度百分比值。
- INHERIT ：继承父元素属性值。

示例代码：

<H1 STYLE="MIN-HEIGHT: 5CM;">This Header Must Be At Least 5CM in Height</H1>

2.4 最小宽度属性（MIN-WIDTH）

设置块级元素的最小宽度。取值与 MIN-HEIGHT 类似：
- n value ：设置长度单位值。
- % value ：相对于包含块宽度的长度百分比值。
- INHERIT ：继承父元素属性值。

示例代码：

<H1 STYLE="MIN-WIDTH: 2CM;">This Header Must Be No Smaller than 2CM in Width</H1>

3. 分页相关属性

分页相关属性主要用于控制页面的分页效果，包括 ORPHANS 、 PAGE 、 PAGE-BREAK-AFTER 、 PAGE-BREAK-BEFORE 和 PAGE-BREAK-INSIDE 。

3.1 孤行控制属性（ORPHANS）

该属性用于设置段落必须留在页面底部的最小行数。取值如下：
- n ：一个整数值，指定段落中必须显示的行数，否则该段落将被强制显示在下一页。默认值为 2。
- INHERIT ：继承父元素属性值

示例代码：

<STYLE>
@PAGE {ORPHANS: 3;}
</STYLE>

3.2 页面类型属性（PAGE）

用于将特定的页面类型与特定的 Web 元素关联起来。取值如下：
- name ：与元素关联的标识符。
- AUTO ：遵循元素的自动格式化，这是默认值。

示例代码：

<HTML>
<HEAD>
<TITLE>Page</TITLE>
<STYLE>
@page regular {SIZE 8.5IN 11IN; MARGIN: 1.5IN;}
@page landscape {SIZE: LANDSCAPE;}
DIV {PAGE: regular;}
TABLE {PAGE: landscape;}
</STYLE>
</HEAD>
<BODY>
<DIV>
The idea behind the PAGE property is to create a page break <I>and</I> enable the Web author to format the content of the subsequent page in a different manner than that which went before it.
</DIV>
<TABLE>
<TR>
<TD>The content in this table will be set in a new page, and will appear in a landscape format.</TD>
</TR>
</TABLE>
</BODY>
</HTML>

3.3 分页属性

分页属性包括 PAGE-BREAK-AFTER 、 PAGE-BREAK-BEFORE 和 PAGE-BREAK-INSIDE ，用于控制页面在元素前后或内部的分页情况。具体取值及含义如下表所示：
| 属性 | 描述 | 取值 |
| ---- | ---- | ---- |
| PAGE-BREAK-AFTER | 告诉浏览器在选定的块级元素之后插入分页符 | AUTO （既不强制也不禁止分页）、 ALWAYS （总是强制在块级元素后分页）、 AVOID （避免在块级元素后分页）、 LEFT （强制在块级元素后进行一次或多次分页，使其显示在左页）、 RIGHT （强制在块级元素后进行一次或多次分页，使其显示在右页）、 INHERIT （继承父元素属性值） |
| PAGE-BREAK-BEFORE | 告诉浏览器在选定的块级元素之前插入分页符 | 同 PAGE-BREAK-AFTER |
| PAGE-BREAK-INSIDE | 告诉浏览器在选定的块级元素内部插入分页符 | AUTO （既不强制也不禁止分页）、 AVOID （避免在块级元素内部分页）、 INHERIT （继承父元素属性值） |

示例代码：

<HTML>
<HEAD>
<TITLE>Page-Break-After</TITLE>
<STYLE>
P {PAGE-BREAK-AFTER: ALWAYS;}
</STYLE>
</HEAD>
<BODY>
<P>
Each subsequent paragraph will be forced onto a new page.
</P>
<P>
See, this is on a second page.
</P>
<P>
This is on yet another page.
</P>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Page-Break-Before</TITLE>
<STYLE>
H1 {PAGE-BREAK-BEFORE: ALWAYS;}
</STYLE>
</HEAD>
<BODY>
Here is some text.
<H1>This header will appear on a new page</H1>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE>Page-Break-Inside</TITLE>
<STYLE>
BLOCKQUOTE {PAGE-BREAK-INSIDE: AVOID;}
</STYLE>
</HEAD>
<BODY>
<BLOCKQUOTE>No matter how long this quote may be, the PAGE-BREAK-INSIDE property will ensure that a page break does not occur inside of it, breaking it across more than one page.
</BLOCKQUOTE>
</BODY>
</HTML>

4. 其他属性

除了上述属性外，还有一些其他重要的属性，如 OUTLINE 、 OVERFLOW 和 PADDING 。

4.1 轮廓属性（OUTLINE）

这是一个快捷属性，用于设置按钮或表单字段等元素获得焦点时的边框值。取值如下：
- n [ n n n] measurement_units ：设置边框厚度，规则与前面提到的测量单位属性相同。
- THIN | MEDIUM | THICK ：设置边框的相对厚度。
- color name or numerical color value ：设置边框颜色。
- INVERT ：反转用户界面元素背后背景当前使用的颜色。
- HIDDEN ：与 NONE 效果相同，用于在表格中抑制边框显示。
- DASHED ：显示虚线边框。
- DOTTED ：显示点状边框。
- DOUBLE ：显示双线条边框。
- INSET ：显示 3D 内凹线条。
- GROOVE ：显示 3D 凹槽线条。
- NONE ：不显示边框，无论 BORDER-WIDTH 值是多少。
- OUTSET ：显示 3D 外凸线条。
- RIDGE ：显示 3D 脊状线条。
- SOLID ：显示实线边框。
- INHERIT ：继承父元素属性值。

示例代码：

<STYLE>
BUTTONSTYLE {OUTLINE: THICK RED GROOVE;}
</STYLE>

4.2 溢出属性（OVERFLOW）

该属性用于确定当内容占用的空间超过分配的空间时，用户如何访问原本隐藏的内容。取值如下：
- VISIBLE ：内容不被裁剪，直接显示。
- HIDDEN ：内容被裁剪，不显示滚动条以查看剩余内容。
- SCROLL ：内容被裁剪，但提供滚动条或等效机制让用户滚动查看内容。
- AUTO ：如果需要，会自动提供滚动机制。
- INHERIT ：继承父元素属性值。

示例代码：

<BLOCKQUOTE STYLE="WIDTH: 1.5IN; HEIGHT: 1IN; OVERFLOW: AUTO">
If this quote runs too long, a scrollbar will appear so that the viewer can continue to read the somewhat lengthy and definitely meandering quotation.
</BLOCKQUOTE>
<P STYLE="WIDTH: 1.5IN; HEIGHT: 1IN; OVERFLOW: AUTO">
<IMG SRC="vanessa.jpg">
</P>
<P STYLE="WIDTH: 1.5IN; HEIGHT: 1IN; OVERFLOW: HIDDEN">
<IMG SRC="vanessa.jpg">
</P>

4.3 内边距属性（PADDING）

这是一个缩写元素，允许网页作者快速设置 PADDING-TOP 、 PADDING-RIGHT 、 PADDING-LEFT 或 PADDING-BOTTOM 等边距值。取值如下：
- AUTO ：使用浏览器默认值。
- % ：元素宽度的百分比值。
- n [ n n n] measurement_units ：设置内边距，规则与测量单位属性相同。
- INHERIT ：继承父元素属性值。

示例代码：

<IMG SRC="hadrian.jpg" STYLE="PADDING: 2CM">

内边距的各个方向属性（ PADDING-TOP 、 PADDING-RIGHT 、 PADDING-BOTTOM 、 PADDING-LEFT ）取值类似，通常为 % （元素宽度的百分比值）、 length (units) （以测量单位指定的长度值）和 INHERIT （继承父元素属性值）。

示例代码：

<I STYLE="PADDING-TOP: 5CM">This text is padded from the top by 5 centimeters.</I>
<P STYLE="PADDING-RIGHT: 400PX">This text has a PADDING-RIGHT value of 400 pixels. Here is some more text to make the effect more apparent.</P>
<P STYLE="PADDING-BOTTOM: 2CM">This paragraph is padded from the bottom by 2 centimeters.</P>
<P STYLE="PADDING-LEFT: 25MM">This is padded from the left by 25 millimeters.</P>

通过合理运用这些 CSS 属性，网页开发者可以实现丰富多样的布局和样式效果，提升用户体验。希望本文对你理解和使用这些属性有所帮助。

以上这些 CSS 属性在网页设计中起着至关重要的作用，它们可以帮助开发者精确控制元素的布局、样式和分页效果，从而创建出更加美观、易用的网页。在实际应用中，需要根据具体的设计需求灵活选择和组合这些属性。

CSS 属性全解析：布局、样式与分页的实用指南

5. 语音暂停属性（PAUSE）

该属性是一个快捷属性，用于设置语音中的停顿值，设置的值会应用于元素的开头和结尾。其取值如下：
- n [n] ：以毫秒或秒为单位表示的语音停顿时间值。
- % ：相对于 SPEECH - RATE 属性设置的文本朗读“速度”的百分比值。
- INHERIT ：继承父元素属性值。

示例代码：

<P>The title of this play is:</P>
<H1 STYLE="PAUSE: 1S;">The Tempest</H1>
<P>by William Shakespeare</P>

6. CSS 属性的综合运用与流程分析

在实际的网页开发中，我们常常需要综合运用多种 CSS 属性来实现特定的布局和样式效果。下面通过一个简单的示例来展示如何综合运用前面提到的属性。

假设我们要创建一个包含标题、段落和图片的网页，并且要对其进行合理的布局和样式设置。以下是详细的实现步骤：

HTML 结构搭建
首先，创建基本的 HTML 结构，包含标题、段落和图片元素。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 属性综合运用示例</title>
    <style>
        /* 在这里添加 CSS 样式 */
    </style>
</head>

<body>
    <h1>示例标题</h1>
    <p>这是一段示例段落，用于展示 CSS 属性的综合运用。</p>
    <img src="example.jpg" alt="示例图片">
</body>

</html>

添加边距和内边距样式
为标题、段落和图片添加边距和内边距，使其在页面中布局更加合理。

h1 {
    margin-top: 50px;
    padding: 20px;
    background-color: #f0f0f0;
}

p {
    margin: 20px;
    padding: 15px;
    border: 1px solid #ccc;
}

img {
    margin: 30px auto;
    display: block;
    padding: 10px;
    border: 2px solid #ddd;
    max-width: 80%;
}

控制分页效果
如果需要对页面进行分页控制，可以使用分页相关属性。例如，确保段落不被分页打断。

p {
    page-break-inside: avoid;
}

设置轮廓样式
为标题添加轮廓样式，当标题获得焦点时会有明显的视觉效果。

h1 {
    outline: 3px solid blue;
    outline-offset: 5px;
}

处理溢出内容
如果图片或段落内容可能会溢出容器，可以使用溢出属性进行处理。

p {
    max-height: 200px;
    overflow: auto;
}

通过以上步骤，我们可以看到如何将不同的 CSS 属性组合在一起，实现一个具有良好布局和样式的网页。

7. CSS 属性的流程图分析

下面是一个简单的 mermaid 流程图，展示了在设置 CSS 属性时的一般流程：

graph TD;
    A[确定布局和样式需求] --> B[选择合适的属性类别];
    B --> C{是否为边距属性};
    C -- 是 --> D[设置边距值];
    C -- 否 --> E{是否为尺寸属性};
    E -- 是 --> F[设置尺寸值];
    E -- 否 --> G{是否为分页属性};
    G -- 是 --> H[设置分页规则];
    G -- 否 --> I{是否为轮廓或溢出属性};
    I -- 是 --> J[设置轮廓或溢出效果];
    I -- 否 --> K[考虑其他属性如内边距、语音暂停等];
    D --> L[检查和调整效果];
    F --> L;
    H --> L;
    J --> L;
    K --> L;
    L --> M[完成设置];

8. 总结与注意事项

通过对上述各种 CSS 属性的学习，我们可以发现 CSS 在网页设计中具有强大的功能。在使用这些属性时，需要注意以下几点：
- 属性兼容性 ：不同的浏览器对某些 CSS 属性的支持可能存在差异，在使用时需要进行兼容性测试，确保在各种浏览器中都能正常显示。
- 值的合法性 ：每个属性都有其合法的值范围，例如长度单位必须是有效的数值和单位组合，颜色值必须是合法的颜色名称或数值。
- 综合运用 ：要根据实际需求综合运用多种属性，避免过度使用单一属性导致布局和样式不协调。

在实际开发中，不断实践和尝试不同的属性组合，才能更好地掌握 CSS 的使用技巧，创建出更加美观、实用的网页。

总之，CSS 属性为网页开发者提供了丰富的工具来实现各种创意和设计需求。通过合理运用这些属性，我们可以打造出令人满意的网页界面。希望本文能帮助你更好地理解和运用 CSS 属性，提升你的网页开发技能。