CSS3-05 样式 4_html/css_WEB-ITnose-html教學-PHP中文網

首頁

web前端

html教學

CSS3-05 样式 4_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:16 AM

前言

关于 CSS 的介绍，基本上告一段落了。在该博客中将介绍如何通过 CSS 去设置一个 HTML 元素，显示在 Web 页面的位置。

定位

概述

定义元素位置的基准，即：该元素与 HTML 文档流和其他 HTML 元素的关系。

四种定位方式

Static（静态定位）

默认值（没有定位），元素出现在正常的 HTML 文档流中

静态定位的元素不会受到 top、bottom、left、right 的影响

Fixed（固定定位）

元素相对于浏览器窗口的位置固定，即：固定在浏览器窗口的固定位置，即使窗口滚动也不会移动

与 HTML 文档流无关，不占据空间

Relative（相对定位）

相对于元素正常位置的定位，其原本所占的空间不会改变

Absolute（绝对定位）

相对于最近已定位的父元素；若没有已定位的父元素，那么将相对于

与 HTML 文档流无关，不占据空间

四种定位方式比较

定位方式是否与文档流有关是否占据空间是否可以重叠

Static	是	是	否
Fixed	否	否	是
Relative	是	是	否
Absolute	否	否	是

注意

通过观察表格，大家可以看出：在四中定位方式中，凡是与文档流有关的都会占据文档流空间，且不可重叠；凡是与文档流无关的都不会占据文档流空间，且可以重叠。原因是什么呢？HTML 文档流的布局是流式布局（fluid layout），像流水一样布局，怎么可以重叠，没有空间又怎么能布局元素！

三种定位方式

看了上边的描述，你肯定还是一头雾水，不知道这四种定位方式到底说的是什么，在什么时候该用什么方式的定位。在定位一个元素的时候，我们通常需要选择一种定位方式来确定一个元素的布局方式，还需要设置的它的偏移量，那么问题就来了，偏移量的偏移基准是什么？

Fixed

该方式定位的元素，设置偏移量的参照基准是浏览器窗口（不完全是）

示例

代码

<!DOCTYPE html><html><head><style>body {    background-color: lightgray;}p.pos_fixed{    position:fixed;    background-color: red;}</style></head><body><p class="pos_fixed">This is a paragrap.</p></body></html>

效果

观察发现，元素的左方和上方，会有一定的边距，这是为什么？“这是浏览器为 body 添加的默认边距”，这的这么简单吗？我们来试试。

代码

// 改变 body 的样式body {    background-color: lightgray;    margin: 0px;}

效果

观察发现，元素左边的边距确实没有了，但是上方的边距还在。“这是浏览器为 body 添加的默认填充”，那么我可以明确的告诉你，这不是答案。那么答案到底是什么？

代码

// 改变 .pos_fixed 类的样式p.pos_fixed{    position:fixed;    background-color: red;    margin: 0px;}

效果

我们惊奇的发现，我们的问题解决了。原来是这样：“浏览器为 p 默认添加了上边距（在 p 前后分别添加一个换行）”，但是对于 Fixed 定位方式，我们还需要注意一点，我们来看看如下效果

代码

// 改变样式表p {    margin: 0px;}p.pos_fixed{    position:fixed;    background-color: red;}// 改变内容<p>This is another paragrap</p><p>This is another paragrap</p><p>This is another paragrap</p><p>This is another paragrap</p><p class="pos_fixed">This is a paragrap.</p><p>This is another paragrap</p><p>This is another paragrap</p><p>This is another paragrap</p><p>This is another paragrap</p>

效果

我们发现，Fixed 定位的元素，确实没有占据了文档流的空间，当滚动内容是，位置也没有变化。但是默认情况下，Fixed 定位的元素的 top 还是会受到文档流的影响的。这与表格中的描述有矛盾，还请大家注意，非常愿意与大家一起探讨原因之所在。

总结

Fixed 方式定位的元素，默认情况下除 top 外不受文档流影响，以浏览器窗口为参照基准；不占据文档流空间；固定在浏览器窗口的某个位置，不随内容的滚动而滚动。（暂且这样理解吧）

Relative

该定位方式的元素，设置偏移量的参照基准是元素自身的正常位置

示例

代码

<!DOCTYPE html><html><head><style>body {    background-color: lightgray;    margin: 0px;}div {    width: 100px;    height: 60px;}#div1 {    background-color: red;    top: 10px;}#div2 {    background-color: blue;}</style></head><body><div id="div1"></div><div id="div2"></div></body></html>

效果

观察发现，div1 和 div2 按照流式布局，在没有设置定位方式的情况下，设置了 top 是没有任何效果的。原因想必大家都知道，我们来试试设置定位方式后的效果

代码

// 改变 div2 的定位方式，且设置偏移量#div2 {    background-color: blue;    position: relative;    top: -10px;    left: 10px;}

效果

观察发现，设置定位方式为 relative 后，偏移量产生了效果，相对于正常位置向右向上分别便宜了 10px，且元素可以重叠在一起。我们接下来看看，如何通过 z-index 来控制元素的重叠。

代码

// 改变 div2 的 z-index 属性#div2 {    background-color: blue;    position: relative;    top: -10px;    left: 10px;    z-index: -1;}

效果

改变 div2 的 z-index 后，div2 显示在了 div1 的后边。关于 z-index，我们需要了解以下几点：默认值为 0；只作用于 relative 定位的元素；值大的元素排在前面。

总结

Relative方式定位的元素，受文档流的影响，占据文档流空间，可以重叠，受 top、right、bottom、left 的影响。

