盒子模型(2)

  1. 定位:
    (1):psition屬性可以控制Web瀏覽器如何以及在何處顯示特定的元素。
    (2):可以使用position屬性把一個(gè)元素放置到網(wǎng)頁(yè)中的任何位置。
    (3):可選值:
    — static
    — relative
    — absolute
    — fixed

  2. 相對(duì)定位:
    (1):每個(gè)元素在頁(yè)面的文檔流中都有一個(gè)自然位置。相對(duì)于這個(gè)位置對(duì)元素進(jìn)行移動(dòng)就稱為相對(duì)定位。周圍的元素完全不受此影響。
    (2):當(dāng)將position屬性設(shè)置為relative時(shí),則開起了元素的相對(duì)定位。
    (3):當(dāng)開啟了相對(duì)定位以后,可以使用top、right、bottom、left四個(gè)屬性對(duì)元素進(jìn)行定位。

  3. 相對(duì)定位的特點(diǎn):
    (1):如果不設(shè)置元素的偏移量,元素位置不會(huì)發(fā)生改變。
    (2):相對(duì)定位不會(huì)使元素脫離文本流。元素在文本流中的位置不會(huì)改變。
    (3):相對(duì)定位不會(huì)改變?cè)卦瓉淼奶匦浴?br> (4):相對(duì)定位會(huì)使元素的層級(jí)提升,使元素可以覆蓋文本流中的元素。

  4. 絕對(duì)定位:
    (1):絕對(duì)定位指使元素相對(duì)于html元素或離他最近的祖先定位元素進(jìn)行定位。
    (2):當(dāng)將position屬性設(shè)置為absolute時(shí),則開啟了元素的絕對(duì)定位。
    (3):當(dāng)開啟了絕對(duì)定位以后,可以使用top、right、bottom、left四個(gè)屬性對(duì)元素進(jìn)行定位。

  5. 絕對(duì)定位的特點(diǎn):
    (1):絕對(duì)定位會(huì)使元素完全脫離文本流。
    (2):絕對(duì)定位的塊元素的寬度會(huì)被其內(nèi)容撐開。
    (3):絕對(duì)定位會(huì)使行內(nèi)元素變成塊元素。
    (4):一般使用絕對(duì)定位是會(huì)同時(shí)為其父元素指定一個(gè)相對(duì)定位,以確保元素可以相對(duì)于父元素進(jìn)行定位。

  6. 固定定位:
    (1):固定定位的元素會(huì)被鎖定在屏幕的某個(gè)位置上,當(dāng)訪問者滾動(dòng)網(wǎng)頁(yè)是,固定元素會(huì)在屏幕上保持不動(dòng)。
    (2):當(dāng)將position屬性設(shè)置為fixed時(shí),則開啟了元素的固定定位。
    (3):當(dāng)開啟了固定定位以后,可以使用top、right、bottom、left四個(gè)屬性對(duì)元素進(jìn)行定位。
    (4):固定定位的其他特性和絕對(duì)定位類似。

7.:-index:
(1):當(dāng)元素開啟定位以后就可以設(shè)置z-index這個(gè)屬性。
(2):這個(gè)屬性可以提升定位元素所在的層級(jí)。
(3):z-index可以指定一個(gè)整數(shù)作為參數(shù),值越大元素顯示的優(yōu)先級(jí)越高,也就是z-index值較大的元素會(huì)顯示在網(wǎng)頁(yè)的最上層。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,108評(píng)論 1 92
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標(biāo)準(zhǔn)。 注意:講述HT...
    kismetajun閱讀 28,797評(píng)論 1 45
  • 一、盒子模型 1、盒子CSS處理網(wǎng)頁(yè)時(shí),它認(rèn)為每個(gè)元素都包含在一 個(gè)不可見的盒子里,我們只需要將相應(yīng)的盒子擺放到網(wǎng)...
    瘦不下去了閱讀 2,291評(píng)論 0 0
  • display 我們不能為行內(nèi)元素設(shè)置width、height、margin-top和margin-bottom。...
    PySong閱讀 84評(píng)論 0 0
  • display 我們不能為行內(nèi)元素設(shè)置width、height、margin-top和margin-bottom。...
    PySong閱讀 96評(píng)論 0 0

友情鏈接更多精彩內(nèi)容