歡迎來到合肥浪訊網(wǎng)絡科技有限公司官網(wǎng)
  咨詢服務熱線:400-099-8848

用戶體驗分析:從Web到移動應用的設計思維轉(zhuǎn)換

發(fā)布時間:2016-11-24 文章來源:  瀏覽次數(shù):3062
在講解CSS定位前,首先要搞清晰以下幾個屬性的真正含義和區(qū)別,如下:
【  position:relative | absolute | static | fixed  】
A:相對定位(position: relative):假如對某一個元素進行相對定位,它將泛起在它所在的位置上。然后,可以通過設置垂直(或水平)位置(top,right,bottom,left四值),讓這個元素"相對于"它的出發(fā)點進行移動。注:設置為相對定位的元素框會偏移某個間隔。元素仍舊保持其不決位前的外形,它原本所占的空間仍留存;
B:絕對定位(position: absolute):絕對定位使元素的位置與文檔流無關,所以不會占用空間。與相對定位不同,相對定位實際上被看作普通流定位模型的一部門,由于元素的位置相對于它在普通流中的位置。注:設置為絕對定位的元素框從文檔流完全刪除,并相對于其包含塊定位,包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會封閉,就似乎該元素原來不存在一樣。元素定位后天生一個塊級框,而不論原來它在正常流中天生何種類型的框;
C:固定定位(position: fixed):固定定位元素的位置總以視窗左上角定位;注:IE6不兼容此屬性;
D:static :沒有特別的設定,遵循基本的定位劃定,不能通過z-index進行層次分級;
【定位原理:在文本流中,所有元素的位置都受文本流的限制,但我們可以通過CSS樣式去改變這些元素的位置(如:margin,float);實在真正意義上的位移是通過top,right,bottom,left來實現(xiàn)的】
A:position: relative: 被相對定位元素不會脫離文檔流,它會參考自身靜態(tài)位置的左上角,通過 top,right,bottom,left進行位置移動。注:相對定位層原有位置還會繼承占用文檔流;
紅色區(qū)域被相對定位后,相對A點通過top:20px,left:15px進行位移,但相對定位層的原有位置還會繼承留存;
 
B:position:absolute:被絕對定位元素會脫離文檔流,且會選取自己最近的父級定位元素,通過 top,right,bottom,left進行位置移動。注:當父級position屬性是static時,absolute位移定位置將以body的原點坐標進行計算;如下圖:紅色區(qū)域被絕對定位后,被定位層脫離文檔流;假如A點層是 relative(或 absolute時,即紅色區(qū)域的父級),被定位層會以A點坐標通過top:20px,left:15px進行位移;當父級沒有定位時,文檔以body的原點坐標通過top:20px,left:15px進行位移;
 
【定位的實際應用】
題目一:
IE6本身不支持position: fixed屬性,但可以通過hack的方法解決此題目,如下:
position: fixed;top: 0;left:0; /* 除ie6之外的瀏覽器執(zhí)行此樣式 */
_position:absolute:_top:expression(documentElement.scrollTop + 0 + "px"); /* 僅ie6執(zhí)行此樣式  */
題目二:
當絕對定位和相對定位配合使用時,在IE6下會產(chǎn)生一個奇偶BUG;當相對定位層的寬度值是奇數(shù)時,絕對定位層的位置是上右(或下右)時,在IE6下右側會泛起1像素的間隙;反之當相對定位層的高度是奇數(shù)時,絕對定位層的位置是左下(或右下)時,在IE6的下方會泛起1像素的間隙;所以當采用定位時,相對定位層盡量避免使用奇數(shù)數(shù)值;假如必需使用奇數(shù)值,可以通過HACK方法給IE6單獨書寫數(shù)值(如left:0px;_left:-1px;);
上面所說定位原理都是單獨的使用方法,而在實際應用中我們總會使用一些特別的形式;即但愿元素具有絕對定位特性的同時,又但愿絕對定位的坐標原點可隨意固定在網(wǎng)頁的某一點上,當這個相對點隨意移動時,絕對定位層可以隨之改變位置,也就是絕對定位層可以跟著網(wǎng)頁移動;假如想實現(xiàn)這種定位方式,必需在這個絕對定位層的父級設置相對定位值,那么絕對定位層就會以父級的坐標原點為坐標起始原點;此方法在網(wǎng)頁制作中使用的比較廣泛,如下:
1. 動彈圖的左右按鈕(index_zuo,index_you)樣式是絕對定位,它的父級(rollBox)樣式是相對定位;
 
2.頭像層(pic)樣式是絕對定位,它的父級(box)樣式是相對定位;
 
諸如斯類的實際應用還有良多,如下拉菜單,焦點圖,輪播圖和一些不規(guī)則的復雜結構都會用到此類定位方式;
因為市場的各類瀏覽器類型較多,對CSS定位的支持也略有不同,其中IE6的題目相對較多,需要根據(jù)不同情況進行不同的調(diào)試;

上一條:威客網(wǎng)站該怎樣在尷尬中前...

下一條:企業(yè)網(wǎng)站如何進步內(nèi)容的相...