三、Bootstrap之HTML元素通用样式

1、文本相关示例

在 Bootstrap 中，文本相关样式类用于控制文本的颜色、大小、对齐等样式，让开发者能够快速、简单地定制文本样式，使页面内容更具吸引力和可读性。

（1）文本对齐示例

有如下三类：

类名称	作用
.text-center	将文本居中对齐；
.text-left 和 .text-right	分别用于将文本左对齐和右对齐。
.text-justify	将文本两端对齐。

示例：

<h3 class="mb-3">文本对齐</h3>
<div class="text-left border">左对齐</div>
<div class="text-center border">居中对齐</div>
<div class="text-right border">右对齐</div>

运行截图：

（2）响应式对齐示例

在 Bootstrap 中，响应式对齐文本相关样式类可以根据不同设备的屏幕尺寸，灵活控制文本的对齐方式，使页面在各种设备上都能够呈现出最佳的布局效果。以下是一些常用的响应式对齐文本相关样式类的定义详细解释及相关使用案例：
常用的响应式对齐文本相关样式类

.text-left、.text-center、.text-right：这些类是在所有屏幕尺寸下都生效的对齐方式，分别用于设置文本的左对齐、居中对齐和右对齐。

.text-sm-left、.text-sm-center、.text-sm-right：这些类是在小屏幕（576px及以下）时生效的对齐方式。

.text-md-left、.text-md-center、.text-md-right：这些类是在中等屏幕（≥576px）时生效的对齐方式。

.text-lg-left、.text-lg-center、.text-lg-right：这些类是在大屏幕（≥768px）时生效的对齐方式。

.text-xl-left、.text-xl-center、.text-xl-right：这些类是在超大屏幕（≥992px）时生效的对齐方式。

.text-xxl-left、.text-xxl-center、.text-xxl-right：这些类是在超大屏幕（≥1200px）时生效的对齐方式。

相关使用案例
下面是一个示例，展示了如何应用响应式对齐文本相关样式类来根据不同屏幕尺寸调整文本对齐方式：

<h3 class="mb-3">响应式对齐</h3>
<div class="text-sm-center text-md-right border">文本内容</div>

运行截图：

（3）文本换行示例

在 Bootstrap 中，文本换行效果相关样式类用于控制文本在超出容器宽度时的换行方式，帮助开发者处理长文本内容的展示和排版。以下是一些常用的文本换行效果相关样式类的定义详细解释及相关使用案例：

常用的文本换行效果相关样式类

.text-nowrap：禁止文本换行，文本会在一行内水平滚动显示。
.text-wrap：允许文本换行，根据容器宽度自动换行显示。

相关使用案例
以下是一个示例，展示了如何应用文本换行效果相关样式类来处理文本内容的换行方式：

<!-- 禁止文本换行 -->
<p class="text-nowrap">
    这是一段很长的文本内容，将不会换行，而是在一行内水平滚动显示。
</p>
<!-- 允许文本换行 -->
<p class="text-wrap">
    这是一段很长的文本内容，将根据容器宽度自动换行显示。
</p>

将上面的样例应用到实际

<h3 class="mb-4">文本换行效果</h3>
<div class="border-primary border mb-5" style="width: 15rem">
    独出前门望野田，月明荞麦花如雪。--白居易《村夜》
</div>
<h4>阻止文本换行：</h4>
<div class="text-nowrap border border-primary" style="width: 15rem">
    独出前门望野田，月明荞麦花如雪。--白居易《村夜》
</div>

运行截图：

（4）省略文本溢出示例

.text-truncate：如果文本过长，将超出部分用省略号（...）代替。

<!-- 文本超出部分用省略号代替 -->
<p class="text-truncate">
    这是一段很长的文本内容，如果超出部分将用省略号代替。
</p>

<h3 class="mb-4">.text-truncate的效果</h3>
<div class="border-primary border mb-5 text-truncate" style="width: 15rem">
    独出前门望野田，月明荞麦花如雪。--白居易《村夜》
</div>

运行截图：

2、字体相关示例

在 Bootstrap 中，字体相关样式类用于控制文本的字体大小、粗细、样式等属性，帮助开发者定制页面中文字的外观效果。以下是一些常用的字体相关样式类的定义详细解释及相关使用案例：

（1）字母转换大小写示例

