css定位

浮動可以讓多個塊級赫茲一行沒有縫隙排列顯示,經(jīng)常用于橫向排列盒子

定位可以讓盒子自由地在某個盒子內(nèi)移動位置或者固定屏幕中某個位置,并且可以壓住其他盒子

(資料圖片僅供參考)

定位:將盒子定在某一個位置,所以定位也是在擺放盒子

定位=定位模式+邊偏移

定位模式用于指定一個元素在文檔中的定位方式,邊偏移決定該元素的最終位置

邊偏移有top/bottom/left/right四個屬性

相對定位

相對定位:元素在移動位置的時候,是相對于它原來的位置來說的(自戀型)

相對于自己原來的位置移動(移動位置的時候參考點是自己原來的位置)

原來在標(biāo)準(zhǔn)流的位置繼續(xù)占有,后面的盒子仍然以標(biāo)準(zhǔn)流的方式對待他(不脫標(biāo),繼續(xù)保留原來位置)

絕對定位

絕對定位:元素在移動位置的時候是相對于它的祖先元素來說的

如果沒有祖先元素或祖先元素沒有定位,則以瀏覽器為準(zhǔn)定位

如果祖先元素有定位(相對/絕對/固定),則以最近一級有定位的祖先元素為參考點移動位置(父親沒有看爺爺?shù)?

絕對定位不在占有原先的位置(脫標(biāo))

子絕父相

子級絕對定位,不會占有位置,可以放到父盒子里面任何一個地方,不會影響其他的兄弟盒子

父盒子需要加定位限制子盒子在父盒子內(nèi)顯示

父盒子布局時,需要占有位置,因此父親只能是相對定位

總結(jié):因為父級需要占有位置,因此是相對定位,子盒子不需要占有位置,則是絕對定位

固定定位

以瀏覽器的可視窗口為參照點移動元素,跟父元素沒有任何關(guān)系

不隨滾動條滾動

不再占有原先位置

讓固定定位在版心右側(cè)

讓固定定位的盒子left=50%,走到瀏覽器可視區(qū)一半位置

讓固定定位的盒子margin-left=版心寬度的一半距離

就可以讓固定定位的盒子貼著版心右側(cè)對齊了

定位的疊放順序z-index

在使用定位布局時可能出現(xiàn)盒子重疊的情況,可使用z-index控制盒子的前后次序

數(shù)值可以是正整數(shù),負(fù)指數(shù)或0,默認(rèn)為auto,數(shù)值越大盒子越靠上

如果屬性值相同則按照書寫順序,后來居上

數(shù)字后面不能加單位

只有定位的盒子才有z-index屬性,標(biāo)準(zhǔn)流和浮動沒有

絕對定位和盒子居中

加了絕對定位的盒子不能通過margin:0 auto水平居中,但是可以通過以下方法實現(xiàn)水平和垂直居中

left: 50%讓盒子的左側(cè)移到父級元素的水平中心位置

margin-left:-100px讓黑向左移動自身寬度的一半

定位的拓展

脫標(biāo)的盒子不會觸發(fā)外邊距塌陷浮動元素/絕對定位/固定定位 的元素都不會觸發(fā)外邊距合并的問題

浮動的元素不會壓住下面標(biāo)準(zhǔn)流的文字(圖片),只會壓住下面標(biāo)準(zhǔn)流的盒子但是絕對定位/固定定位會壓住下面標(biāo)準(zhǔn)流所有的內(nèi)容

網(wǎng)頁布局總結(jié)

標(biāo)準(zhǔn)流:可以讓盒子上下排列或者左右排列,垂直的塊級赫茲顯示就用標(biāo)準(zhǔn)流布局

浮動:可以讓多個塊級元素一行顯示或者左右對齊盒子,多個塊級盒子水平顯示就用浮動布局

定位:最大的特點就是有層疊的概念,可以讓多個盒子前后疊壓來顯示,如果元素自由在某個盒子內(nèi)移動就用定位布局

關(guān)鍵詞：

責(zé)任編輯：Rex_12