H5中的定位是什么?相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策,為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法,通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。
一.定位流分類(lèi)
1.1相對(duì)定位
1.2絕對(duì)定位
1.3固定定位
1.4靜態(tài)定位
二.什么是相對(duì)定位?
相對(duì)定位就是相對(duì)于自己以前在標(biāo)準(zhǔn)流中的位置來(lái)移動(dòng)
position: relative;
相對(duì)定位注意點(diǎn)
1.相對(duì)定位是不脫離標(biāo)準(zhǔn)流的, 會(huì)繼續(xù)在標(biāo)準(zhǔn)流中占用一份空間
2.在相對(duì)定位中同一個(gè)方向上的定位屬性只能使用一個(gè)<a>(也就是使用了left,就不要使用right;使用了top,就不要使用bottom)</a>.
3.由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的, 所以在相對(duì)定位中是區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
4.由于相對(duì)定位是不脫離標(biāo)準(zhǔn)流的, 并且相對(duì)定位的元素會(huì)占用標(biāo)準(zhǔn)流中的位置, 所以當(dāng)給相對(duì)定位的元素設(shè)置margin/padding等屬性的時(shí)會(huì)影響到標(biāo)準(zhǔn)流的布局,<a>(margin/padding會(huì)加給定位之前的盒子位置)</a>
相對(duì)定位應(yīng)用場(chǎng)景
1.用于對(duì)元素進(jìn)行微調(diào)
2.配合后面學(xué)習(xí)的絕對(duì)定位來(lái)使用
.box2{ background-color: green; position: relative; //相對(duì)定位 top: 20px; left: 20px; margin-top: 20px;//會(huì)加在定位之前的位置上 }
三. 什么是絕對(duì)定位?
絕對(duì)定位就是相對(duì)于body來(lái)定位
position: absolute;
注意點(diǎn)
1絕對(duì)定位的元素是脫離標(biāo)準(zhǔn)流的
2絕對(duì)定位的元素是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
.box2{ background-color: green; position: absolute; //絕對(duì)定位 left: 0; bottom: 0; //在body的左下角 }
四. 絕對(duì)定位參考點(diǎn)
規(guī)律
1.默認(rèn)情況下所有的絕對(duì)定位的元素, 無(wú)論有沒(méi)有祖先元素, 都會(huì)以body作為參考點(diǎn)
2.如果一個(gè)絕對(duì)定位的元素有祖先元素, 并且祖先元素也是定位流, 那么這個(gè)絕對(duì)定位的元素就會(huì)以定位流的那個(gè)祖先元素作為參考點(diǎn)
2.1只要是這個(gè)絕對(duì)定位元素的祖先元素都可以
2.2指的定位流是指絕對(duì)定位/相對(duì)定位/固定定位
2.3定位流中只有靜態(tài)定位不行
3.如果一個(gè)絕對(duì)定位的元素有祖先元素, 并且祖先元素也是定位流, 而且祖先元素中有多個(gè)元素都是定位流, 那么這個(gè)絕對(duì)定位的元素會(huì)以離它最近的那個(gè)定位流的祖先元素為參考點(diǎn)
五. 注意點(diǎn)
1.如果一個(gè)絕對(duì)定位的元素是以body作為參考點(diǎn), 那么其實(shí)是以網(wǎng)頁(yè)首屏的寬度和高度作為參考點(diǎn), 而不是以整個(gè)網(wǎng)頁(yè)的寬度和高度作為參考點(diǎn);
看完上述內(nèi)容,你們掌握H5中的定位是什么的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道,感謝各位的閱讀!
文章題目:H5中的定位是什么-創(chuàng)新互聯(lián)
文章地址:http://chinadenli.net/article40/epsho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、服務(wù)器托管、企業(yè)網(wǎng)站制作、營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、關(guān)鍵詞優(yōu)化、App開(kāi)發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容