类名称	功能
.text-uppercase	将文本转换为大写字母显示。
.text-lowercase	将文本转换为小写字母显示。
.text-capitalize	将文本转换为首字母大写显示。

相关案例

<h3 class="mb-4">字母转换大小写</h3>
<p class="text-uppercase">转换成大写:hello world!</p>
<p class="text-lowercase">转换成小写:HELLO WORLD!</p>
<p class="text-capitalize">转换成首字母大写:hello world!</p>

运行截图：

（2）粗、细和斜体示例

类名称	功能
.font-weight-bold	将文本设置为加粗字体。
.font-weight-normal	将文本设置为普通（非加粗）字体。
.font-italic	将文本设置为斜体字体。

相关案例：

<h3 class="mb-4">字体的粗细和斜体效果</h3>
<p class="font-weight-light">独出前门望野田，月明荞麦花如雪。--白居易《村夜》（font-weight-light）</p>
<p class="font-weight-lighter">独出前门望野田，月明荞麦花如雪。--白居易《村夜》（font-weight-lighter）</p>
<p class="font-weight-normal">独出前门望野田，月明荞麦花如雪。--白居易《村夜》（font-weight-normal）</p>
<p class="font-weight-bold">独出前门望野田，月明荞麦花如雪。--白居易《村夜》（font-weight-bold）</p>
<p class="font-weight-bolder">独出前门望野田，月明荞麦花如雪。--白居易《村夜》（font-weight-bolder）</p>
<p class="font-italic">独出前门望野田，月明荞麦花如雪。--白居易《村夜》（font-italic）</p>

运行截图：

（3）其他样式类示例

相关案例：

<h3 class="mb-4">复位颜色，添加字体类和删除修饰</h3>
<div class="text-muted">
    <p><a href="#" class="text-reset">独出前门望野田，月明荞麦花如雪。--白居易《村夜》</a></p>
    <p class="text-monospace">独出前门望野田，月明荞麦花如雪。--白居易《村夜》</p>
    <p><a href="#" class="text-decoration-none">独出前门望野田，月明荞麦花如雪。--白居易《村夜》</a></p>
</div>

运行截图：

（4）图标示例

在 Bootstrap 中，图标示例相关样式类用于添加各种图标或图标库到页面中，以增强页面的视觉效果和用户体验。Bootstrap 并没有内置图标库，但可以很容易地集成常用的图标库，如 Font Awesome 或 Bootstrap Icons。以下是一些常用的图标示例相关样式类的定义详细解释及相关使用案例。
常用的图标示例相关样式类

使用 Font Awesome 图标库：
    <i class="fas fa-heart"></i>：添加一个心形图标。
    <i class="far fa-envelope"></i>：添加一个空心的信封图标。
    <i class="fab fa-twitter"></i>：添加一个 Twitter 图标（使用品牌图标）。

使用 Bootstrap Icons：
    <svg class="bi" width="32" height="32" fill="currentColor"><use xlink:href="#heart-fill"></use></svg>：添加一个填充色的心形图标。
    <svg class="bi" width="32" height="32" fill="currentColor"><use xlink:href="#envelope"></use></svg>：添加一个信封图标。

相关使用案例

下面是一个示例，展示了如何在 Bootstrap 中使用 Font Awesome 图标和 Bootstrap Icons 来添加图标示例到页面中：

<!-- 使用 Font Awesome 图标 -->
<i class="fas fa-heart"></i>
<i class="far fa-envelope"></i>
<i class="fab fa-twitter"></i>

<!-- 使用 Bootstrap Icons -->
<svg class="bi" width="32" height="32" fill="currentColor"><use xlink:href="#heart-fill"></use></svg>
<svg class="bi" width="32" height="32" fill="currentColor"><use xlink:href="#envelope"></use></svg>

运行截图：

在这个案例中，分别用 Font Awesome 图标库和 Bootstrap Icons 添加了一些图标示例。通过集成常用的图标库，可以方便地在页面中引入各种图标，丰富页面内容，增强用户体验。合理使用图标示例相关样式类，可以为页面添加更多元素，提升页面的整体美感和功能性。

3、颜色示例

（1）文本颜色示例

直接上代码：

