IT課程 CSS基礎 028_浮動、定位、對齊
浮動
在 CSS 中，浮動是一種佈局技術，通過 float 屬性來使元素在頁面中沿著容器的左側或右側浮動，使得其他元素能夠環繞它。
示例：
.div-left { float: left; } .div-right { float: right; } <div class="div-left">div-left</div> <div class="div-right">div-right</div>效果： 
浮動元素可能導致父元素的高度塌陷，可能導致其他DIV的元素受到影響，多個浮動元素在同一行可能會重疊，需要使用 clear 屬性來控制它們之間的影響。
示例：
.div-left { float: left; } .div-right { float: right; } /* 使用 `clear` 屬性取消浮動元素影響 .content { clear: both; } */ <div class="div-left">div-left</div> <div class="div-right">div-right</div>
<div class="content"> 這是一段會受影響的文字。 </div>效果： 
示例：
.float-left { float: left; } .float-right { float: right; } <img class="float-left" src="zhaojian1.jpg" alt="" srcset=""> <div class="float-right">2024年1月25日</div><div class="float-right">文章標題文章標題文章標題</div>效果：
浮動是早期用於創建多欄佈局的一種技術，但現代佈局中，通常更推薦使用 Flexbox 或 Grid 等更靈活的佈局技術。
定位
在 CSS 中，定位是指通過 position 屬性來設置元素的定位方式，以及通過 top、right、bottom、left 屬性來指定元素相對於其最近的已定位的父級元素們的位置。
- 定位是相對於最近的已定位（position 不是
static）祖先元素進行的。如果沒有已定位的祖先元素，則相對於初始包含塊（通常是<html>元素）進行定位。 - 絕對定位和固定定位的元素會脫離正常的文檔流，可能影響其他元素的佈局。
- 屬性值通常使用像素（
px）或百分比（%）。
靜態定位 static
靜態定位（Static Positioning）是position屬性的默認值，通常不需要顯式指定。靜態定位的元素在文檔流中正常排列，不受 top、right、bottom、left 屬性的影響。
初始定位 initial
在 CSS 中，initial 是一個用於將屬性值重置為其初始值的關鍵字。對於 position 屬性，其初始值是 static。使用 position: initial; 相當於不設置 position 屬性。
相對定位 relative
元素相對於其正常位置進行定位。
示例：
.base { width: 200px; height: 200px; background-color: aquamarine; } .relative-example { position: relative; top: 100px; left: 20%; } <!-- <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> 嘗試加br或其他元素 --> <div class="base relative-example"></div>效果： 
絕對定位 absolute
元素相對於其最近的已定位祖先元素進行定位。
示例：
.base { width: 200px; height: 200px; } .absolute-example { position: absolute; top: 50px; left: 100px; background-color: blueviolet; } <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <div class="base absolute-example"></div>效果：
固定（附著）定位 fixed
元素相對於瀏覽器窗口進行定位，始終保持在屏幕的固定位置。
示例：
.base { width: 200px; height: 200px; } .fixed-example { position: fixed; bottom: 40%; left: 40%; background-color: gold; } <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <div class="base fixed-example"></div> <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>效果：
粘性定位 sticky
元素在滾動到特定位置時變為固定定位，否則為相對定位。
示例：
.base { width: 200px; height: 200px; } .sticky-example { position: sticky; top: 10%; left: 40%; background-color: darkcyan; } <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <div class="base sticky-example"></div> <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br> <br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>效果：
繼承（固有）定位 inherit
元素在滾動到特定位置時變為固定定位，否則為相對定位。
示例：
.base { width: 200px; height: 200px; } .inherit-example { position: inherit; top: 100%; /* 注意邊界處 */ left: 100%; /* 注意邊界處 */ background-color: violet; } <div class="base relative-example"> <div class="base inherit-example"></div> </div>效果： 
層疊順序（重疊元素）
z-index 是 CSS 中用於控制層疊順序（層疊順序）的屬性。它決定了一個元素在垂直堆疊上的顯示順序，即哪個元素會在哪個元素的前面或後面。
z-index值可以是負數。z-index較大的元素將覆蓋較小的元素。z-index僅在定位元素（position不是static）上有效z-index需要元素的opacity設置非 0
示例：
.base { width: 200px; height: 200px; position: absolute; } .z-index-example1{ background-color: red; z-index: 9; } .z-index-example2{ background-color: blue; z-index: 1; } <div class="base z-index-example1"></div> <div class="base z-index-example2"></div>對齊
CSS 對齊是指通過 CSS 屬性來控制元素的水平和垂直對齊方式。CSS 對齊屬性可以應用於任何元素，包括文字、圖像、表格、列表等。
常見對齊屬性有以下幾個值：
- left：左對齊
- center：居中對齊
- right：右對齊
- top：頂部對齊
- middle：居中對齊
- bottom：底部對齊
水平對齊 text-align
用於設置文本內容在元素框中的水平對齊方式。
示例：
.text-center { text-align: center; /* 水平居中對齊 */}.text-left { text-align: left; /* 左對齊 */}.text-right { text-align: right; /* 右對齊 */}.text-justify { text-align: justify; /* 兩端對齊 */} <div class="text-center">這是一段話 ABCDE 12345</div> <div class="text-left">這是一段話 ABCDE 12345</div> <div class="text-right">這是一段話 ABCDE 12345</div> <div class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod velit vel sapien accumsan, ac efficitur nulla bibendum. Nullam posuere fermentum nulla, in ultricies leo gravida sit amet. Vestibulum ut mi vitae libero accumsan dapibus.</div>效果： 
垂直對齊 vertical-align
用於設置元素內部的行內元素在垂直方向上的對齊方式。通常用於行內元素，對塊級元素沒有直接影響。
示例：
.base{ height: 150px;}.vertical-align-baseline { vertical-align: baseline; /* 默認基線對齊 */}.vertical-align-top { vertical-align: top; /* 頂部對齊 */}.vertical-align-middle { vertical-align: middle; /* 中部對齊 */}.vertical-align-bottom { vertical-align: bottom; /* 底部對齊 */} <div class="base"> <img class="vertical-align-baseline" src="zhaojian1.jpg" alt="" srcset="">這是一段話 ABCDE 12345 </div> <div class="base"> <img class="vertical-align-top" src="zhaojian1.jpg" alt="" srcset="">這是一段話 ABCDE 12345 </div> <div class="base"> <img class="vertical-align-middle" src="zhaojian1.jpg" alt="" srcset="">這是一段話 ABCDE 12345 </div> <div class="base"> <img class="vertical-align-bottom" src="zhaojian1.jpg" alt="" srcset="">這是一段話 ABCDE 12345 </div>效果： 
