CSS學習（五）——區塊、浮動、定位、溢位、滾動條
阿新 • • 發佈：2019-01-25
區塊
佔據一整行的標記叫做區塊。例如：
<p>...</p>
<div>...</div>
只要是區塊，可以使用如下屬性名稱：
| 屬性名稱 | 設定值 | 說明 |
| width | 畫素/百分比 | 區塊的寬度 |
| height | 畫素/百分比 | 區塊的高度 |
| min-height | 畫素/百分比 | 區塊的最小高度 |
| max-height | 畫素/百分比 | 區塊的最大高度 |
| min-width | 畫素/百分比 | 區塊的最小寬度 |
| max-width | 畫素/百分比 | 區塊的最大寬度 |
下面例子可以體現區塊的含義以及各種屬性的意義：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>區塊、浮動、定位、溢位、滾動條</title> <style type="text/css"> div{background-color:pink;width:50%;min-height:50px;max-height:100px} </style> </head> <body> <div>CSS區塊、浮動、定位、溢位、滾動條<br /> CSS區塊、浮動、定位、溢位、滾動條<br /> CSS區塊、浮動、定位、溢位、滾動條<br /> CSS區塊、浮動、定位、溢位、滾動條<br /> CSS區塊、浮動、定位、溢位、滾動條<br /> CSS區塊、浮動、定位、溢位、滾動條<br /> CSS區塊、浮動、定位、溢位、滾動條<br /> </body> </html>
浮動
| 屬性名稱 | 設定值 | 說明 |
| float | none | 正常顯示 |
| left | 元件往左邊浮動 | |
| right | 元件往右邊浮動 | |
| clear | none | 允許元件左右浮動 |
| left/right | 不允許元件往左/右邊浮動 | |
| both | 不允許元件兩邊浮動 |
往左/右邊浮動的意思是：如果視窗足夠寬，那麼元件會盡量擠佔上面的位置，與前面的元件並列顯示。
注意，如果有多個元件，前面的元件使用了float屬性，後面的元件如果不使用float，那麼需要新增clear:both屬性，否則該元件會被前面的元件覆蓋。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>區塊、浮動、定位、溢位、滾動條</title> <style type="text/css"> .div1{width:100px;height:100px;background-color:red;float:left;} .div2{width:100px;height:100px;background-color:pink;float:left;} .div3{width:100px;height:100px;background-color:black;clear:both;} </style> </head> <body> <div class="div1"></div> <div class="div2"></div> <div class="div3"></div> </body> </html>
定位
| 屬性名稱 | 設定值 | 說明 |
| position | relative | 設定區塊左上角為基準點來移動 |
| absolute | 設定網頁左上角為基準點來移動 | |
| left | 畫素/百分比 | 基準點距離左邊界移動多少 |
| top | 畫素/百分比 | 基準點距離上邊界移動多少 |
| right | 畫素/百分比 | 基準點距離右邊界移動多少 |
| bottom | 畫素/百分比 | 基準點距離下邊界移動多少 |
| z-index | 數字 | 數字越大層級越高。 |
注一：position屬性與margin-left/right/top-bottom屬性的區別在於，position讓元件在移動的過程中不影響周圍其他元件的位置，不會讓其他元件的位置發生變化，而margin屬性在移動元件時，會讓其他緊挨著該元件的元件位置也一起發生變化。
注二：設定值relative與absolute的區別在於：1.當設定為relative時，left/top/right/bottom裡設定的數值是元件距離外部邊框的水平或垂直距離，當設定為absolute時，left/top/right/bottom裡設定的數值是元件距離外部邊框左上角的斜角距離；2. 當設定為relative時，元件移動後，緊挨元件的其他元件不會佔用該元件原本的位置，也即元件原本的位置仍然保留在網頁上，當設定為absolute時，元件移動後，緊挨元件的其他元件會自動頂上佔據它的位置。
注三：屬性z-index的作用是，當position的設定值為absolute時，決定重疊的元件疊放的順序。
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{padding:0;margin:0;}
#contion{height:300px;width:300px;border:1px solid black;background:pink;position:relative;left:20px;top:20px;}
#contion p{position:absolute;left:10px;top:10px;}
</style>
<title>複習</title>
</head>
<body>
<div ID="contion">
<p>PHP100.COM中文網</p>
</div>
</body>05/11補充例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{padding:0;margin:0;}
#contion{height:300px;width:300px;border:1px solid black;background:pink;position:relative;left:20px;top:20px;}
#contion p{position:absolute;left:10px;top:10px;}
</style>
<title>複習</title>
</head>
<body>
<div ID="contion">
<p>複習區塊</p>
</div>
</body>溢位
當物件（區塊）內放置的內容溢位了物件時，可以通過以下屬性自動給區塊新增滾動條：| 屬性名稱 | 設定值 | 說明 |
| overflow | auto | 在必需時物件內容才會被裁切或新增滾動條 |
| hidden | 不顯示超過物件尺寸的內容 | |
| scroll | 總是顯示滾動條 | |
| overflow-x | （同上） | |
| overflow-y | （同上） |
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>區塊、浮動、定位、溢位、滾動條</title>
<style type="text/css">
div{width:200px;height:100px;background-color:pink;overflow:auto;}
</style>
</head>
<body>
<div>CSS區塊、浮動、定位、溢位、滾動條
CSS區塊、浮動、定位、溢位、滾動條
CSS區塊、浮動、定位、溢位、滾動條
CSS區塊、浮動、定位、溢位、滾動條
</div>
</body>
</html>滾動條的外觀屬性
| 屬性名稱 | 設定值 | 說明 |
| scrollbar-3dlight-color | 十六進位制/英文 | 滾動條亮邊框 |
| scrollbar-highlight-color | 十六進位制/英文 | 滾動條3D 介面亮邊 |
| scrollbar-face-color | 十六進位制/英文 | 滾動條3D 表面 |
| scrollbar-arrow-color | 十六進位制/英文 | 滾動條方向箭頭 |
| scrollbar-shadow-color | 十六進位制/英文 | 滾動條3D 暗邊 |
| scrollbar-darkshadow-color | 十六進位制/英文 | 滾動條暗邊框 |
| scrollbar-base-color | 十六進位制/英文 | 滾動條基準顏色 |
| scrollbar-track-color | 十六進位制/英文 | 滾動條的拖動區域 |