<h3 class="mb-4">文本颜色</h3>
<p class="text-primary">.text-primary--蓝色</p>
<p class="text-secondary">.text-secondary--灰色</p>
<p class="text-success">.text-success--浅绿色</p>
<p class="text-danger">.text-danger--浅红色</p>
<p class="text-warning">.text-warning--浅黄色</p>
<p class="text-info">.text-info--浅蓝色</p>
<p class="text-light bg-dark">.text-light--浅灰色（白色背景上看不清楚）</p>
<p class="text-dark">.text-dark--深灰色</p>
<p class="text-muted">.text-muted--灰色</p>
<p class="text-white bg-dark">.text-white--白色(白色背景上看不清楚)</p>

运行截图：

（2）链接文本颜色示例

直接上代码：

<h3 class="mb-4">链接的文本颜色</h3>
<p><a href="#" class="text-primary">.text-primary--蓝色链接</a></p>
<p><a href="#" class="text-secondary">.text-secondary--灰色链接</a></p>
<p><a href="#" class="text-success">.text-success--浅绿色链接</a></p>
<p><a href="#" class="text-danger">.text-danger--浅红色链接</a></p>
<p><a href="#" class="text-warning">.text-warning--浅黄色链接</a></p>
<p><a href="#" class="text-info">.text-info--浅蓝色链接</a></p>
<p><a href="#" class="text-light bg-dark">.text-light--浅灰色链接（添加了深灰色背景）</a></p>
<p><a href="#" class="text-dark">.text-dark--深灰色链接</a></p>
<p><a href="#" class="text-muted">.text-muted--灰色链接</a></p>
<p><a href="#" class="text-white bg-dark">.text-white--白色链接(添加了深灰色背景)</a></p>

运行截图：

（3）背景颜色示例

直接上代码：

<h3 class="mb-4">背景颜色</h3>
<p class="bg-primary text-white">.bg-primary 蓝色背景</p>
<p class="bg-secondary text-white">.bg-secondary 灰色背景</p>
<p class="bg-success text-white">.bg-success 浅绿色背景</p>
<p class="bg-danger text-white">.bg-danger 浅红色背景</p>
<p class="bg-warning text-white">.bg-warning 浅黄色背景</p>
<p class="bg-info text-white">.bg-info 浅蓝色背景</p>
<p class="bg-light">.bg-light 浅灰色背景</p>
<p class="bg-dark text-white">.bg-dark 深灰色背景</p>
<p class="bg-white">.bg-white 白色背景</p>

运行截图：

（4）边框颜色示例

直接上代码：

<h3 class="mb-4">边框颜色</h3>
<div class="border border-primary">border-primary</div>
<div class="border border-secondary">border-secondary</div>
<div class="border border-success">border-success</div>
<div class="border border-danger">border-danger</div>
<div class="border border-warning">border-warning</div>
<div class="border border-info">border-info</div>
<div class="border border-light">border-light</div>
<div class="border border-dark">border-dark</div>
<div class="border border-white">border-white</div>

运行截图：

（5）设置阴影示例

常用的阴影示例相关样式类

.shadow-sm：添加一个小号的阴影效果。

.shadow：添加一个默认大小的阴影效果。

.shadow-lg：添加一个大号的阴影效果。

.shadow-none：移除元素的阴影效果。

<h3 class="mb-4">阴影效果</h3>
<div class="shadow-sm p-3 mb-5">小的阴影</div>
<div class="shadow p-3 mb-5">正常的阴影</div>
<div class="shadow-lg p-3 mb-5">大的阴影</div>

运行截图：

4、边框相关示例

（1）添加边框

直接上代码：

<h3 class="mb-4">添加边框</h3>
<div class="border border-primary bg-light">border</div>
<div class="border-top border-primary bg-light">border-top</div>
<div class="border-right border-primary bg-light">border-right</div>
<div class="border-bottom border-primary bg-light">border-bottom</div>
<div class="border-left border-primary bg-light">border-left</div>

运行截图：

（2）删除边框

直接上代码：

<h3 class="mb-4">去掉指定边框</h3>
<div class="border border-0 border-primary bg-light">border-0</div>
<div class="border border-top-0 border-primary bg-light">border-top-0</div>
<div class="border border-right-0 border-primary bg-light">border-right-0</div>
<div class="border border-bottom-0 border-primary bg-light">border-bottom-0</div>
<div class="border border-left-0 border-primary bg-light">border-left-0</div>

