組來了一個(gè)新人小弟取刃,CSS的問題都是比較常見的基礎(chǔ)問題,解決并回答的過程中烫止,就當(dāng)鞏固了
絕對(duì)定位和相對(duì)定位的使用規(guī)則
<對(duì)于float>
1.可以一起組合使用的屬性
position:relative;
float:left;
情況分類:
relative本身是定義元素相對(duì)定位的屬性
當(dāng)定義relative出現(xiàn)在絕對(duì)定位布局的父元素身上時(shí)话侧,該屬性僅是作用absolute元素的參考,沒有定位上的布局安排闯参,使用float可以進(jìn)行布局瞻鹏,而不會(huì)浪費(fèi)或是沖突
當(dāng)定義relative是作用于元素本身,進(jìn)行相對(duì)定位的布局時(shí)鹿寨,則不要用float屬性新博,因?yàn)槎ㄎ坏奈恢糜蓆op等屬性的屬性定義
2.不可以組合使用的屬性
position:absolute;
float:left脚草;
原因:
因?yàn)槎x了absolute赫悄,元素會(huì)去尋找定義relative的父元素,進(jìn)行絕對(duì)定位布局馏慨,所以float的任何定義都不會(huì)生效埂淮。
<對(duì)于display>
relative : 原來是什么類型的依舊是什么類型。
absolute | fixed : 元素就被重置為了區(qū)塊元素
相對(duì)定位和絕對(duì)定位的使用率
整體而言:少用
使用選擇:除非做些特效或有必要才定位
原因:
1.影響布局加載的速度写隶,會(huì)變慢
2.絕對(duì)定位:(和文檔流沒關(guān)系)如無申明倔撞,則其是對(duì)與body而言的。處理不好的話樟澜,如顯示器尺寸變了误窖,可能就會(huì)變型。
? ?相對(duì)定位:相對(duì)他該出現(xiàn)的位置秩贰,如無設(shè)top left之類霹俺,和普通基本一樣。
相對(duì)定位和決定定位是脫離文檔流的一種布局
1.文檔流:默認(rèn)情況下毒费,所有元素都是在z-index: 0 這一層的丙唧,這就是文檔流。
2.脫離文檔流:設(shè)置position: relative 或 position: absolute會(huì)讓元素浮起來(就像游戲中的概念-多層圖層)觅玻,也就是z-index大于0想际,它會(huì)改變正常情況下的文檔流培漏。
可以參考的博客:http://www.cnblogs.com/baimiaolei/p/5627755.html