CSS3學習教程，從入門到精通，CSS3 元素的浮動與定位語法知識點及案例代碼（17）

CSS3 元素的浮動與定位語法知識點及案例代碼

一、CSS3 浮動（float）

知識點

1. **定義** ：浮動使元素向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動元素的邊框為止。浮動主要用于布局，如實現圖文繞排等效果。
2. **取值** ：* `left` ：向左浮動。* `right` ：向右浮動。* `none` ：默認值，不浮動。3. **清除浮動** ：浮動會使父元素高度塌陷，需要清除浮動來避免布局問題。常用方法有：* `clear:both` ：清除浮動，使元素位于浮動元素下方。* 使用 `overflow:hidden` 給父元素添加隱藏溢出樣式。

案例代碼

<!DOCTYPE html>
<html>
<head><title>CSS3 浮動案例</title><style>/* 父容器 */.container {border: 2px solid black;padding: 10px;overflow: hidden; /* 清除浮動 */}/* 左浮動元素 */.left-float {float: left;width: 100px;height: 100px;background-color: lightblue;margin: 5px;}/* 右浮動元素 */.right-float {float: right;width: 100px;height: 100px;background-color: lightgreen;margin: 5px;}/* 清除浮動的元素 */.clear {clear: both;height: 20px;background-color: lightgray;}</style>
</head>
<body><div class="container"><div class="left-float">左浮動</div><div class="right-float">右浮動</div><div class="clear">清除浮動</div></div>
</body>
</html>

注釋 ：在這個案例中，我們創建了一個父容器 container，里面有兩個浮動元素（一個左浮動，一個右浮動）和一個清除浮動的元素。通過 overflow:hidden 清除了父容器內部浮動元素導致的高度塌陷問題，確保父容器能夠正確包裹浮動子元素。左浮動和右浮動元素分別向左和向右對齊，清除浮動的元素位于它們下方。

二、CSS3 定位（position）

知識點

1. **定義** ：定位用于指定元素在文檔中的位置，通過不同的定位方式可以實現復雜的布局效果。
2. **取值及特點** ：* `static` ：默認值，元素按照正常文檔流進行排列，不進行定位。* `relative` ：相對定位，元素相對于其正常位置進行偏移，不脫離文檔流，原位置保留。* `absolute` ：絕對定位，元素相對于最近的已定位（非 `static`）的祖先元素進行定位，脫離文檔流，原位置不保留。* `fixed` ：固定定位，元素相對于瀏覽器窗口進行定位，即使窗口滾動，元素位置不變。* `sticky` ：粘性定位，是一種相對定位和固定定位的混合，根據滾動位置來決定其行為方式。3. **定位屬性** ：* `top` 、`right` 、`bottom` 、`left` ：用于指定定位元素的位置偏移量。

案例代碼

<!DOCTYPE html>
<html>
<head><title>CSS3 定位案例</title><style>/* 相對定位元素 */.relative-box {position: relative;width: 200px;height: 200px;background-color: lightpink;top: 20px; /* 相對于原位置向下偏移 20px */left: 20px; /* 相對于原位置向左偏移 20px */}/* 絕對定位元素 */.absolute-box {position: absolute;width: 150px;height: 150px;background-color: lightcoral;top: 50px; /* 相對于最近的已定位祖先元素向下偏移 50px */left: 50px; /* 相對于最近的已定位祖先元素向左偏移 50px */}/* 固定定位元素 */.fixed-box {position: fixed;width: 100px;height: 100px;background-color: lightgreen;top: 10px; /* 相對于瀏覽器窗口向下偏移 10px */right: 10px; /* 相對于瀏覽器窗口向右偏移 10px */}/* 粘性定位元素 */.sticky-box {position: sticky;top: 10px; /* 當元素距離頂部 10px 時觸發粘性定位 */background-color: lightblue;padding: 10px;}</style>
</head>
<body><div class="relative-box">相對定位</div><div class="absolute-box">絕對定位</div><div class="sticky-box">粘性定位（滾動頁面可查看效果）</div><div style="height: 1500px;">（用于測試固定定位和粘性定位的長頁面內容）</div>
</body>
</html>

