元素auto寬高的影響因素_html/css

 .container { position: relative; width: 200px; height: 200px; background-color: #ff9; } .test { border: 1px solid #979797; background-color: #f1f1f1; }

元素普通流定位（position為static或relative）

auto寬度

先看上面代碼運行結果：

再往元素里加點內容：

所以不設置 position 屬性時（也就是取默認值 static ），就如上面的運行結果所示，元素的寬度似乎會自適應于容器的寬度，而高度則和元素內容高度有關。

但要注意所謂的寬度自適應并不是指元素的寬度就一定會等于的容器寬度，而是指元素的 寬度+左右padding+左右border+左右margin 等于的容器寬度。比如下面我再給 .test 元素加上margin之后，元素的寬度可就不等于容器的寬度了：

在進一步測試極端情況：

此時元素的寬度被margin擠得不見，文本溢出了。

auto高度

由上文可見元素的auto高度只會一直隨內容的高度在同步變化，并不會去“自適應”容器的高度，即使元素已經溢出容器：

當然，上面只是討論了元素內容為文本的情況，所以auto高度才這么老實地跟隨內容變化。而如果內容是塊級元素，雖然一般情況下auto高度還是隨內容高度變化的，但若內容采用絕對定位或浮動時，就會導致我們很熟悉的“溢出”（高度塌陷）了：

同時通過這兩個例子，也可以看到auto寬度還是繼續在自適應容器的寬度。

結論

結論就是：在默認定位的情況下，元素的auto寬度始終都會自適應于容器的寬度；而auto高度則和元素內容的高度有關，除非遇到內容浮動或絕對定位時引發的高度塌陷。

若采用相對定位，結果和上面也是一樣的。原理也很好理解，畢竟相對定位時元素還是在原位置渲染的，只是多了個可以設置相對偏移罷了，各位可以自己試試看~

元素絕對定位和浮動

auto寬度

現在我們讓 .test 元素絕對定位：

再加點內容：

只有添加了內容元素才會有寬度，顯然寬度只會適應內容的寬度咯。但還有個特殊情況，就是文本內容的寬度會因為換行飄忽不定，所以當我們再加長文本長度后：

.test 元素的文本居然自動換行，導致寬度適應容器了，再禁止換行看看：

嗯，在不能換行時，就還是只會適應內容的寬度。所以下面要解決的，就是文本內容的換行規則是什么，或者說文本內容的寬度受什么影響？

規則其實不難：在可以自動換行（ white-space: normal/pre-wrap/pre-line ）時，文本中最長的一個單詞或中文字符的長度就是最小的換行單位（若設置了 word-break: break-all 甚至可以取每個字母的長度作為換行單位），這個最小的換行單位是不可分割的。在文本容器寬度不夠時，文本就只會在空格或 - 等字符處自動換行，而不會去分割換行單位。這條規則是不能違背的，我們可以來弄個超長的單詞看看：

上面的結果說明， .test 元素的文本確實會自動換行來讓元素寬度適應容器，但也只能是在換行規則下盡力而為，不會為適應容器而去分割單詞；當然，若設置 word-break: break-all 就可以“盡力”得到這樣的結果了：

而如果 .test 元素到了容器外，文本依然會換行讓 .test 元素寬度“適應”容器，哪怕此時給擠壓成這樣：

auto高度

最后來看下auto高度，上面幾個例子中auto高度也是一直隨文本內容的高度在同步變化。而如果內容是浮動時，也應該是這樣，因為設置容器絕對定位也是清除浮動的方法之一嘛：

但當內容是絕對定位時，還是會溢出，而且因為內容溢出導致寬度也沒了：

結論

綜上，結論就是：

1. 內容為純文本的元素絕對定位時，則其文本會盡量嘗試換行以讓元素的auto寬度適應容器的寬度。

2. 而若元素內容只是定寬的塊級元素，就不存在這種auto寬度變來變去的情況。且當內容是絕對定位或浮動的，不會讓元素的寬高被直接置0。

3. 當元素內容既有純文本又有塊級元素時，顯然就得比較兩者誰更寬，元素的auto寬度最終由最寬者決定。

4. auto高度只和元素的內容的總高度有關，除非遇到內容絕對定位時引發的高度塌陷。

同樣，經過驗證， .test 采用浮動定位時，結論和上面討論的絕對定位是一樣的。

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