怎么使用css用id進(jìn)行定位

怎么使用css用id進(jìn)行定位？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

   id 選擇器可以為標(biāo)有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 "#" 來定義。下面的兩個(gè) id 選擇器，第一個(gè)可以定義元素的顏色為紅色，第二個(gè)定義元素的顏色為綠色：

#red {color:red;}
#green {color:green;}

下面的 HTML 代碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。

<p id="red">這個(gè)段落是紅色。</p>
<p id="green">這個(gè)段落是綠色。</p>

注意：id 屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次。

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

定位的基本思想很簡(jiǎn)單，它允許你定義元素框相對(duì)于其正常位置應(yīng)該出現(xiàn)的位置，或者相對(duì)于父元素、另一個(gè)元素甚至瀏覽器窗口本身的位置。顯然，這個(gè)功能非常強(qiáng)大，也很讓人吃驚。要知道，用戶代理對(duì) CSS2 中定位的支持遠(yuǎn)勝于對(duì)其它方面的支持，對(duì)此不應(yīng)感到奇怪。

CSS 定位機(jī)制

CSS 有三種基本的定位機(jī)制：普通流、浮動(dòng)和絕對(duì)定位。

除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。

塊級(jí)框從上到下一個(gè)接一個(gè)地排列，框之間的垂直距離是由框的垂直外邊距計(jì)算出來。

行內(nèi)框在一行中水平布置?？梢允褂盟絻?nèi)邊距、邊框和外邊距調(diào)整它們的間距。但是，垂直內(nèi)邊距、邊框和外邊距不影響行內(nèi)框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內(nèi)框。不過，設(shè)置行高可以增加這個(gè)框的高度。

CSS position 屬性

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

position 屬性值的含義：

static

元素框正常生成。塊級(jí)元素生成一個(gè)矩形框，作為文檔流的一部分，行內(nèi)元素則會(huì)創(chuàng)建一個(gè)或多個(gè)行框，置于其父元素中。

relative

元素框偏移某個(gè)距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。

absolute

元素框從文檔流完全刪除，并相對(duì)于其包含塊定位。包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會(huì)關(guān)閉，就好像元素原來不存在一樣。元素定位后生成一個(gè)塊級(jí)框，而不論原來它在正常流中生成何種類型的框。

fixed

元素框的表現(xiàn)類似于將 position 設(shè)置為 absolute，不過其包含塊是視窗本身。

提示：相對(duì)定位實(shí)際上被看作普通流定位模型的一部分，因?yàn)樵氐奈恢孟鄬?duì)于它在普通流中的位置。

看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝您對(duì)億速云的支持。