运行截图：

（3）边框样式

直接上代码：

<h3 class="mb-4">圆角边框</h3>
<div class="border border-primary rounded">rounded</div>
<div class="border border-primary rounded-0">rounded-0</div>
<div class="border border-primary rounded-top">rounded-top</div>
<div class="border border-primary rounded-right">rounded-right</div>
<div class="border border-primary rounded-bottom">rounded-bottom</div>
<div class="border border-primary rounded-left">rounded-left</div>
<div class="border border-primary rounded-circle">rounded-circle</div>
<div class="border border-primary rounded-pill">rounded-pill</div>

运行截图：

5、元素大小样式

（1）宽度和高度示例

宽度相关的样式类：

.w-25、.w-50、.w-75、.w-100：分别设置元素的宽度为 25%、50%、75%、100%。
.mw-100：设置元素的最大宽度为 100%。
.vw-100：设置元素的宽度相对于视口宽度的百分比。

高度相关的样式类：

.h-25、.h-50、.h-75、.h-100：分别设置元素的高度为 25%、50%、75%、100%。
.mh-100：设置元素的最大高度为 100%。
.vh-100：设置元素的高度相对于视口高度的百分比。

相关使用案例
下面是一个示例，展示相对于父元素，使用宽度和高度示例相关样式类来控制元素的尺寸。
代码示例：

<h3 class="mb-4">宽度</h3>
<div class="bg-secondary text-white mb-4">
    <div class="w-25 p-3 bg-success">w-25</div>
    <div class="w-50 p-3 bg-success">w-50</div>
    <div class="w-75 p-3 bg-success">w-75</div>
    <div class="w-100 p-3 bg-success">w-100</div>
    <div class="w-auto p-3 bg-success">w-auto</div>
</div>
<h3 class="mb-4">高度</h3>
<div class="bg-secondary text-white" style="height: 100px">
    <div class="h-25 d-inline-block bg-success text-center" style="width: 120px">h-25</div>
    <div class="h-50 d-inline-block bg-success text-center" style="width: 120px">h-50</div>
    <div class="h-75 d-inline-block bg-success text-center" style="width: 120px">h-75</div>
    <div class="h-100 d-inline-block bg-success text-center" style="width: 120px">h-100</div>
    <div class="h-auto d-inline-block bg-success text-center" style="width: 120px">h-auto</div>
</div>

运行截图：

（2）相对于视口示例

直接上代码：

<h3 class="mb-4 text-right text-dark">.min-vw-100类和.vw-100类的对比效果</h3>
<h2 style="width: 1200px" class="min-vw-100 bg-primary text-center">.min-vw-100</h2>
<h2 style="width: 1200px" class="vw-100 bg-success text-center">.vw-100</h2>

运行截图：

（3）设置边距示例

在 Bootstrap 中，可以使用相关样式类来设置元素的边距，包括外边距（margin）和内边距（padding）。通过设置边距相关的样式类，可以控制元素之间的间距和布局，使页面内容更加清晰和美观。以下是一些常用的设置边距示例相关样式类的定义详细解释及相关使用案例。
常用的设置边距示例相关样式类

外边距（margin）相关的样式类：

    .m-1、.m-2、.m-3、.m-4、.m-5：分别设置元素的外边距为 0.25rem、0.5rem、1rem、1.5rem、3rem。
    .mx-3、.my-2：分别设置元素的水平外边距和垂直外边距为 1rem 和 0.5rem。
    .mt-4、.mr-3、.mb-2、.ml-1：分别设置元素的顶部、右侧、底部、左侧的外边距为 1.5rem、1rem、0.5rem、0.25rem。

内边距（padding）相关的样式类：

    .p-1、.p-2、.p-3、.p-4、.p-5：分别设置元素的内边距为 0.25rem、0.5rem、1rem、1.5rem、3rem。
    .px-3、.py-2：分别设置元素的水平内边距和垂直内边距为 1rem 和 0.5rem。
    .pt-4、.pr-3、.pb-2、.pl-1：分别设置元素的顶部、右侧、底部、左侧的内边距为 1.5rem、1rem、0.5rem、0.25rem。

相关使用案例
下面是一个示例，展示了如何使用设置边距示例相关样式类来控制元素的外边距和内边距：
直接上代码：

