032_CSS定位
1. CSS定位屬性允許你對元素進行定位。
2. CSS定位和浮動
2.1. CSS為定位和浮動提供了一些屬性, 利用這些屬性, 可以建立列式布局, 將布局的一部分與另一部分重疊, 還可以完成多年來通常需要使用多個表格才能完成的任務。
2.2. 定位的基本思想很簡單, 它允許你定義元素框相對于其正常位置應該出現的位置, 或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。
2.3. 另一方面, CSS1中首次提出了浮動, 它以Netscape在Web發展初期增加的一個功能為基礎。浮動不完全是定位, 不過, 它當然也不是正常流布局。
3. 一切皆為框
3.1. div、h1或p元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內容, 即"塊框"。
3.2. span和strong等元素稱為"行內元素", 這是因為它們的內容顯示在行中, 即"行內框"。
3.3. 行內框在一行中水平布置, 這樣由一行形成的水平框稱為行框(Line Box), 行框的高度總是足以容納它包含的所有行內框。不過, 設置行高可以增加這個框的高度。
3.4. 但是在一種情況下, 即使沒有進行顯式定義, 也會創建塊級元素。這種情況發生在把一些文本添加到一個塊級元素(比如: div)的開頭。即使沒有把這些文本定義為段落, 它也會被當作段落對待:
<div> some text <p>Some more text.</p> </div>3.5. 在這種情況下, 這個框稱為無名塊框, 因為它不與專門定義的元素相關聯。
3.6. 塊級元素的文本行也會發生類似的情況。假設有一個包含三行文本的段落。每行文本形成一個無名框。無法直接對無名塊或行框應用樣式, 因為沒有可以應用樣式的地方。但是, 這有助于理解在屏幕上看到的所有東西都形成某種框。
3.7. 行內框例子
3.7.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>行內框</title><style type="text/css">* {margin: 0;padding: 0;}div {margin: 10px;border: solid 1px;}span {background: #FF0000;line-height: 120px;}img {background: #FFFF00;}</style></head><body><div><span>行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素</span><img src="MagicBtn.png" /><span>行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素行內元素</span></div></body> </html>3.7.1. 效果圖
4. display屬性
4.1. display屬性規定元素應該生成的框的類型。這意味著, 通過將display屬性設置為block, 可以讓行內元素(比如: 元素)表現得像塊級元素一樣。還可以通過把display設置為 none, 讓生成的元素根本沒有框, 這樣的話, 該框及其所有內容就不再顯示, 不占用文檔中的空間。
4.2. display屬性默認值
4.3. display可能的值
5. CSS定位機制
5.1. CSS有三種基本的定位機制: 普通流、浮動和絕對定位。
5.2. 除非專門指定, 否則所有框都在普通流中定位。也就是說, 普通流中的元素的位置由元素在(x)html中的位置決定。
6. position屬性
6.1. 通過使用position屬性, 我們可以選擇4種不同類型的定位, 這會影響元素框生成的方式。
6.2. 默認值
6.3. 可能值
7. top屬性
7.1. 定義和用法
?7.1.1. top屬性規定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
?7.1.2. 如果"position"屬性的值為"static", 那么設置"top"屬性不會產生任何效果, 它的值始終為auto。
7.2. 默認值
7.3. 可能的值
8. right屬性
8.1. 定義和用法
?8.1.1. right屬性規定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
?8.1.2. 如果"position"屬性的值為"static", 那么設置"right"屬性不會產生任何效果, 它的值始終為auto。
8.2. 默認值
8.3. 可能的值
9. bottom屬性
9.1. 定義和用法
?9.1.1. bottom屬性規定元素的底部邊緣。該屬性定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
?9.1.2. 如果"position"屬性的值為"static", 那么設置"bottom"屬性不會產生任何效果, 它的值始終為auto。
9.2. 默認值
9.3. 可能的值
10.?left屬性
10.1. 定義和用法
?10.1.1. left屬性規定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
?10.1.2. 如果"position"屬性的值為"static", 那么設置"left"屬性不會產生任何效果, 它的值始終為auto。
10.2. 默認值
10.3. 可能的值
11. overflow屬性
11.1. 定義和用法
?11.1.1. overflow屬性規定當內容溢出元素框時發生的事情。
?11.1.2. 這個屬性定義溢出元素內容區的內容會如何處理。如果值為scroll, 不論是否需要, 用戶代理都會提供一種滾動機制。因此, 有可能即使元素框中可以放下所有內容也會出現滾動條。
11.2. 默認值
11.3. 可能的值
11.4. 例子
11.4.1. 代碼
<!DOCTYPE html> <html><head><title>overflow屬性</title><meta charset="utf-8" /><style type="text/css">div {background-color: #00FFFF;width: 150px;height: 150px;margin: 20px;}</style></head><body><div style="overflow: visible; float: left;">visible默認值。內容不會被修剪, 會呈現在元素框之外。visible默認值。內容不會被修剪, 會呈現在元素框之外。visible默認值。內容不會被修剪, 會呈現在元素框之外。</div><div style="overflow: hidden; float: left;">hidden內容會被修剪, 并且其余內容是不可見的。hidden內容會被修剪, 并且其余內容是不可見的。hidden內容會被修剪, 并且其余內容是不可見的。</div><div style="overflow: scroll; float: left;">scroll內容會被修剪, 但是瀏覽器會顯示滾動條以便查看其余的內容。scroll內容會被修剪, 但是瀏覽器會顯示滾動條以便查看其余的內容。scroll內容會被修剪, 但是瀏覽器會顯示滾動條以便查看其余的內容。</div><div style="overflow: auto; float: left;">auto如果內容被修剪, 則瀏覽器會顯示滾動條以便查看其余的內容。</div><div style="overflow: auto; float: left;">auto如果內容被修剪, 則瀏覽器會顯示滾動條以便查看其余的內容。auto如果內容被修剪, 則瀏覽器會顯示滾動條以便查看其余的內容。auto如果內容被修剪, 則瀏覽器會顯示滾動條以便查看其余的內容。</div></body> </html>11.4.2. 效果圖
12.?visibility屬性
12.1. visibility屬性規定元素是否可見。
12.2. 即使不可見的元素也會占據頁面上的空間。請使用"display"屬性來創建不占據頁面空間的不可見元素。
12.3. 當在表格元素中使用時, 此值可刪除一行或一列, 但是它不會影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上, 會呈現為"hidden"。
12.4. 默認值
12.5. 可能的值
12.6. 例子
12.6.1. 代碼
<!DOCTYPE html> <html><head><title>規定元素是否可見</title><meta charset="utf-8" /><style type="text/css">h1 {visibility: hidden;}table, td {border: 1px solid black;}</style></head><body><h1>visibility屬性規定元素是否可見。</h1><h2 style="visibility: visible;">即使不可見的元素也會占據頁面上的空間。請使用"display"屬性來創建不占據頁面空間的不可見元素。</h2><table><tr><td>visible默認值。元素是可見的。</td></tr><tr style="visibility: collapse;"><td>hidden元素是不可見的。</td></tr><tr><td>當在表格元素中使用時, 此值可刪除一行或一列, 但是它不會影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上, 會呈現為"hidden"。</td></tr></table></body> </html>12.6.2. 效果圖
13.?vertical-align屬性
13.1. vertical-align屬性設置元素的垂直對齊方式。
13.2. 默認值
13.3. 可能的值
13.4. 例子
13.4.1. 代碼
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>元素的垂直對齊方式</title><style type="text/css">td {width: 500px;height: 90px; background-color: #F0F0F0;}</style></head><body><table><tr><td>不使用vertical-align</td><td style="vertical-align: inherit;">inherit規定應該從父元素繼承vertical-align屬性的值。</td></tr><tr><td>super<span style="vertical-align: super;">垂直對齊文本的上標。</span></td><td>sub<span style="vertical-align: sub;">垂直對齊文本的下標。</span></td></tr><tr><td>text-top把元素的頂端與父元素<img style="vertical-align: text-top;" src="MagicBtn.png" />字體的頂端對齊。</td><td>text-bottom把元素的底端與父元素<img style="vertical-align: text-bottom;" src="MagicBtn.png" />字體的底端對齊。</td></tr><tr><td style="vertical-align: baseline;">baseline把元素放置在父元素的基線上。</td><td style="vertical-align: top;">top把此元素放置在父元素的頂端。</td></tr><tr><td style="vertical-align: middle;">middle把此元素放置在父元素的中部。</td><td style="vertical-align: bottom;">bottom把此元素放置在父元素的底端。</td></tr></table></body> </html>13.4.2. 效果圖
14.?cursor屬性
14.1. cursor屬性規定要顯示的光標的類型(形狀)。
14.2. 默認值
14.3. 可能的值
14.4. 例子
14.4.1. 代碼
<!DOCTYPE html> <html><head><title>規定要顯示的光標的類型</title><meta charset="utf-8" /></head><body><h1>cursor屬性規定要顯示的光標的類型(形狀)。</h1><p style="cursor: default;">default默認光標(通常是一個箭頭)。</p><p style="cursor: auto;">auto默認。瀏覽器設置的光標。</p><p style="cursor: crosshair;">crosshair光標呈現為十字線。</p><p style="cursor: pointer;">pointer光標呈現為指示鏈接的指針(一只手)。</p><p style="cursor: move;">move此光標指示某對象可被移動。</p><p style="cursor: text;">text此光標指示文本。</p><p style="cursor: wait;">wait此光標指示程序正忙(通常是一只表或沙漏)。</p><p style="cursor: help;">help此光標指示可用的幫助(通常是一個問號或一個氣球)。</p></body> </html>14.4.2. 效果圖
總結
- 上一篇： 030_CSS外边距合并
- 下一篇： 033_CSS相对定位