別再等 Win11 22H1 了，訊息稱微軟下一個 Windows 11 大版本明年 10 月份釋出
1.元素的浮動屬性 float
屬性值 描述
left 元素左浮動
right 元素右浮動
none 元素不浮動（預設值）
2.清除浮動
選擇器{clear：屬性值；}
屬性值 描述
left 不允許左側有浮動元素
right 不允許右側有浮動元素
both 同時清除左右兩側元素浮動
3.overflow屬性
選擇器{overflow}
屬性值 描述
visible 內容不會被剪下，會呈現在元素框外面
hidden 溢位內容會被剪下，且別剪下的內容不會再顯示
auto 在需要時產生滾動條，及自適應所要顯示的內容
scroll 溢位的內容會被剪下，且瀏覽器會始終顯示滾動條
visible
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> div{ width: 100px; height: 40px; background-color: burlywood; overflow: visible; /* 溢位內容呈現的在元素框外 */ } </style> </head> <body> <div> 當盒子內的元素超出盒子自身的大小的時候就會溢位如果要顯示溢位內容的顯示方式，就需要使用overflow屬性，它用於規範元素中溢位內容的顯示方式 </div> </body> </html>
overflow：hidden；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> div{ width: 100px; height: 40px; background-color: burlywood; overflow: hidden; /* 溢位內容呈現的在元素框外 */ } </style> </head> <body> <div> 當盒子內的元素超出盒子自身的大小的時候就會溢位如果要顯示溢位內容的顯示方式，就需要使用overflow屬性，它用於規範元素中溢位內容的顯示方式 </div> </body> </html>
overflow: auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> div{ width: 100px; height: 40px; background-color: burlywood; overflow: auto; /* 溢位內容呈現的在元素框外 */ } </style> </head> <body> <div> 當盒子內的元素超出盒子自身的大小的時候就會溢位如果要顯示溢位內容的顯示方式，就需要使用overflow屬性，它用於規範元素中溢位內容的顯示方式 </div> </body> </html>
overflow: scroll;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> div{ width: 100px; height: 140px; background-color: burlywood; overflow: scroll; /* 溢位內容呈現的在元素框外 */ } </style> </head> <body> <div> 當盒子內的元素超出盒子自身的大小的時候就會溢位如果要顯示溢位內容的顯示方式，就需要使用overflow屬性，它用於規範元素中溢位內容的顯示方式 </div> </body> </html>
4.元素的定位
選擇器{position：屬性值；}
值 描述
static 靜態定位（預設定位方式）
relative 相對定位，相對於其原文件流的位置進行定位
absolute 絕對定位，相對於其上一個已定位的父元素定位
fixed 固定定位，先對於瀏覽器視窗進行定位
邊偏移屬性 描述
top 頂端偏移量，定位元素相對於其父元素上邊線的距離
bottom 底部偏移量，定位元素相對於其父元素下邊線的距離
left 左側偏移量，定位元素相對於其父元素左邊線的距離
right 右側偏移量，定位元素相對於其父元素右邊線的距離
靜態定位 static
靜態定位是元素預設定位方式，當position屬性的取值為static時，可以將元素定位於靜態位置。就是HTML中的預設位置
任何元素在預設狀態下都會以靜態定位來確認那自己的位置，所以沒有定義position屬性時並不說明該元素沒有自己的位置，會遵循預設的靜態位置，靜態位置下無法通過邊偏移屬性來改變元素位置
相對定位 relative
相對定位 relative相對於其原文件流的位置進行定位，當position屬性的取值為relative時，可以將元素定位於相對位置。對元素相對定位後，可以通過邊偏移屬性去改變位置，但是他在文件流中的位置
仍然保留
絕對定位absolute
絕對定位是將元素一句已定位的父元素進行定位，若父元素沒有定位就會依據body根元素進行定位。absolute可以將元素的定位模式設定為絕對定位
固定定位fixed
固定定位是絕對定位的一種特殊形式，他以瀏覽器視窗作為參照物來的那個一網頁元素。當使用fixed元素時，即可將元素的定位模式設定為絕對定位
當元素設定固定定位後，他將脫離標準文件流的控制，始終依據瀏覽器視窗倆定義自己的始終位置，不管瀏覽器滾動條如何滾動，也不管瀏覽器視窗的大小如何變化，該元素都會始終顯示在瀏覽器視窗的固定位置。