<h3 class="mb-4 text-dark">设置边距示例</h3>
<!--设置水平居中，底外边距为1.5rem-->
<h3 class="mb-4 mx-auto border border-primary" style="width: 150px">mx-auto</h3>
<!--ml-4设置左外边距为1.5rem-->
<div class="ml-4 border border-primary">ml-4</div>
<div class="border border-primary">正常的盒子</div>
<!--ml-n4设置左外边距为-1.5rem-->
<div class="ml-n4 border border-primary">ml-n4</div>

运行截图：

6、元素排布样式

（1）浮动示例

在 Bootstrap 中，可以使用相关样式类来实现元素的浮动效果，包括左浮动、右浮动、清除浮动等。通过设置浮动相关的样式类，可以控制元素在布局中的位置，实现多列布局、图文混排等效果。以下是一些常用的浮动示例相关样式类的定义详细解释及相关使用案例：
常用的浮动示例相关样式类

浮动相关的样式类：

    .float-left：将元素向左浮动。
    .float-right：将元素向右浮动。
    .float-none：取消元素的浮动效果。
清除浮动相关的样式类：
    .clearfix：用于清除浮动，避免父元素因子元素浮动而导致高度塌陷的问题。

相关使用案例

<h3 class="mb-4 text-dark">浮动效果</h3>
<div class="clearfix text-white border border-primary p-3">
<!-- 左浮动的元素 -->
<div class="float-left p-2 bg-primary text-white">左浮动的元素</div>
<!-- 右浮动的元素 -->
<div class="float-right p-2 bg-secondary text-white">右浮动的元素</div>
<!-- 清除浮动的示例 -->
<div >
    <div class="float-left p-2 bg-success text-white">左浮动元素1</div>
    <div class="float-left p-2 bg-warning text-white">左浮动元素2</div>
</div>
</div>

运行截图：

（2）响应式浮动示例

在 Bootstrap 中，可以使用响应式类来控制元素在不同屏幕尺寸下的浮动效果。响应式浮动示例相关样式类可以帮助开发者实现在不同设备上显示不同的浮动布局，从而使页面具有更好的响应性。以下是一些常用的响应式浮动示例相关样式类的定义详细解释及相关使用案例：
常用的响应式浮动示例相关样式类

响应式浮动相关的样式类：

.float-sm-left、.float-md-right、.float-lg-none：分别表示在小屏幕（sm）、中等屏幕（md）、大屏幕（lg）下设置元素的浮动效果为左浮动、右浮动、取消浮动。

相关使用案例
下面是一个示例，展示了如何使用响应式浮动示例相关样式类来实现在不同屏幕尺寸下的浮动效果：

<h3 class="mb-4 text-dark">响应式的浮动</h3>
<div class="clearfix text-white">
    <div class="bg-success w-50">box1</div>
    <div class="float-md-left bg-danger w-50">box2</div>
    <div class="float-md-right bg-primary w-50">box3</div>
</div>

运行截图：

（3）dispaly属性示例

在 Bootstrap 中，可以使用相关样式类来设置元素的显示属性，包括 display 属性。通过设置 display 相关的样式类，可以控制元素的显示方式，例如设置为 none 可以隐藏元素，设置为 block 可以让元素以块级元素显示，设置为 inline 可以让元素以行内元素显示等。以下是一些常用的 display 属性示例相关样式类的定义详细解释及相关使用案例：
常用的 display 属性示例相关样式类

显示属性相关的样式类：

.d-none：将元素的 display 属性设置为 none，即隐藏元素。
.d-block：将元素的 display 属性设置为 block，即使元素以块级元素显示。
.d-inline：将元素的 display 属性设置为 inline，即使元素以行内元素显示。
.d-inline-block：将元素的 display 属性设置为 inline-block，即使元素以行内块元素显示。

相关使用案例

下面是一个示例，展示了如何使用 display 属性示例相关样式类来控制元素的显示方式：

<h3 class="mb-4 text-dark">内联元素和块级元素的转换</h3>
<p>div显示为内联元素（一行排列）</p>
<div class="d-inline bg-primary text-white">div--d-inline</div>
<div class="d-inline bg-warning text-white m-5">div--d-inline</div>
<p>span显示为块级元素（独占一行）</p>
<span class="d-block bg-success text-white">span-d-block</span>
<span class="d-block bg-dark text-white">span-d-block</span>

