當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

032_CSS定位

發(fā)布時間：2025/4/17 CSS 72 豆豆

生活随笔收集整理的這篇文章主要介紹了 032_CSS定位小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

1. CSS定位屬性允許你對元素進行定位。

2. CSS定位和浮動

2.1. CSS為定位和浮動提供了一些屬性, 利用這些屬性, 可以建立列式布局, 將布局的一部分與另一部分重疊, 還可以完成多年來通常需要使用多個表格才能完成的任務(wù)。

2.2. 定位的基本思想很簡單, 它允許你定義元素框相對于其正常位置應(yīng)該出現(xiàn)的位置, 或者相對于父元素、另一個元素甚至瀏覽器窗口本身的位置。

2.3. 另一方面, CSS1中首次提出了浮動, 它以Netscape在Web發(fā)展初期增加的一個功能為基礎(chǔ)。浮動不完全是定位, 不過, 它當(dāng)然也不是正常流布局。

3. 一切皆為框

3.1. div、h1或p元素常常被稱為塊級元素。這意味著這些元素顯示為一塊內(nèi)容, 即"塊框"。

3.2. span和strong等元素稱為"行內(nèi)元素", 這是因為它們的內(nèi)容顯示在行中, 即"行內(nèi)框"。

3.3. 行內(nèi)框在一行中水平布置, 這樣由一行形成的水平框稱為行框(Line Box), 行框的高度總是足以容納它包含的所有行內(nèi)框。不過, 設(shè)置行高可以增加這個框的高度。

3.4. 但是在一種情況下, 即使沒有進行顯式定義, 也會創(chuàng)建塊級元素。這種情況發(fā)生在把一些文本添加到一個塊級元素(比如: div)的開頭。即使沒有把這些文本定義為段落, 它也會被當(dāng)作段落對待:

3.5. 在這種情況下, 這個框稱為無名塊框, 因為它不與專門定義的元素相關(guān)聯(lián)。

3.6. 塊級元素的文本行也會發(fā)生類似的情況。假設(shè)有一個包含三行文本的段落。每行文本形成一個無名框。無法直接對無名塊或行框應(yīng)用樣式, 因為沒有可以應(yīng)用樣式的地方。但是, 這有助于理解在屏幕上看到的所有東西都形成某種框。

3.7. 行內(nèi)框例子

3.7.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>行內(nèi)框</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>行內(nèi)元素行內(nèi)元素行內(nèi)元素行內(nèi)元素行內(nèi)元素行內(nèi)元素行內(nèi)元素行內(nèi)元素行內(nèi)元素行內(nèi)元素</span><img src="MagicBtn.png" /><span>行內(nèi)元素行內(nèi)元素行內(nèi)元素行內(nèi)元素行內(nèi)元素行內(nèi)元素行內(nèi)元素行內(nèi)元素行內(nèi)元素行內(nèi)元素</span></div></body> </html>

3.7.1. 效果圖

4. display屬性

4.1. display屬性規(guī)定元素應(yīng)該生成的框的類型。這意味著, 通過將display屬性設(shè)置為block, 可以讓行內(nèi)元素(比如: 元素)表現(xiàn)得像塊級元素一樣。還可以通過把display設(shè)置為 none, 讓生成的元素根本沒有框, 這樣的話, 該框及其所有內(nèi)容就不再顯示, 不占用文檔中的空間。

4.2. display屬性默認(rèn)值

4.3. display可能的值

5. CSS定位機制

5.1. CSS有三種基本的定位機制: 普通流、浮動和絕對定位。

5.2. 除非專門指定, 否則所有框都在普通流中定位。也就是說, 普通流中的元素的位置由元素在(x)html中的位置決定。

6. position屬性

6.1. 通過使用position屬性, 我們可以選擇4種不同類型的定位, 這會影響元素框生成的方式。

6.2. 默認(rèn)值

6.3. 可能值

7. top屬性

7.1. 定義和用法

?7.1.1. top屬性規(guī)定元素的頂部邊緣。該屬性定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。

?7.1.2. 如果"position"屬性的值為"static", 那么設(shè)置"top"屬性不會產(chǎn)生任何效果, 它的值始終為auto。

7.2. 默認(rèn)值

7.3. 可能的值

8. right屬性

8.1. 定義和用法

?8.1.1. right屬性規(guī)定元素的右邊緣。該屬性定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。

?8.1.2. 如果"position"屬性的值為"static", 那么設(shè)置"right"屬性不會產(chǎn)生任何效果, 它的值始終為auto。

8.2. 默認(rèn)值

8.3. 可能的值

9. bottom屬性

9.1. 定義和用法

?9.1.1. bottom屬性規(guī)定元素的底部邊緣。該屬性定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。

?9.1.2. 如果"position"屬性的值為"static", 那么設(shè)置"bottom"屬性不會產(chǎn)生任何效果, 它的值始終為auto。

9.2. 默認(rèn)值

9.3. 可能的值

10.?left屬性

10.1. 定義和用法

?10.1.1. left屬性規(guī)定元素的左邊緣。該屬性定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。

?10.1.2. 如果"position"屬性的值為"static", 那么設(shè)置"left"屬性不會產(chǎn)生任何效果, 它的值始終為auto。

