CSS入門-Day6：佈局（一）
閱讀時間約 10 分鐘
基本用法
- 浮動到左邊：
.float-left {
float: left;
} - 浮動到右邊：
.float-right {
float: right;
} - 清除浮動： 當父元素內的所有子元素都浮動時，父元素的高度會塌陷，可以使用
clear屬性來清除浮動。.clear {
clear: both;
}
示例
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮動佈局示例</title>
<style>
.container {
border: 1px solid #ccc;
}
.box {
width: 100px;
height: 100px;
margin: 10px;
}
.float-left {
float: left;
background-color: lightblue;
}
.float-right {
float: right;
background-color: lightgreen;
}
.clear {
clear: both;
}
</style>
</head>
<body>
<div class="container">
<div class="box float-left">左浮動</div>
<div class="box float-right">右浮動</div>
<div class="clear"></div>
</div>
</body>
</html>
定位
CSS 定位允許我們精確控制元素的位置，有五種主要的定位方式：靜態定位（default）、相對定位、絕對定位、固定定位和粘性定位。
靜態定位（Static Positioning）
這是默認的定位方式，元素按照正常的文檔流進行佈局。
.static {
position: static;
}
相對定位（Relative Positioning）
元素相對於其正常位置進行定位。
.relative {
position: relative;
top: 10px; /* 向下移動10px */
left: 20px; /* 向右移動20px */
}
絕對定位（Absolute Positioning）
元素相對於最近的已定位祖先元素進行定位。如果沒有已定位的祖先，則相對於初始包含塊（通常是<body>）。
.absolute {
position: absolute;
top: 10px;
left: 20px;
}
固定定位（Fixed Positioning）
元素相對於瀏覽器窗口進行定位，當頁面滾動時，元素保持在固定位置。
.fixed {
position: fixed;
bottom: 10px;
right: 20px;
}
粘性定位（Sticky Positioning）
元素在超出指定的偏移量之前是相對定位的，之後變為固定定位。
.sticky {
position: sticky;
top: 0;
}
示例
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定位示例</title>
<style>
.container {
height: 300px;
border: 1px solid #ccc;
position: relative;
}
.static {
position: static;
background-color: lightblue;
}
.relative {
position: relative;
top: 10px;
left: 20px;
background-color: lightgreen;
}
.absolute {
position: absolute;
top: 10px;
left: 20px;
background-color: lightcoral;
}
.fixed {
position: fixed;
bottom: 10px;
right: 20px;
background-color: lightpink;
}
.sticky {
position: sticky;
top: 0;
background-color: lightyellow;
}
</style>
</head>
<body>
<div class="container">
<div class="static">靜態定位</div>
<div class="relative">相對定位</div>
<div class="absolute">絕對定位</div>
<div class="sticky">粘性定位</div>
</div>
<div class="fixed">固定定位</div>
</body>
</html>
z-index
z-index 屬性用於控制定位元素的堆疊順序，數值越大，元素越在上層。只適用於已定位的元素（即 position 為 relative、absolute、fixed 或 sticky）。
使用範例
.layer1 {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
.layer2 {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2;
}
示例
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>z-index 示例</title>
<style>
.container {
position: relative;
width: 200px;
height: 200px;
background-color: lightgray;
}
.layer1 {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background-color: red;
z-index: 1;
}
.layer2 {
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
background-color: blue;
z-index: 2;
}
</style>
</head>
<body>
<div class="container">
<div class="layer1">Layer 1</div>
<div class="layer2">Layer 2</div>
</div>
</body>
</html>
在這個例子中，紅色的方塊位於藍色方塊的下面，因為它的 z-index 值較小。
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
不論是平面設計、介面設計，都能見排版這一詞。而排版的作用，即在明確的設計目標中，將所有元素做有組織的安排，精確地傳達訊息。
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章教你如何製作側邊欄，包括準備工作、HTML和CSS的部分，還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Hi 大家好，我是Ethan😊
相近大家都知道保濕是皮膚保養中最基本，也是最重要的一步。無論是在畫室裡長時間對著畫布，還是在旅途中面對各種氣候變化，保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水，還能提升後續保養品的吸收效率。
曾經，我的保養程序簡單到只包括清潔和隨意上乳液
不論是平面設計、介面設計，都能見排版這一詞。而排版的作用，即在明確的設計目標中，將所有元素做有組織的安排，精確地傳達訊息。
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章教你如何製作側邊欄，包括準備工作、HTML和CSS的部分，還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。