怎么使用css用id進行定位

怎么使用css用id進行定位?很多新手對此不是很清楚,為了幫助大家解決這個難題,下面小編將為大家詳細講解,有這方面需求的人可以來學習下,希望你能有所收獲。

成都創(chuàng)新互聯(lián)堅持“要么做到,要么別承諾”的工作理念,服務領域包括:成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務,滿足客戶于互聯(lián)網(wǎng)時代的武寧網(wǎng)站設計、移動媒體設計的需求,幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設合作伙伴!

   id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 "#" 來定義。下面的兩個 id 選擇器,第一個可以定義元素的顏色為紅色,第二個定義元素的顏色為綠色:

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

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

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

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

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

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

CSS 定位機制

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

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

塊級框從上到下一個接一個地排列,框之間的垂直距離是由框的垂直外邊距計算出來。

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

CSS position 屬性

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

position 屬性值的含義:

static

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

relative

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

absolute

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

fixed

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

提示:相對定位實際上被看作普通流定位模型的一部分,因為元素的位置相對于它在普通流中的位置。

看完上述內(nèi)容是否對您有幫助呢?如果還想對相關知識有進一步的了解或閱讀更多相關文章,請關注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝您對創(chuàng)新互聯(lián)的支持。

分享標題:怎么使用css用id進行定位
標題URL:http://muchs.cn/article20/jojjco.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián),為您提供全網(wǎng)營銷推廣App設計、營銷型網(wǎng)站建設、靜態(tài)網(wǎng)站、建站公司、網(wǎng)站導航

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉載內(nèi)容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載,或轉載時需注明來源: 創(chuàng)新互聯(lián)

商城網(wǎng)站建設