絕對(duì)定位對(duì)元素寬度的影響

一、問(wèn)題來(lái)源 自己編寫(xiě)輪播圖切換的時(shí)候前一幅圖滑動(dòng)時(shí)后邊出現(xiàn)空白直到前一幅圖全部滑出后第二幅圖才出現(xiàn)。剛開(kāi)始出現(xiàn)問(wèn)題到網(wǎng)上搜發(fā)現(xiàn)有的說(shuō)定時(shí)器動(dòng)畫(huà)可能會(huì)造成這種情況，于是我在代碼調(diào)試?yán)镒⑨尩袅硕〞r(shí)器，讓圖片只走一步就停下來(lái)，發(fā)現(xiàn)后邊還是有空白，所以確定不是定時(shí)器的問(wèn)題。于是我查看了一下盒模型，發(fā)現(xiàn)包裹img的容器寬度div#main并不是我理想中六張圖片寬度的總和，原來(lái)是我沒(méi)有顯式設(shè)置這個(gè)容器div#main的寬度。但是問(wèn)題來(lái)了，沒(méi)有顯式地設(shè)置容器寬度，大家可能就會(huì)感性的認(rèn)為容器的寬度不應(yīng)該是被其內(nèi)容填充而適應(yīng)的么？根據(jù)前面所述的現(xiàn)象，答案自然是否定的，也可以說(shuō)不是所有情況均是如此，因?yàn)閷?shí)際上定位對(duì)容器的寬度也是具有影響的。下面討論一下絕對(duì)定位元素的大小與放置情況的聯(lián)系。 二、包含塊 首先我們先回顧一下包含塊（定位上下文）的基本概念： 1.初始包含塊（根元素的包含塊）由用戶代理確定。 2.浮動(dòng)元素包含塊定義為最近的塊級(jí)祖先元素。 3.相對(duì)定位或靜態(tài)定位元素包含塊由最近的塊級(jí)框、表單元格、或行內(nèi)塊框祖先元素（任何類型）內(nèi)容邊界構(gòu)成。 4.絕對(duì)定位元素包含塊設(shè)置為最近的定位不是static的祖先元素（任何類型）的邊框界定（對(duì)塊級(jí)父元素）或內(nèi)容邊界界定（對(duì)行內(nèi)父元素）。 三、寬度與偏移 一般的，元素的大小和位置取決于其包含塊。定位就是元素各外邊距邊界相對(duì)于其包含塊相應(yīng)邊（內(nèi)邊界與邊框相鄰邊）進(jìn)行偏移，影響的是元素的所有一切（外邊距、邊框、內(nèi)邊距、內(nèi)容）都會(huì)移動(dòng)。故對(duì)于一個(gè)定位元素有如下等式（后邊的計(jì)算均基于該式）： left+margin-left+border-left-width+padding-left+width+padding-right+border-right-width+margin-right+right=包含塊的width （式1-1） 據(jù)此，在未定義元素的寬度width和高度height時(shí)，其值大小都會(huì)受到定位影響。對(duì)于定位元素來(lái)說(shuō)，是否需要設(shè)置其寬度高度應(yīng)根據(jù)情況確定。考慮以下幾種情況其寬度高度各是多少的確定規(guī)則： 1.如果將偏移屬性top，left，bottom，right都進(jìn)行了確定，而未設(shè)置外邊距，內(nèi)邊距和邊框的時(shí)候，是否顯式設(shè)置寬度高度，其值都是由偏移屬性確定的；反之若設(shè)置了外邊距或內(nèi)邊距（auto也算），邊框時(shí)，高度寬度就是其顯式設(shè)置值，未顯式設(shè)寬高的仍由偏移屬性確定。 2.對(duì)于非替換元素水平軸行為： 1）如果left，width，right都為auto，且沒(méi)有設(shè)置內(nèi)外邊距，邊框，則經(jīng)過(guò)計(jì)算元素左邊位于其靜態(tài)位置（從左往右讀），width“恰當(dāng)收放”，根據(jù)上述等式right為余下的水平距離； 2）當(dāng)?shù)仁街兴兄禐楣潭ㄖ禃r(shí)，若元素“過(guò)度受限”則right會(huì)根據(jù)上式重置； 3）當(dāng)上述等式中只有一個(gè)屬性值為auto時(shí)，元素“過(guò)度受限”時(shí)就會(huì)重置這一屬性值以滿足等式； 4）垂直軸規(guī)則類似，但要注意只有top可以取靜態(tài)位置，bottom做不到。 3.對(duì)于替換元素（注意這里沒(méi)有“恰當(dāng)收放”的概念，因?yàn)樘鎿Q元素有固有寬高）： 1）先看其width（height）是否顯式聲明，顯式聲明則為該值，否則由元素內(nèi)容實(shí)際大?。▽捀撸Q定； 2）再看left，top若為auto則替換為靜態(tài)位置； 3）再看如果left和bottom值如果還為auto，則令margin的auto都置0，若未被置0就設(shè)置為左右相等，上下相等； 4）在此之后如果只剩下一個(gè)auto值，則同非替換元素類似，根據(jù)等式重置該auto值。 5）當(dāng)元素“過(guò)度受限”時(shí)，與非替換元素處理一樣，用戶代理會(huì)忽略right（從左向右讀）和bottom。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com