基于CSS的定位属性在网页设计中的应用
合集下载
基于DIV+CSS的网页定位技术的应用研究
【 关键词 】 Ｓ 盒子模 型； ＣＳ 浮动 定位 ；ｏ ｔ ｎ ｐ ｓ ｏ 定位 ｉ ｉ
随 着 互 联 网 与 Ｗｅ 术 的 不 断 发 展 ，利 用 传 统 的表 格 技 术 进 行 ｂ技 当将 ｐ ｓｉｎ属 性 设 置 为 ｓ ｔ ，表 示 盒 子 保 持 在 原 来 的 位 置 上 ． ｏｉｏ ｔ ｔｉ ａｃ 页 面 布 局 的 弊 端 逐 渐 暴 露 ，符 合 ｗ ｂ标 准 的 Ｄ Ｖ Ｃ Ｓ网 页 布 局 可 以 没 有 任何 移 动效 果 。Ｓａｉ 默 认 值 。 ｅ Ｉ＋ Ｓ ｔｔ ｃ为 弥补 表格布局 的不足 ， 使外观与结构分离 ， 大大简化 了代码 ， 站点的 使 （ ）ｂｏｕｅ 绝 对 定 位 ） ２ ａｓｌｔ（ 访 问 及 维 护 更 加 容 易 ，为 此 Ｄ Ｖ Ｃ Ｓ网 页 布 局 越 来 越 多 的被 广 泛 用 Ｉ＋ Ｓ 使 用 绝 对定 位 （ ｓｌｔ） 除 了 将 ｐ ｓｉｎ属 性 设 置 为 ａｓｌｔ． ｂ ｕ ａ ｏ ｅ， ｏｉｏ ｔ ｂ ｏｕｅ 还 于 各 种 类 型 的 网站 中 。然 而 在 进 行 ＤＩ Ｃ Ｓ网页 布 局 时 ， 何 控 制好 需 要 指 定 一 定 的 偏 移 量 ， 盒 子 的 包 含 框 为基 准 进 行 偏 移 ， 平 方 向 Ｖ＋ Ｓ 如 以 水 各个元素在页面 中的位置是非常关键的 。 本文通过对 Ｃ Ｓ盒子模型的 通 过 ｌ ｔ ｒ ｈ 属 性 指 定 ， 直 方 向通 过 ｔｐ或 ｂｔ ｍ 属 性 指 定 。绝 Ｓ ｅ或ｉ ｔ ｆ ｇ 竖 ｏ ｏｔ ｏ
一
ｌｆ ｅｔ
ｔｄ ｌ ｔ ｄｅ ｔ
ｒｇｔ ｉｈ
（ 意栏 区域 ：： 桶 域 ） 右糕 区域 ： 中
种 各 样 的排 版 的效 果 。
２ 网 页定 位 技 术
基于CSS技术的网页设计应用研究
而在 Ｘ ＭＬ中 ， 在声 明区 中加 入应 该 如下 所示 ：
＜？ ｘ ｍｌ— ｓｙｅ ｈ ｅ ｔｐ ＝ “ｔｘ ｃ ｓ ｈ ｅ ｔｌ ｓ ｅ ｔ ｙ ｅ ｅ ｔ ｓ ” ｒ ｆ＝ ／
“
当页 运行 时 ， 观 属性 将 根 据 用 户 浏 览 器 的 功 外 能 呈 现 。 如 果 用 户 的 浏 览 器 支 持 级 联 样 式 表 （ Ｓ ）外 观属 性 将 呈 现 为构 成 控件 的 Ｈ ＭＬ元 素 ＣＳ ， Ｔ
的样 式属 性 。 比如 ， 果定 义 了一个 Ｈ ｐｒ ｎ ｂ 如 ｙ ｅｌ ｋＷｅ ｉ
第 ３期
“ｅ ｔ ｓ ”＞ ｔｘ ／ａ ｓ
基于 Ｃ Ｓ技术 的网页设计应 用研究 Ｓ
３ ５
下提供 了关 于直接 设 置 样 式 的信 息 ， 括 在 设 计 时 包
以及 通过 编程 方式 时 如何使 用 样式 表 。 ２ １ 将外 观属 性 呈现 到浏 览器 ．
＜／ｈ ａ ｅ ｄ＞
基 于 Ｃ Ｓ技 术 的 网 页 设 计 应 用 研 究 Ｓ
张俊兰 刘 翼 ， ， 铁宏军
（１ ．延安大学 数学与计算机科 学学 院 ；．延安大学 网络 中心 ， ２ 陕西 延安 ７ ６０ ） １０ ０
摘
要 ： 网 页中使 用 Ｃ Ｓ对 网 页进 行布 局 和 设计 是 非 常 方便 快 捷 的 ， 在 Ｓ 同时还 可 以提 高对 网 页的
可访 问性 。本 文介 绍 了 Ｃ Ｓ的相 关背景 ， Ｓ 以及从 实 际应 用的 角度 讨论 了 Ｃ Ｓ加入 到 网页 中的三种 Ｓ
方法 ， 并结合 Ａ Ｐ Ｎ Ｔ研 究 了 Ｃ Ｓ与 Ａ Ｐ Ｎ Ｔ ＷＥ Ｓ．Ｅ Ｓ Ｓ ． Ｅ Ｂ服 务 器控 件 在 实践 应 用 中的一 些方 法和技
浅谈基于DIV+CSS的网页布局技术应用研究
计 算机 光盘软 件 与应用
２ ０ １ ３ 年第 Ｏ １ 期 Ｃ ｏ ｍ ｐ ｕ ｔ ｅ ｒ Ｃ Ｄ Ｓ ｏ ｆ ｔ ｗ ａ ｒ ｅ ａ ｎ ｄ Ａ ｐ ｐ ｌ ｉ ｃ ａ ｔ ｉ ｏ ｎ ｓ 软件设计开发
浅谈基于 Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ的网页布局技术应用研 究
比， Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ 布 局是 一种 新颖 的排版 布局 策略 。 Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ 是 网站标 准 中常用 术语 之 一 ，ｄ ｉ ｖ ＋ ｃ ｓ ｓ是 一种 网页 的布 局 方法 ，这 一种 网页 布局方 法有 别于传 统 的 Ｈ Ｔ ＭＬ 网页 设
２ Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ网页设 计
计 时效率增 加 。 因为采用 了 Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ 技 术策 略 ，在修 改 页面 的 时更加 可 以减 少 时间 。依据 区域 的相应 内容 标示 ， 然后再到 Ｃ Ｓ Ｓ里面寻找相一致的 Ｉ Ｄ， 这可 以让修改页面 的时更容 易 ， 而且 更不 可 能影 性 ， 这 对于 浏览 者与 浏览
计语言中的表格 （ ｔ ａ ｂ ｌ ｅ ）定位方式 ， 可实现网页页面 内容 与表 现相 分离 。 在Ｘ Ｈ Ｔ Ｍ Ｌ 网站设 计标准 中， 不 再使用 表 格 定位 技术 ，而 是采 用 Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ的方式 实现各 种 定位 。
Ｄｉ ｖ ＋ Ｃ Ｓ Ｓ 网页 布 局 的 主 要 作 用 主 要 体 现 在 以下 几 方 面
第一、 Ｄ Ｉ ｖ ＋ Ｃ Ｓ Ｓ 布 局 网页可 以使 网页载 入更 加快捷 ， 可 以更方便 地被 搜索 引擎 引用 。 但 是因 为很多 的 网页代码 在 Ｃ Ｓ Ｓ 里面 ，这就 让 页面 的容量缩 得 更多 ，这就 可 以让 网页 里面 的正 文部分 更加 突 出 ， 更 加便 于被搜 索 引擎采 集 引用 。与表格 嵌套 方法 不 同的是 ，Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ 技术 把页 面 单独 分成 很 多部分 ，而且 需要在 打开 页面 的时 ， 不 断在 每 个层 次增 加 。与表格 嵌套 布局 不 同的是 ， 表 格嵌 套布 局将 全 部页 面放在 一个 大表 格里 面 ， 这就 导致 网页加 载速度 变 得 很缓慢 。 第 二 、Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ 布 局 网页可 以减 少流 量 费用 。网页
２ ０ １ ３ 年第 Ｏ １ 期 Ｃ ｏ ｍ ｐ ｕ ｔ ｅ ｒ Ｃ Ｄ Ｓ ｏ ｆ ｔ ｗ ａ ｒ ｅ ａ ｎ ｄ Ａ ｐ ｐ ｌ ｉ ｃ ａ ｔ ｉ ｏ ｎ ｓ 软件设计开发
浅谈基于 Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ的网页布局技术应用研 究
比， Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ 布 局是 一种 新颖 的排版 布局 策略 。 Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ 是 网站标 准 中常用 术语 之 一 ，ｄ ｉ ｖ ＋ ｃ ｓ ｓ是 一种 网页 的布 局 方法 ，这 一种 网页 布局方 法有 别于传 统 的 Ｈ Ｔ ＭＬ 网页 设
２ Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ网页设 计
计 时效率增 加 。 因为采用 了 Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ 技 术策 略 ，在修 改 页面 的 时更加 可 以减 少 时间 。依据 区域 的相应 内容 标示 ， 然后再到 Ｃ Ｓ Ｓ里面寻找相一致的 Ｉ Ｄ， 这可 以让修改页面 的时更容 易 ， 而且 更不 可 能影 性 ， 这 对于 浏览 者与 浏览
计语言中的表格 （ ｔ ａ ｂ ｌ ｅ ）定位方式 ， 可实现网页页面 内容 与表 现相 分离 。 在Ｘ Ｈ Ｔ Ｍ Ｌ 网站设 计标准 中， 不 再使用 表 格 定位 技术 ，而 是采 用 Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ的方式 实现各 种 定位 。
Ｄｉ ｖ ＋ Ｃ Ｓ Ｓ 网页 布 局 的 主 要 作 用 主 要 体 现 在 以下 几 方 面
第一、 Ｄ Ｉ ｖ ＋ Ｃ Ｓ Ｓ 布 局 网页可 以使 网页载 入更 加快捷 ， 可 以更方便 地被 搜索 引擎 引用 。 但 是因 为很多 的 网页代码 在 Ｃ Ｓ Ｓ 里面 ，这就 让 页面 的容量缩 得 更多 ，这就 可 以让 网页 里面 的正 文部分 更加 突 出 ， 更 加便 于被搜 索 引擎采 集 引用 。与表格 嵌套 方法 不 同的是 ，Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ 技术 把页 面 单独 分成 很 多部分 ，而且 需要在 打开 页面 的时 ， 不 断在 每 个层 次增 加 。与表格 嵌套 布局 不 同的是 ， 表 格嵌 套布 局将 全 部页 面放在 一个 大表 格里 面 ， 这就 导致 网页加 载速度 变 得 很缓慢 。 第 二 、Ｄ Ｉ Ｖ ＋ Ｃ Ｓ Ｓ 布 局 网页可 以减 少流 量 费用 。网页
CSS与DIV构建网站(4)布局与定位
table : 将对象作为块元素级的表格显示
table-caption : 将对象作为表格标题显示
table-cell : 将对象作为表格单元格显示
table-column : 将对象作为表格列显示
table-column-group : 将对象作为表格列组显示
table-header-group : 将对象作为表格标题组显示
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
（12）设置对象是否及如何显示
格式：display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
可以单独设置对象各边的内部边距：padding-top（上边）、padding-bottom（下边）、padding-left（左边）、padding-right（右边）。格式参数同padding。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
table-caption : 将对象作为表格标题显示
table-cell : 将对象作为表格单元格显示
table-column : 将对象作为表格列显示
table-column-group : 将对象作为表格列组显示
table-header-group : 将对象作为表格标题组显示
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
（12）设置对象是否及如何显示
格式：display : block | none | inline | compact | marker | inline-table | list-item | run-in | table |table-caption | table-cell | table-column | table-column-group | table-footer-group | table-header-group | table-row | table-row-group
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
可以单独设置对象各边的内部边距：padding-top（上边）、padding-bottom（下边）、padding-left（左边）、padding-right（右边）。格式参数同padding。
内联对象要使用该属性，必须先设定对象的height或width属性，或者设定position属性为absolute。
selenium css定位方法
selenium css定位方法Selenium是一个用于自动化Web应用程序测试的工具，它支持多种定位元素的方法，其中包括CSS定位方法。
CSS定位方法是使用CSS选择器来定位页面元素的一种方式，它可以通过元素的属性、层级关系、文本内容等来定位元素。
在Selenium中使用CSS定位方法，可以通过以下方式实现：1. 通过class属性定位元素：可以使用".classname"的方式来定位具有特定class属性值的元素，例如：driver.findElement(By.cssSelector(".classname"));2. 通过id属性定位元素：可以使用"#id"的方式来定位具有特定id属性值的元素，例如：driver.findElement(By.cssSelector("#id"));3. 通过标签名定位元素：可以直接使用标签名来定位元素，例如：driver.findElement(By.cssSelector("input"));4. 通过属性定位元素：可以使用属性选择器来定位具有特定属性值的元素，例如：driver.findElement(By.cssSelector("[name='username']"));5. 通过层级关系定位元素：可以使用空格来表示层级关系，例如：driver.findElement(By.cssSelector("div input"));6. 通过组合定位元素：可以组合多个条件来定位元素，例如：driver.findElement(By.cssSelector("input[name='username']") );在使用CSS定位方法时，需要注意以下几点：确保选择器的准确性，避免选择到多个元素或选择不到元素；可以使用浏览器的开发者工具来辅助编写CSS选择器，以保证选择器的正确性；了解CSS选择器的语法和规则，可以更灵活地编写选择器。
WEB设计中CSS技术的应用研究
只需要对几个Ｃ Ｓ Ｓ 文件进行简单 的修改就能重 新设计一个有 Ｃ Ｓ Ｓ （ Ｃ ａ ｓ ｃ ａ ｄ ｉ ｎ ｇ Ｓ ｔ ｙ ｌ ｅ Ｓ ｈ ｅ ｅ ｔ ｓ ） ， 即层 叠样 式表 ， 是控制 网页 调用 ， 许多 页面 的站 点 ， 缩短改版时间 ， 更好地实现 网站文件 的的最优化 布局样式基础的一种表现设计 语言 ， 能够 实现对 网页的结 构、 行为 配 置 。 与表现进行 分离的ｗｅ ｂ 标准 ， 进行网页的风格设计 。 Ｃ Ｓ Ｓ 可 以支 持
２ ． １ ＣＳ Ｓ对 ｗ ｅ ｂ网 页样 式 的控 制
体积 。 还应该注意ｃ ｌ ａ ｓ ｓ 的多重定义 ， 以及不同浏 览器的属性默认值 ，
可以在一开始就将样式表 中所有元素的 ｗｅ ｂ 设计中对于 网页样式 的控制常通过 Ｃ Ｓ Ｓ 技术来实现 。 Ｃ Ｓ Ｓ 而由于 浏览器 的兼容 问题 ， ｍａ ｒ ｇ ｉ ｎ 和ｐ ａ ｄ ｄ ｊ ｎ ｇ 设置为０ 。 在使用不同的元 素套用 同一组样 式时应 可 以 控 制 页 面 的 布局 、 字体 、 背 景等 信息 ， 使用完全代码控制 ， 应 用 先定义类 别名 ， 后 引用＜标识符 ｃ ｌ ａ ｓ ｓ ＝ 类别名＞。 随意方便 ， 使 网页布局样 式灵 活多样 ， 完 美实现Ｗｅ ｂ 标准 。 在Ｃ Ｓ Ｓ 设计 网页的校验过程 中常会出现通过 了Ｗ３ Ｃ 校验 ， 但未 利用 Ｃ Ｓ Ｓ 进行ｗｅ ｂ 布局样式 时， 如在网页 中产生一个表格 ， 可 Ｓ Ｓ ２ ． ｏ Ｒ验 ， 这 是 由于 Ｗ ３ Ｃ 定 义 字 体 的原 因 ， 如 果 最 后 是 以 单 以直接 用记事本创建一个Ｃ Ｓ Ｓ 文件 ， 对其进行编辑 ， 完全抛开Ｔ ａ ｂ ｌ ｅ 通过Ｃ 就会在有些操作系统 中再 层一层嵌套的冗余代码 。 而利用Ｃ ｓ ｓ ＋ Ｈ， Ｉ ＭＩ ， 在ｈ ｔ ｍｌ 代码 中加入 独某个 字体而不是一个类别的字体结束 ，
探析CSS技术在网页制作中能应用与代码优化
Ｃ Ｓ 用在 网页制作 中， Ｓ应 易于精 确控 制 网页布 ｎ ＃ＤＤＤＤＤＤ｝ ｄ：
局、 高代码重用率、简化Ｈ Ｍ 中的各种繁 提 ＴＬ
琐标 记 、 少上传 的代码 、 少重复劳 动的工 减 减
最方便管 理整个 网站的网页风 格， 它让 网
使 用Ｓ ＴＹＬ 属 性 ， 将 Ｓ Ｅ ＴＹＬＥ 性 页 的 文 字 内 容 与 版 面 设 计 分 开 。 点也 是 属 缺
相同， 只是语法和运作方式上略有区别。 导
入样 式一定 要 放 在＜ ｔｌ＞＜ ｓｙｅ 之 间 ， ｓｙｅ ／ ｔｌ ＞
Ｉ引言 ．
为 了 能 够 让 网 页 更 好 地 在 各 种 平
台 上 兼 容 ， ３ （ ｏ ｉ Ｗ ｉ ｅ Ｗ Ｃ Ｗ ｒｄ ｄ Ｗ ｅ ｂ
＜ｔ ｂ ｅ ｔ ｌ ＝”ｃ ｌ ． ｕ ｆ ｎｔ ａ ｌ ｓ ｙ ｅ ｏ ｏｒ ｂｌ ｅ： ｏ
３ＣＳ 代码 的优化 ． Ｓ
浏 览 网 页 必 须 提 高 速 度 ， ｂ 制 作 Ｗｅ 的
赖于层层嵌 套的表格 ； 你可以同时更新许 档 ， 可让整 篇文件具有 “ 统一 性” 只要是 ，
改 ； 且网页代码更加整洁 、 净 ， 而 干 易于 调 点 就 是 在 个别 元 件的 灵 活度 不足 。
作 量、 高网页传 输 速率 、 于对 网页的更新 直 接 加 在 个 别 的 元 件 标 签 里 。 ＨＴＭ Ｌ 提 便 在 文 在 个别 文件 或 元 件 的灵 活度 不足 。 如 ： 例
与维护。 文章 内容 研 究 了 ｓ层 叠样式 表 的主 件 的 文 本 内容 中 ， ｃｓ 随时 有 需 要 ， 随 时 加 一 可
整和维护 ； 几乎所有的 浏览器上都可 以 在
HTML5+CSS3网站设计浮动与定位
第6章浮动与定位《HTML5+CSS3网站设计基础教程》学习目地/Target理解元素地浮动,能够为元素设置浮动样式。
熟悉清除浮动地方法,可以使用不同方法清除浮动。
掌握元素地定位,能够为元素设置常见地定位模式。
章节概述/Summary默认情况下,网页地元素会按照从上到下或从左到右地顺序一一罗列,如果按照这种默认地方式进行排版,网页将会单调,混乱。
为了使网页地排版更加丰富,合理,在CSS可以对元素设置浮动与定位样式。
本章将对元素地浮动与定位进行详细讲解。
目录/Contents01元素地浮动02元素地定位03元素地类型与转换04阶段案例—制作网页焦点图01元素地浮动初学者在设计一个页面时,通常会按照默认地排版方式,将页面地元素从上到下一一罗列。
这样地布局看起来呆板,不美观,那么,如何对页面重新排版,使页面变得整齐,有序呢？这就需要为元素设置浮动。
本节将对元素地浮动进行详细讲解。
掌握元素地浮动属性float地用法,能够设置元素地浮动。
学习目地1.元素地浮动属性float1.元素地浮动属性float究竟是什么是浮动？应用排列图文排列论坛分享说到浮动,其实大家并不陌生1.元素地浮动属性float浮动属性作为CSS地重要属性,在网页布局至关重要。
在CSS,通过float属性来定义浮动,所谓元素地浮动是指设置了浮动属性地元素会脱离标准文档流地控制,移动到其父元素指定位置地过程。
选择器{float:属性值;}属性值描述left元素向左浮动right元素向右浮动none元素不浮动（默认值）掌握清除浮动地方法,能够为元素清除浮动。
学习目地2.清除浮动2.清除浮动2.清除浮动由于浮动元素不再占用原文档流地位置,所以会对页面其它元素地排版产生影响,如果要避免这种影响,就需要对元素清除浮动。
2.清除浮动在CSS,使用clear属性清除浮动。
选择器{clear:属性值;}属性值描述left不允许左侧有浮动元素（清除左侧浮动地影响）right不允许右侧有浮动元素（清除右侧浮动地影响）both同时清除左右两侧浮动地影响2.清除浮动运用clear属性只能清除元素左右两侧浮动地影响。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
Keywords
CSS, Position, Static, Relative, Absolute, Fixed
基于CSS的定位属性在网页设计中的应用
高 葵，付晓翠，李蔚妍 山东农业大学信息科学与工程学院，山东 泰安
收稿日期：2019年6月6日；录用日期：2019年6月21日；发布日期：2019年6月28日
2. 使用举例
2.1. 相关概念
1) 定位(position)属性 在 CSS 样式中，position 定位属性定义元素区域的相对空间位置，可以相对于其上级元素，或相对 于另一个元素，或相对于浏览器窗口[2]。position 定位属性有 4 种取值，CSS 语法如下： position:static|relative|absolute|fixed 参数包括了四种属性值：static、relative、absolute 和 fixed，它们决定了元素区域的布局方式。 static 静态定位为默认值，网页元素遵循 HTML 的标准定位规则，即网页各种元素按照“前后相继” 的顺序进行排列和分布[3]。 relative 相对定位，网页元素也遵循 HTML 的标准定位规则，但需要为网页元素相对于原始的标准位 置设置一定的偏移距离，可以使用 CSS 的属性如 left、top、right、bottom 来设置位置。 absolute 绝对定位，位置将依据浏览器左上角的 0 点开始计算，使用 CSS 属性 left、top、right、bottom 来设置位置。 fixed 固定定位与绝对定位类似，是绝对定位的子类别，相对于浏览器窗口进行定位，当拖动浏览器 窗口滚动条时，该元素位置始终保持不变，使用 CSS 属性 left、top、right、bottom 来设置位置[4]。
2) 相对定位 相对定位(position:relative;)指的是通过设置偏移量，让这个元素“相对于”它原本的位置进行移动[5]。 例题 2：在例题 1 的基础上完成页面，效果如图 2。
Figure 2. Web layout 2 图 2. 网页布局 2
在例题 1 的基础上，只需将 id=”box”的元素的 CSS 定义修改为如下代码即可：
Open Access
1. 引言
在网页设计中，CSS 即层叠样式表，用来控制网页样式并允许样式与内容分离的一种标记性语言[1]。 利用 CSS 的定位属性可以实现不同的定位方式，结合 DIV 等块级元素可以实现页面布局，而且可以更灵 活。本文通过举例并进行分析说明，给出使用 CSS 的定位属性进行网页布局的使用方法和注意事项，达 到掌握的目的。
DOI: 10.12677/sea.2019.83020
166
软件工程与应用
高葵 等
关系。id=”box”的容器又包含 id=”box-1”、id=”box-2”、id=”box-3”这 3 个容器，彼此也是并列关系。题中 div 元素的定位采用定位属性的默认值，即静态定位方式。静态定位的使用场景一般来说不用写，除非是 想要覆盖之前设置的定位。
Software Engineering and Applications 软件工程与应用, 2019, 8(3), 163-171 Published Online June 2019 in Hans. /journal/sea https:///10.12677/sea.2019.83020
margin-left:20px;
/*设置左外边距 20px，区域总宽度为 375px*/
}
#box-2 {
DOI: 10.12677/sea.2019.83020
165
软件工程与应用
高葵 等
width:350px; height:100px; background-color:#C6F; margin-left:20px; padding-left:5px; } #box-3 { width:350px; height:100px; background-color:#C3F; margin-left:20px; padding-left:5px; } #footer { width: 400px; line-height: 30px; background-color: #6CF; padding-left: 5px; } </style> </head> <body> <div id="container"> id="container" <div id="top"> id ="top"</div> <div id="box"> id= "box" <div id="box-1"> <p>id ="box-1" </p> </div> <div id="box-2"> <p>id ="box-2" </p> </div> <div id="box-3"> <p>id ="box-3" </p> </div> </div> <div id="footer">id ="footer"</div> </div> </body> </html> 分析：从上可以看到页面中分别定义了 id=”top”、id=”box”和 id=”footer”3 个 Div 容器，彼此是并列
高葵 等
关键词
CSS，定位属性，静态定位，相对定位，绝对定位，固定定位
Copyright © 2019 by authors and Hans Publishers Inc. This work is licensed under the Creative Commons Attribution International License (CC BY). /licenses/by/4.0/
2.2. 使用举例
1) 静态定位 静态定位是 position 属性的默认值，即该元素出现在文档的常规位置，遵循 HTML 的标准定位规则， 即按照“前后相继”的顺序进行排列和分布，不会重新定位。 例题 1：完成页面，效果如图 1。 对应的主要代码如下： <!doctype html> <html> <head>
摘要
在网页设计中，可以通过CSS的定位属性实现网页元素的定位设置，进而实现页面布局。CSS的定位属性 由不同的属性值决定了网页元素不同的定位方式。本文通过举例对CSS的定位属性进行比较，并分析说 明，给出使用不同CSS的定位属性法进行元素定位的使用方法和注意事项，达到掌握的目的。
文章引用: 高葵, 付晓翠, 李蔚妍. 基于 CSS 的定位属性在网页设计中的应用[J]. 软件工程与应用, 2019, 8(3): 163-171. DOI: 10.12677/sea.2019.83020
与例题 1 相比，主要修改 id=”box-1”区域部分，代码如下：
#box-1 {
width:350px;
/*设置元素宽度*/
DOI: 10.12677/sea.2019.83020
167
ቤተ መጻሕፍቲ ባይዱ软件工程与应用
高葵 等
Figure 3. Web layout 3 图 3. 网页布局 3
height:100px;
position: static;
/*静态定位，默认选项，可以不设置*/
}
#box-1 {
width:350px;
/*设置元素宽度*/
height:100px;
/*设置元素高度*/
background-color:#C9F; /*设置背景色*/
padding-left:5px;
/*设置左内边距 5px*/
}
分析：本例中，id=”box”的元素进行了相对定位属性设置，相对于在文档流(id=”container”)中的原来
位置向下并且向右各移动了 50px，原来的位置不但没有让 id=”footer”的元素占据，反而还将其覆盖了一
部分。若此处不设置移动位置即没有 top，left 设置，则相对定位没有效果[6]。相对定位的使用场景和
Received: June 6th, 2019; accepted: June 21st, 2019; published: June 28th, 2019
Abstract
In web design, the location of web elements can be set through the location attributes of CSS, and then the layout of the page can be realized. The location attributes of CSS have different attribute values, which determine the different location methods of web elements. This paper compares the positioning attributes of CSS with examples, and analyzes and explains the methods and points for attention of element positioning using different positioning attributes of CSS, so as to achieve the purpose of mastering.
CSS, Position, Static, Relative, Absolute, Fixed
基于CSS的定位属性在网页设计中的应用
高 葵，付晓翠，李蔚妍 山东农业大学信息科学与工程学院，山东 泰安
收稿日期：2019年6月6日；录用日期：2019年6月21日；发布日期：2019年6月28日
2. 使用举例
2.1. 相关概念
1) 定位(position)属性 在 CSS 样式中，position 定位属性定义元素区域的相对空间位置，可以相对于其上级元素，或相对 于另一个元素，或相对于浏览器窗口[2]。position 定位属性有 4 种取值，CSS 语法如下： position:static|relative|absolute|fixed 参数包括了四种属性值：static、relative、absolute 和 fixed，它们决定了元素区域的布局方式。 static 静态定位为默认值，网页元素遵循 HTML 的标准定位规则，即网页各种元素按照“前后相继” 的顺序进行排列和分布[3]。 relative 相对定位，网页元素也遵循 HTML 的标准定位规则，但需要为网页元素相对于原始的标准位 置设置一定的偏移距离，可以使用 CSS 的属性如 left、top、right、bottom 来设置位置。 absolute 绝对定位，位置将依据浏览器左上角的 0 点开始计算，使用 CSS 属性 left、top、right、bottom 来设置位置。 fixed 固定定位与绝对定位类似，是绝对定位的子类别，相对于浏览器窗口进行定位，当拖动浏览器 窗口滚动条时，该元素位置始终保持不变，使用 CSS 属性 left、top、right、bottom 来设置位置[4]。
2) 相对定位 相对定位(position:relative;)指的是通过设置偏移量，让这个元素“相对于”它原本的位置进行移动[5]。 例题 2：在例题 1 的基础上完成页面，效果如图 2。
Figure 2. Web layout 2 图 2. 网页布局 2
在例题 1 的基础上，只需将 id=”box”的元素的 CSS 定义修改为如下代码即可：
Open Access
1. 引言
在网页设计中，CSS 即层叠样式表，用来控制网页样式并允许样式与内容分离的一种标记性语言[1]。 利用 CSS 的定位属性可以实现不同的定位方式，结合 DIV 等块级元素可以实现页面布局，而且可以更灵 活。本文通过举例并进行分析说明，给出使用 CSS 的定位属性进行网页布局的使用方法和注意事项，达 到掌握的目的。
DOI: 10.12677/sea.2019.83020
166
软件工程与应用
高葵 等
关系。id=”box”的容器又包含 id=”box-1”、id=”box-2”、id=”box-3”这 3 个容器，彼此也是并列关系。题中 div 元素的定位采用定位属性的默认值，即静态定位方式。静态定位的使用场景一般来说不用写，除非是 想要覆盖之前设置的定位。
Software Engineering and Applications 软件工程与应用, 2019, 8(3), 163-171 Published Online June 2019 in Hans. /journal/sea https:///10.12677/sea.2019.83020
margin-left:20px;
/*设置左外边距 20px，区域总宽度为 375px*/
}
#box-2 {
DOI: 10.12677/sea.2019.83020
165
软件工程与应用
高葵 等
width:350px; height:100px; background-color:#C6F; margin-left:20px; padding-left:5px; } #box-3 { width:350px; height:100px; background-color:#C3F; margin-left:20px; padding-left:5px; } #footer { width: 400px; line-height: 30px; background-color: #6CF; padding-left: 5px; } </style> </head> <body> <div id="container"> id="container" <div id="top"> id ="top"</div> <div id="box"> id= "box" <div id="box-1"> <p>id ="box-1" </p> </div> <div id="box-2"> <p>id ="box-2" </p> </div> <div id="box-3"> <p>id ="box-3" </p> </div> </div> <div id="footer">id ="footer"</div> </div> </body> </html> 分析：从上可以看到页面中分别定义了 id=”top”、id=”box”和 id=”footer”3 个 Div 容器，彼此是并列
高葵 等
关键词
CSS，定位属性，静态定位，相对定位，绝对定位，固定定位
Copyright © 2019 by authors and Hans Publishers Inc. This work is licensed under the Creative Commons Attribution International License (CC BY). /licenses/by/4.0/
2.2. 使用举例
1) 静态定位 静态定位是 position 属性的默认值，即该元素出现在文档的常规位置，遵循 HTML 的标准定位规则， 即按照“前后相继”的顺序进行排列和分布，不会重新定位。 例题 1：完成页面，效果如图 1。 对应的主要代码如下： <!doctype html> <html> <head>
摘要
在网页设计中，可以通过CSS的定位属性实现网页元素的定位设置，进而实现页面布局。CSS的定位属性 由不同的属性值决定了网页元素不同的定位方式。本文通过举例对CSS的定位属性进行比较，并分析说 明，给出使用不同CSS的定位属性法进行元素定位的使用方法和注意事项，达到掌握的目的。
文章引用: 高葵, 付晓翠, 李蔚妍. 基于 CSS 的定位属性在网页设计中的应用[J]. 软件工程与应用, 2019, 8(3): 163-171. DOI: 10.12677/sea.2019.83020
与例题 1 相比，主要修改 id=”box-1”区域部分，代码如下：
#box-1 {
width:350px;
/*设置元素宽度*/
DOI: 10.12677/sea.2019.83020
167
ቤተ መጻሕፍቲ ባይዱ软件工程与应用
高葵 等
Figure 3. Web layout 3 图 3. 网页布局 3
height:100px;
position: static;
/*静态定位，默认选项，可以不设置*/
}
#box-1 {
width:350px;
/*设置元素宽度*/
height:100px;
/*设置元素高度*/
background-color:#C9F; /*设置背景色*/
padding-left:5px;
/*设置左内边距 5px*/
}
分析：本例中，id=”box”的元素进行了相对定位属性设置，相对于在文档流(id=”container”)中的原来
位置向下并且向右各移动了 50px，原来的位置不但没有让 id=”footer”的元素占据，反而还将其覆盖了一
部分。若此处不设置移动位置即没有 top，left 设置，则相对定位没有效果[6]。相对定位的使用场景和
Received: June 6th, 2019; accepted: June 21st, 2019; published: June 28th, 2019
Abstract
In web design, the location of web elements can be set through the location attributes of CSS, and then the layout of the page can be realized. The location attributes of CSS have different attribute values, which determine the different location methods of web elements. This paper compares the positioning attributes of CSS with examples, and analyzes and explains the methods and points for attention of element positioning using different positioning attributes of CSS, so as to achieve the purpose of mastering.