10.2. 默認(rèn)值

10.3. 可能的值

11. overflow屬性

11.1. 定義和用法

?11.1.1. overflow屬性規(guī)定當(dāng)內(nèi)容溢出元素框時發(fā)生的事情。

?11.1.2. 這個屬性定義溢出元素內(nèi)容區(qū)的內(nèi)容會如何處理。如果值為scroll, 不論是否需要, 用戶代理都會提供一種滾動機制。因此, 有可能即使元素框中可以放下所有內(nèi)容也會出現(xiàn)滾動條。

11.2. 默認(rèn)值

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默認(rèn)值。內(nèi)容不會被修剪, 會呈現(xiàn)在元素框之外。visible默認(rèn)值。內(nèi)容不會被修剪, 會呈現(xiàn)在元素框之外。visible默認(rèn)值。內(nèi)容不會被修剪, 會呈現(xiàn)在元素框之外。</div><div style="overflow: hidden; float: left;">hidden內(nèi)容會被修剪, 并且其余內(nèi)容是不可見的。hidden內(nèi)容會被修剪, 并且其余內(nèi)容是不可見的。hidden內(nèi)容會被修剪, 并且其余內(nèi)容是不可見的。</div><div style="overflow: scroll; float: left;">scroll內(nèi)容會被修剪, 但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。scroll內(nèi)容會被修剪, 但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。scroll內(nèi)容會被修剪, 但是瀏覽器會顯示滾動條以便查看其余的內(nèi)容。</div><div style="overflow: auto; float: left;">auto如果內(nèi)容被修剪, 則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。</div><div style="overflow: auto; float: left;">auto如果內(nèi)容被修剪, 則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。auto如果內(nèi)容被修剪, 則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。auto如果內(nèi)容被修剪, 則瀏覽器會顯示滾動條以便查看其余的內(nèi)容。</div></body> </html>

11.4.2. 效果圖

12.?visibility屬性

12.1. visibility屬性規(guī)定元素是否可見。

12.2. 即使不可見的元素也會占據(jù)頁面上的空間。請使用"display"屬性來創(chuàng)建不占據(jù)頁面空間的不可見元素。

12.3. 當(dāng)在表格元素中使用時, 此值可刪除一行或一列, 但是它不會影響表格的布局。被行或列占據(jù)的空間會留給其他內(nèi)容使用。如果此值被用在其他的元素上, 會呈現(xiàn)為"hidden"。

12.4. 默認(rèn)值

12.5. 可能的值

12.6. 例子

12.6.1. 代碼

<!DOCTYPE html> <html><head><title>規(guī)定元素是否可見</title><meta charset="utf-8" /><style type="text/css">h1 {visibility: hidden;}table, td {border: 1px solid black;}</style></head><body><h1>visibility屬性規(guī)定元素是否可見。</h1><h2 style="visibility: visible;">即使不可見的元素也會占據(jù)頁面上的空間。請使用"display"屬性來創(chuàng)建不占據(jù)頁面空間的不可見元素。</h2><table><tr><td>visible默認(rèn)值。元素是可見的。</td></tr><tr style="visibility: collapse;"><td>hidden元素是不可見的。</td></tr><tr><td>當(dāng)在表格元素中使用時, 此值可刪除一行或一列, 但是它不會影響表格的布局。被行或列占據(jù)的空間會留給其他內(nèi)容使用。如果此值被用在其他的元素上, 會呈現(xiàn)為"hidden"。</td></tr></table></body> </html>

12.6.2. 效果圖

13.?vertical-align屬性

13.1. vertical-align屬性設(shè)置元素的垂直對齊方式。

13.2. 默認(rèn)值

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規(guī)定應(yīng)該從父元素繼承vertical-align屬性的值。</td></tr><tr><td>super<span style="vertical-align: super;">垂直對齊文本的上標(biāo)。</span></td><td>sub<span style="vertical-align: sub;">垂直對齊文本的下標(biāo)。</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屬性規(guī)定要顯示的光標(biāo)的類型(形狀)。

14.2. 默認(rèn)值

14.3. 可能的值

14.4. 例子

14.4.1. 代碼

<!DOCTYPE html> <html><head><title>規(guī)定要顯示的光標(biāo)的類型</title><meta charset="utf-8" /></head><body><h1>cursor屬性規(guī)定要顯示的光標(biāo)的類型(形狀)。</h1><p style="cursor: default;">default默認(rèn)光標(biāo)(通常是一個箭頭)。</p><p style="cursor: auto;">auto默認(rèn)。瀏覽器設(shè)置的光標(biāo)。</p><p style="cursor: crosshair;">crosshair光標(biāo)呈現(xiàn)為十字線。</p><p style="cursor: pointer;">pointer光標(biāo)呈現(xiàn)為指示鏈接的指針(一只手)。</p><p style="cursor: move;">move此光標(biāo)指示某對象可被移動。</p><p style="cursor: text;">text此光標(biāo)指示文本。</p><p style="cursor: wait;">wait此光標(biāo)指示程序正忙(通常是一只表或沙漏)。</p><p style="cursor: help;">help此光標(biāo)指示可用的幫助(通常是一個問號或一個氣球)。</p></body> </html>

14.4.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的032_CSS定位的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

_CSS