运行截图：

（4）嵌入示例

在 Bootstrap 中，可以使用相关样式类来实现嵌入内容的效果，包括嵌入图片、嵌入视频、嵌入响应式媒体等。通过设置嵌入示例相关样式类，可以让内容在页面中以特定的方式嵌入，提升页面的交互性和视觉效果。以下是一些常用的嵌入示例相关样式类的定义详细解释及相关使用案例：
常用的嵌入示例相关样式类

嵌入图片相关的样式类：
    .img-fluid：使图片成为响应式图片，根据父元素的宽度自动调整图片大小。
    .rounded、.rounded-circle、.rounded-pill：分别表示设置图片的边框为圆角、圆形、椭圆形。

嵌入视频相关的样式类：
    .embed-responsive、.embed-responsive-16by9、.embed-responsive-4by3：用于创建响应式嵌入视频的容器，可以自适应不同尺寸的视频内容。

相关使用案例
下面是一个示例，展示了如何使用嵌入示例相关样式类来实现图片和视频的嵌入效果：

<h3 class="mb-4 text-dark">嵌入图像</h3>
<div class="embed-responsive embed-responsive-16by9">
    <iframe src="https://img.ingping.com/images/uploads/Image/Suit/zhuanyeluyin/2030/2030_03.jpg"></iframe>
</div>

运行截图：

（5）内容溢出示例

在 Bootstrap 中，可以使用相关的样式类来处理内容溢出的情况，使页面呈现出更好的视觉效果。内容溢出通常发生在元素的内容超出了其容器的大小，这时可以通过设置相关样式类来控制内容的显示方式。以下是一些常用的内容溢出示例相关样式类的定义详细解释及相关使用案例：
常用的内容溢出示例相关样式类
内容溢出相关的样式类：

    .overflow-auto：当内容溢出容器时，自动添加滚动条以便用户查看溢出内容。
    .text-overflow-ellipsis：在文本溢出时，显���省略号以表示内容被截断。
    .overflow-hidden：隐藏溢出的内容，不显示在容器外部。

相关使用案例

下面是一个示例，展示了如何使用内容溢出示例相关样式类来控制内容的溢出效果：

<h3 class="mb-4 text-dark">内容溢出：voerflow-auto和voerflow-hidden的效果</h3>
<div class="overflow-auto border float-left" style="width: 200px;height: 100px;">
    转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。--苏轼《水调歌头》
</div>
<div class="overflow-hidden border float-right" style="width: 200px;height: 100px;">
    转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。--苏轼《水调歌头》
</div>

运行截图：

（6）定位示例

在 Bootstrap 中，可以使用相关的样式类来实现元素的定位，包括绝对定位、相对定位、固定定位等。通过设置定位示例相关样式类，可以控制元素在页面中的位置，实现灵活的布局效果。以下是一些常用的定位示例相关样式类的定义详细解释及相关使用案例：
常用的定位示例相关样式类
定位相关的样式类：

    .position-static：将元素设置为静态定位，元素将按照文档流定位。
    .position-relative：将元素设置为相对定位，元素相对于其正常位置进行定位。
    .position-absolute：将元素设置为绝对定位，元素相对于最近的已定位父元素进行定位。
    .position-fixed：将元素设置为固定定位，元素相对于视口进行定位，元素不随页面滚动而移动。

相关使用案例
下面是一个示例，展示了如何使用定位示例相关样式类来实现不同类型的定位效果

<div class="container text-white">
    <nav class="sticky-top bg-primary p-5 mb-5">头部导航栏固定</nav>
    <div class="bg-secondary p-3">
        <p>内容栏一</p>
        <p>内容栏二</p>
        <p>内容栏三</p>
        <p>内容栏四</p>
        <p>内容栏五</p>
        <p>内容栏六</p>
        <p>内容栏七</p>
        <p>内容栏八</p>
        <p>内容栏九</p>
    </div>
    <div class="position-static">静态定位</div>
		<div class="position-relative" style="top: 20px; left: 30px;">相对定位</div>
		<div class="position-absolute" style="top: 50px; right: 10px;">绝对定位</div>
		<div class="position-fixed" style="bottom: 0; right: 0;">固定定位</div>
</div>

运行截图：