注釋 ：在這個案例中，我們展示了相對定位、絕對定位、固定定位和粘性定位的效果。相對定位的元素相對于自身原位置偏移；絕對定位的元素相對于最近的已定位祖先元素（如果沒有則相對于 body）定位；固定定位的元素始終相對于瀏覽器窗口定位，即使頁面滾動位置也不變；粘性定位的元素在滾動到一定位置時會切換為固定定位，常用于導航欄等需要在滾動過程中保持可見的元素。

以下是開發中常用的CSS3元素浮動與定位的實際具體案例：

CSS3 浮動實際案例

案例一：圖文混排

<!DOCTYPE html>
<html>
<head><title>圖文混排案例</title><style>.box {width: 150px;height: 100px;background-color: lightblue;float: left;margin-right: 15px;}p {line-height: 1.6;}</style>
</head>
<body><h1>圖文混排案例</h1><div class="box">圖片</div><p>這是一個圖文混排的案例。通過將圖片設置為左浮動，文字會自動環繞在圖片的右側。這種方式常用于文章中的插圖，使頁面布局更加美觀和緊湊。</p><p>CSS3 的浮動屬性使元素脫離正常文檔流，從而實現圖文混排的效果。在實際開發中，這種方法簡單實用，能夠快速實現所需的布局。</p>
</body>
</html>

注釋 ：在這個案例中，我們創建了一個浮動的 div 元素作為圖片，然后在后面添加了兩段文字。通過設置 float:left，圖片會向左浮動，文字則會自動環繞在圖片的右側，實現圖文混排的效果。這種方式在文章排版中非常常見，能夠使頁面布局更加美觀和緊湊。

案例二：兩欄布局

<!DOCTYPE html>
<html>
<head><title>兩欄布局案例</title><style>.container {width: 80%;margin: 0 auto;overflow: hidden;}.left {width: 30%;float: left;background-color: lightpink;padding: 10px;}.right {width: 70%;float: right;background-color: lightgreen;padding: 10px;}</style>
</head>
<body><div class="container"><div class="left">左側欄</div><div class="right">右側欄</div></div>
</body>
</html>

注釋 ：在這個案例中，我們創建了一個父容器 container，里面有兩個子元素 left 和 right。通過設置 float:left 和 float:right，分別將左側欄和右側欄向左和向右浮動，實現兩欄布局的效果。父容器通過 overflow:hidden 清除了內部浮動元素導致的高度塌陷問題，確保父容器能夠正確包裹浮動子元素。這種兩欄布局在網頁設計中非常常見，如博客、新聞網站等。

CSS3 定位實際案例

案例一：固定導航欄