Absolute

Absolute 方式定位的元素，设置偏移量的参照基准是距离最近的已定位的祖先元素，若没有已定位的祖先元素，则以 html 为基准。

示例

代码

<!DOCTYPE html><html><head><style>body {    background-color: lightgray;    margin: 20px 20px;}#strap {    background-color: green;    width: 200px;    height: 120px;}#div1 {    background-color: red;    width: 160px;    height: 90px;}#div11 {    background-color: blue;    width: 100px;    height: 40px;}#div12 {    background-color: orange;    width: 100px;    height: 40px;}</style></head><body><div id="strap">    <div id="div1">        <div id="div11"></div>        <div id="div12"></div>    </div></div></body></html>

效果

在未设置定位和，偏移量的情况下，效果如图。我们来设置绝对定位试试。

代码

// 设置 div12 的定位方式为 absolute#div12 {    background-color: orange;    width: 100px;    height: 40px;    position: absolute;}

效果

观察后，我们发现没有任何效果。若只设置 absolute 定位方式，不设置偏移量，将不会影响元素的布局。接下来我们来设置偏移量。

代码

// 设置 div12 的偏移量#div12 {    background-color: orange;    width: 100px;    height: 40px;    position: absolute;    top: 0px;    left: 0px;}

效果

观察发现，div12 脱离了文档流，移动到了窗口的左上角，而我们在这里设置了 body 的上边距和左边距。接下来我们来设置 div12 祖先元素的定位。

代码

只有一个定位的父元素

// 设置组向 strap 的定位方式#strap {    background-color: green;    width: 200px;    height: 120px;    position: relative;}#div12 {    background-color: orange;    width: 100px;    height: 40px;    position: absolute;    right: 10px;    bottom: 10px;}

多个定位的父元素

// 设置 div1 的定位方式#div1 {    background-color: red;    width: 160px;    height: 90px;    position: relative;}

效果

只有一个定位的父元素

多个定位的父元素

总结

若只设置定位方式，不设置偏移量，将不会有效果

若没有已定位（Fixed、Relative、Absolute 三种中的一种）的祖先元素，则以 html 为参照基准，而不是以 body 为参照基准

若有已定位的祖先元素

有一个已定位的祖先元素的情况下，以已经定位的祖先元素为参照基准

有多个已定位的祖先元素的情况下，以距离最近的已经定位的祖先元素为参照基准

声明

本来想以这篇博客，来结束 CSS 的基础介绍。但是已经写了这么多，还是有很多知识点没有涉及到，我本不是一个拖拖拉拉的人。那么，在接下来的博客，我会继续介绍 CSS 的基础知识。“您好，您的文章知识点丰富，但是从读者的角度想可读性略差，您精通css建议您考虑将页面多少美观，整洁一些，以更好达到分享的目的。” ，这样的消息不知你是否收到过，我是收到过。那么在介绍完 CSS 基础知识后，如果有机会的话，我会详细说说如何来定制自己的博客页面。另外，由于最近在赶一个项目，不常写博客。今天突然发现，有几个消息和评论没有及时的回复，在此我表示抱歉，以后定会在一天内给予回复。你也可以加我的 QQ：1829871867，方便及时的联系我。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

什麼是自我關閉標籤？舉一個例子。Apr 27, 2025 am 12:04 AM

self-closingtagsinhtmlandxmlaretagsthatclosethem hexptneedneedingAseparateClosingTag，SightifyingmarkupStrupupStrupureAndenHancingCodingsigy.1）shemesessientInsentialInxmlforelementswithcontentsswithcontent content content content content content content content content contentcontent，確保wellwell-formedDocuments.2）Inhtmlible5，inhtmlibut forfix

超越HTML：網絡開發的基本技術Apr 26, 2025 am 12:04 AM

要構建一個功能強大且用戶體驗良好的網站，僅靠HTML是不夠的，還需要以下技術：JavaScript賦予網頁動態和交互性，通過操作DOM實現實時變化。 CSS負責網頁的樣式和佈局，提升美觀度和用戶體驗。現代框架和庫如React、Vue.js和Angular，提高開發效率和代碼組織結構。

HTML中的布爾屬性是什麼？舉一些例子。Apr 25, 2025 am 12:01 AM

布爾屬性是HTML中的特殊屬性，不需要值即可激活。 1.布爾屬性通過存在與否控制元素行為，如disabled禁用輸入框。 2.它們的工作原理是瀏覽器解析時根據屬性的存在改變元素行為。 3.基本用法是直接添加屬性，高級用法可通過JavaScript動態控制。 4.常見錯誤是誤以為需要設置值，正確寫法應簡潔。 5.最佳實踐是保持代碼簡潔，合理使用布爾屬性以優化網頁性能和用戶體驗。

如何驗證您的HTML代碼？Apr 24, 2025 am 12:04 AM

HTML代碼可以通過在線驗證器、集成工具和自動化流程來確保其清潔度。 1)使用W3CMarkupValidationService在線驗證HTML代碼。 2)在VisualStudioCode中安裝並配置HTMLHint擴展進行實時驗證。 3)利用HTMLTidy在構建流程中自動驗證和清理HTML文件。

HTML與CSS和JavaScript：比較Web技術Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML作為標記語言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定義網頁的結構和內容，其目的在於提供一種標準化的方式來展示信息。 1）HTML通過標籤和屬性組織網頁的各個部分，如標題和段落。 2）它支持內容與表現分離，提升維護效率。 3）HTML具有可擴展性，允許自定義標籤增強SEO。

HTML，CSS和JavaScript的未來：網絡開發趨勢Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。