相对定位与绝对定位
絕對(duì)定位:
設(shè)置為絕對(duì)定位的元素會(huì)脫離文檔流，并相對(duì)于其最近的已定位的祖先元素定位，并且元素定位以后會(huì)變成一個(gè)塊級(jí)框，例如：
<style>i{width:100px;height: 100px;background: red;margin: 300px auto;} </style> <i>HIHA</i>i標(biāo)簽本來(lái)是行內(nèi)元素，這段代碼的運(yùn)行結(jié)果：
其寬高完全由其內(nèi)的文字‘HIHA’撐起來(lái)的，跟咱們定義的樣式，width、height無(wú)關(guān)，并且margin在豎直方向上無(wú)效（應(yīng)為i是行內(nèi)元素），但是將上面代碼改成：
<style>i{position: absolute;width:100px;height: 100px;background: red;margin: 300px auto;} </style> <i>HIHA</i>運(yùn)行結(jié)果就變?yōu)榱?#xff1a;
Margin和width、height都起了作用，說(shuō)明其已經(jīng)變?yōu)榱藟K級(jí)元素。
另外，因?yàn)榻^對(duì)定位的框與文檔流無(wú)關(guān)，所以它們可以覆蓋頁(yè)面上的其他元素，可以通過(guò)z-index屬性來(lái)控制這些框的堆放次序。
?
相對(duì)定位：
如果對(duì)一個(gè)元素進(jìn)行相對(duì)定位，它將出現(xiàn)在它所在的位置上，換句話說(shuō)，原來(lái)是哪兒，還是哪兒，可以通過(guò)設(shè)置垂直或水平位置，讓這個(gè)元素相對(duì)于它自己的起點(diǎn)進(jìn)行移動(dòng)，其本身還在文檔普通流，例如，上例改為：
<style>i{position: relative;width:100px;height: 100px;background: red;margin: 300px auto;} </style> <i>HIHA</i>運(yùn)行結(jié)果為：
說(shuō)明這時(shí)的i標(biāo)簽還是普通的行內(nèi)元素，并未發(fā)生本質(zhì)的改變。
?
?
另附：行內(nèi)元素與塊級(jí)元素的區(qū)別：
1、? 塊級(jí)元素獨(dú)占一行，且其寬度默認(rèn)情況下會(huì)占滿其父元素的寬度，行內(nèi)元素不會(huì)獨(dú)占一行，其相鄰元素可以排在一行
2、? 塊級(jí)元素可以設(shè)置width，height，行內(nèi)元素設(shè)置width、height無(wú)效，而且塊級(jí)元素即使設(shè)置寬度也還是獨(dú)占一行。
3、? 塊級(jí)元素可以設(shè)置margin和padding屬性，行內(nèi)元素水平方向的margin和padding如margin-left、padding-right可以產(chǎn)生邊距效果，但是豎直方向的如，margin-top/bottom，padding-top/bottom，不會(huì)產(chǎn)生邊距效果。
4、? 塊級(jí)元素和行內(nèi)元素的相關(guān)屬性：display，
其中塊級(jí)元素對(duì)應(yīng)display：block,行內(nèi)元素對(duì)應(yīng)display：inline。
補(bǔ)充說(shuō)明：display：inline-block，可以讓元素具有塊級(jí)元素和行內(nèi)元素的特性，既可以設(shè)置長(zhǎng)寬，可以讓padding和margin生效，有可以和其他行內(nèi)元素并排，是一個(gè)很實(shí)用的屬性。
?
行內(nèi)元素變?yōu)閴K級(jí)元素的方法：
???????? 1、Display：block；2、浮動(dòng)行內(nèi)元素；3，絕對(duì)定位行內(nèi)元素；
?
轉(zhuǎn)載于:https://www.cnblogs.com/web-fusheng/p/6711079.html
總結(jié)
- 上一篇： Python基础-面向对象编程
- 下一篇： win10升级重启中黑屏怎么办啊 Win