絕對定位對元素寬度的影響

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com