<!DOCTYPE html>
<html>
<head><title>固定導航欄案例</title><style>.nav {position: fixed;top: 0;width: 100%;background-color: #333;color: white;padding: 10px 0;z-index: 100;}.nav ul {list-style-type: none;margin: 0;padding: 0;text-align: center;}.nav ul li {display: inline-block;margin: 0 15px;}.nav ul li a {color: white;text-decoration: none;}.content {margin-top: 60px; /* 為內容區域留出導航欄的高度 */padding: 20px;}</style>
</head>
<body><nav class="nav"><ul><li><a href="#">首頁</a></li><li><a href="#">關于我們</a></li><li><a href="#">產品中心</a></li><li><a href="#">聯系我們</a></li></ul></nav><div class="content"><h1>固定導航欄案例</h1><p>這是一個固定導航欄的案例。當用戶滾動頁面時，導航欄始終固定在頁面頂部，方便用戶隨時訪問各個頁面部分。</p><p>通過設置 `position:fixed` 和 `top:0`，導航欄會相對于瀏覽器窗口定位，即使頁面滾動，導航欄位置也不變。這種方式在實際開發中非常常見，能夠提高用戶體驗。</p><div style="height: 1500px;">（用于測試固定導航欄效果的長頁面內容）</div></div>
</body>
</html>

注釋 ：在這個案例中，我們創建了一個固定導航欄。通過設置 position:fixed 和 top:0，導航欄會相對于瀏覽器窗口定位，即使頁面滾動，導航欄位置也不變。這種方式在實際開發中非常常見，能夠提高用戶體驗，方便用戶隨時訪問各個頁面部分。

案例二：模態框

<!DOCTYPE html>
<html>
<head><title>模態框案例</title><style>.modal {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);display: none;z-index: 200;}.modal-content {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 400px;background-color: white;padding: 20px;border-radius: 5px;}.btn {display: inline-block;padding: 8px 15px;background-color: #333;color: white;text-decoration: none;border-radius: 3px;cursor: pointer;}</style>
</head>
<body><button class="btn" onclick="openModal()">打開模態框</button><div class="modal" id="myModal"><div class="modal-content"><h2>模態框</h2><p>這是一個模態框的案例。模態框會覆蓋在頁面內容之上，用戶必須與模態框交互后才能繼續操作頁面其他部分。</p><button class="btn" onclick="closeModal()">關閉</button></div></div><script>function openModal() {document.getElementById('myModal').style.display = 'block';}function closeModal() {document.getElementById('myModal').style.display = 'none';}</script>
</body>
</html>

注釋 ：在這個案例中，我們創建了一個模態框。通過設置 position:fixed 和 top:0、left:0，模態框會覆蓋在頁面內容之上，用戶必須與模態框交互后才能繼續操作頁面其他部分。模態框的內容通過 position:absolute 和 transform:translate(-50%, -50%) 居中顯示，這種方式在實際開發中非常常見，用于實現彈出窗口、提示框等效果。

案例三：粘性定位導航欄

<!DOCTYPE html>
<html>
<head><title>粘性定位導航欄案例</title><style>.nav {position: sticky;top: 0;width: 100%;background-color: #333;color: white;padding: 10px 0;z-index: 100;}.nav ul {list-style-type: none;margin: 0;padding: 0;text-align: center;}.nav ul li {display: inline-block;margin: 0 15px;}.nav ul li a {color: white;text-decoration: none;}.content {padding: 20px;}</style>
</head>
<body><nav class="nav"><ul><li><a href="#">首頁</a></li><li><a href="#">關于我們</a></li><li><a href="#">產品中心</a></li><li><a href="#">聯系我們</a></li></ul></nav><div class="content"><h1>粘性定位導航欄案例</h1><p>這是一個粘性定位導航欄的案例。當用戶滾動頁面到一定位置時，導航欄會固定在頁面頂部，方便用戶隨時訪問各個頁面部分。</p><p>通過設置 `position:sticky` 和 `top:0`，導航欄會在滾動到一定位置時切換為固定定位，這種方式在實際開發中非常常見，能夠提高用戶體驗。</p><div style="height: 1500px;">（用于測試粘性定位導航欄效果的長頁面內容）</div></div>
</body>
</html>

注釋 ：在這個案例中，我們創建了一個粘性定位導航欄。通過設置 position:sticky 和 top:0，導航欄會在滾動到一定位置時切換為固定定位，這種方式在實際開發中非常常見，能夠提高用戶體驗，方便用戶隨時訪問各個頁面部分。

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/74763.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/74763.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/74763.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

數據結構：漢諾塔問題的遞歸求解和分析

數據結構：漢諾塔問題的遞歸求解和分析

遞歸方法求解該類問題&#xff0c;是一種簡單的思維方法&#xff0c;通常比使用迭代方法更簡單。但是&#xff0c;遞歸方法也有劣勢。此處以典型的漢諾塔問題&#xff08;Tower of Hanoi&#xff09;為例給予說明。 漢諾塔是根據一個傳說形成的數學問題&#xff0c;最早是由法國…
閱讀更多...
3.27學習總結 算法題

3.27學習總結 算法題

自己用c語言做的&#xff0c;不盡如意 后面看了題解&#xff0c;用的是c&#xff0c;其中string 變量和字符串拼接感覺比c方便好多&#xff0c;可以用更少的代碼實現更好的效果&#xff0c;打算之后去學習c&#xff0c;用c寫算法。 遞歸&#xff0c;不斷輸入字符&#xff0c;…
閱讀更多...
vue 圖片放大到全局

vue 圖片放大到全局

背景&#xff1a; 在vue項目中&#xff0c;el-image組件圖片組件用于展示圖片&#xff0c;組件自帶的屬性preview-teleported&#xff0c;設置為true可以控制圖片放大到全局 實現效果&#xff1a; 核心代碼&#xff1a; //圖片地址&#xff1a;BASEUrl /file/ item.file //這…
閱讀更多...
【商城實戰(75)】數據分析指標體系搭建：從0到1的技術指南

【商城實戰(75)】數據分析指標體系搭建：從0到1的技術指南

【商城實戰】專欄重磅來襲&#xff01;這是一份專為開發者與電商從業者打造的超詳細指南。從項目基礎搭建&#xff0c;運用 uniapp、Element Plus、SpringBoot 搭建商城框架&#xff0c;到用戶、商品、訂單等核心模塊開發&#xff0c;再到性能優化、安全加固、多端適配&#xf…
閱讀更多...
seatunnel配置mysql2hive

seatunnel配置mysql2hive

SeaTunnel安裝教程 # 執行流程 # 下載&#xff0c;解壓 # https://mirrors.aliyun.com/apache/seatunnel/2.3.8/?spma2c6h.25603864.0.0.2e2d3f665eBj1E # https://blog.csdn.net/taogumo/article/details/143608532 tar -zxvf apache-seatunnel-2.3.8-bin.tar.gz -C /opt/mo…
閱讀更多...
SSH項目負載均衡中的Session一致性解決方案?

SSH項目負載均衡中的Session一致性解決方案?

SSH項目負載均衡中的Session一致性解決方案? 1. 粘性會話&#xff08;Session Sticky&#xff09;?2. Session復制&#xff08;集群同步&#xff09;?3. 集中式Session存儲?4. 客戶端存儲&#xff08;Cookie加密&#xff09;?方案選型建議?注意事項? 1. 粘性會話&#x…
閱讀更多...
MySQL 表連接（內連接與外連接）

MySQL 表連接（內連接與外連接）

&#x1f3dd;?專欄&#xff1a;Mysql_貓咪-9527的博客-CSDN博客 &#x1f305;主頁&#xff1a;貓咪-9527-CSDN博客 “欲窮千里目&#xff0c;更上一層樓。會當凌絕頂&#xff0c;一覽眾山小。” 目錄 1、表連接的核心概念 1.1 為什么需要表連接&#xff1f; 2、內連接&a…
閱讀更多...
解鎖Spring Boot異步編程：讓你的應用“飛“起來！

解鎖Spring Boot異步編程：讓你的應用“飛“起來！

引言&#xff1a;從點餐說起 &#x1f354; 想象你在快餐店點餐&#xff1a; 同步模式&#xff1a;排隊等餐&#xff0c;隊伍越來越長&#xff08;就像卡死的服務器&#xff09;異步模式&#xff1a;拿號后去旁邊坐著等&#xff08;服務員喊號通知你&#xff09; 今天我們就…
閱讀更多...
做一個有天有地的css及html畫的旋轉陰陽魚

做一個有天有地的css及html畫的旋轉陰陽魚

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>天地陰陽</title><style>/* 重置默認樣…
閱讀更多...
ngx_http_core_main_conf_t

ngx_http_core_main_conf_t

定義在 src\http\ngx_http_core_module.h typedef struct {ngx_array_t servers; /* ngx_http_core_srv_conf_t */ngx_http_phase_engine_t phase_engine;ngx_hash_t headers_in_hash;ngx_hash_t variables_hash;…
閱讀更多...
計算機二級（C語言）考試高頻考點總匯（二）—— 控制流、函數、數組和指針

計算機二級（C語言）考試高頻考點總匯（二）—— 控制流、函數、數組和指針

目錄 六、控制流 七、函數 八、數組和指針 六、控制流 76. if 語句可以&#xff08;嵌套&#xff09;&#xff0c; if 語句可以嵌套在另一個 if 語句內部&#xff0c;形成&#xff08;嵌套的條件判斷結構&#xff09;&#xff0c;用于處理更復雜的條件判斷邏輯。 77. els…
閱讀更多...
WebRTC協議全面教程：原理、應用與優化指南

WebRTC協議全面教程：原理、應用與優化指南

一、WebRTC協議概述 **WebRTC&#xff08;Web Real-Time Communication&#xff09;**是一種開源的實時通信協議&#xff0c;支持瀏覽器和移動應用直接進行音頻、視頻及數據傳輸&#xff0c;無需插件或第三方軟件。其核心特性包括&#xff1a; P2P傳輸&#xff1a;點對點直連…
閱讀更多...
使用 WSL + Ubuntu + Go + GoLand（VSCode） 開發環境配置指南

使用 WSL + Ubuntu + Go + GoLand（VSCode） 開發環境配置指南

1. 安裝和配置 WSL 與 Ubuntu 啟用 WSL 功能（以管理員身份運行 PowerShell）： wsl --install 或手動啟用： dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart dism.exe /online /enable-feature /featurename:VirtualMachi…
閱讀更多...
element-plus中，Tour 漫游式引導組件的使用

element-plus中，Tour 漫游式引導組件的使用

目錄 一.Tour 漫游式引導組件的簡單介紹 1.作用 2.基本使用 3.展示效果 二.實戰1&#xff1a;介紹患者病歷表單 1.要求 2.實現步驟 3.展示效果 結語 一.Tour 漫游式引導組件的簡單介紹 1.作用 快速了解一個功能/產品。 2.基本使用 從官網復制如下代碼&#xff1a; &…
閱讀更多...
39-Ajax工作原理

39-Ajax工作原理

1. 簡明定義開場 “AJAX(Asynchronous JavaScript and XML)是一種允許網頁在不重新加載整個頁面的情況下&#xff0c;與服務器交換數據并更新部分網頁內容的技術。它通過JavaScript的XMLHttpRequest對象或現代的Fetch API實現異步通信。” 2. 核心工作原理 "AJAX的工作…
閱讀更多...
Python 爬蟲案例

Python 爬蟲案例

以下是一些常見的 Python 爬蟲案例&#xff0c;涵蓋了不同的應用場景和技術點&#xff1a; 1. 簡單網頁內容爬取 案例&#xff1a;爬取網頁標題和簡介 import requests from bs4 import BeautifulSoup url "https://www.runoob.com/" response requests.get(url) …
閱讀更多...
【C++進階】函數：深度解析 C++ 函數的 12 大進化特性

【C++進階】函數：深度解析 C++ 函數的 12 大進化特性

目錄 一、函數基礎 1.1 函數定義與聲明 1.2 函數調用 1.3 引用參數 二、函數重載&#xff1a;同名函數的「多態魔法」&#xff08;C 特有&#xff09; 2.1 基礎實現 2.2 重載決議流程圖 2.3 與 C 語言的本質區別 2.4 實戰陷阱 三、默認參數&#xff1a;接口的「彈性設…
閱讀更多...
Redis的基礎，經典，高級問題解答篇

Redis的基礎，經典，高級問題解答篇

目錄 一&#xff0c;基礎 二&#xff0c;經典 緩存雪崩&#xff1a; 1. Redis事務的原子性 2. 與MySQL事務的區別 1. 主從復制原理 2. 哨兵模式故障轉移流程 3. 客戶端感知故障轉移 三&#xff0c;高級 一&#xff0c;基礎 Redis的5種基礎數據類型及使用場景&#xf…
閱讀更多...
【藍橋杯】好數

【藍橋杯】好數

好數 問題描述代碼解釋代碼 好數 問題描述 一個整數如果按從低位到高位的順序&#xff0c;奇數位 (個位、百位、萬位 ? ) 上的數字是奇數&#xff0c;偶數位 (十位、千位、十萬位 ? ) 上的數字是偶數&#xff0c;我們就稱之為 “好數”。 給定一個正整數 N&#xff0c;請計算…
閱讀更多...
利用 Patroni + etcd + HAProxy 搭建高可用 PostgreSQL 集群

利用 Patroni + etcd + HAProxy 搭建高可用 PostgreSQL 集群

在生產環境中&#xff0c;數據庫的高可用性是系統穩定運行的關鍵。本文將詳細講解如何利用 Docker 部署一個由 etcd、Patroni 和 HAProxy 組成的 PostgreSQL 高可用集群&#xff0c;實現自動故障轉移和負載均衡。 架構概述 本架構主要包括三部分&#xff1a; etcd 集群 etcd …
閱讀更多...
最新文章

Copyright @ 2022~2023