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
查看全部
你可能也想看
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
不論是平面設計、介面設計，都能見排版這一詞。而排版的作用，即在明確的設計目標中，將所有元素做有組織的安排，精確地傳達訊息。
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章教你如何製作側邊欄，包括準備工作、HTML和CSS的部分，還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。
1.加權指數與櫃買指數
週五的加權指數在非農就業數據開出來後，雖稍微低於預期，但指數仍向上噴出，在美股開盤後於21500形成一個爆量假突破後急轉直下，就一路收至最低。 台股方面走勢需觀察週一在斷頭潮出現後，週二或週三開始有無買單進場支撐，在沒有明確的反轉訊號形成前，小夥伴盡量不要貿然抄底，或是追空
重點摘要：
1.9 月降息 2 碼、進一步暗示年內還有 50 bp 降息
2.SEP 上修失業率預期，但快速的降息速率將有助失業率觸頂
3.未來幾個月經濟數據將繼續轉弱，經濟復甦的時點或是 1Q25 季底附近
近期的「貼文發佈流程 & 版型大更新」功能大家使用了嗎？
新版式整體視覺上「更加凸顯圖片」，為了搭配這次的更新，我們推出首次貼文策展 ❤️
使用貼文功能並完成這次的指定任務，還有機會獲得富士即可拍，讓你的美好回憶都可以用即可拍珍藏！
不論是平面設計、介面設計，都能見排版這一詞。而排版的作用，即在明確的設計目標中，將所有元素做有組織的安排，精確地傳達訊息。
CSS入門-Day3 的主要內容包括字體大小、字體顏色、字體系列、字體樣式、字體粗細等屬性。此外，還涵蓋了文本對齊、行高、文字間距、單詞間距和文本裝飾。最後，介紹了如何引入和使用 Google 字體，以提高網頁的排版效果。
CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
這篇文章教你如何製作側邊欄，包括準備工作、HTML和CSS的部分，還有一些互動效果。文章涵蓋了連結、圖片、超連結、大小、顏色、排版、flex和滑鼠互動等內容。
如何透過 CSS 來美化和增強文本的可讀性，對於提升用戶體驗至關重要。本文將介紹如何使用 CSS 來處理網頁上的文本，包括字型設定、文本排列、裝飾等多方面。