元素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寬度

先看上面代碼運(yùn)行結(jié)果：

再往元素里加點(diǎn)內(nèi)容：

所以不設(shè)置 position 屬性時(shí)（也就是取默認(rèn)值 static ），就如上面的運(yùn)行結(jié)果所示，元素的寬度似乎會(huì)自適應(yīng)于容器的寬度，而高度則和元素內(nèi)容高度有關(guān)。

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

在進(jìn)一步測(cè)試極端情況：

此時(shí)元素的寬度被margin擠得不見(jiàn)，文本溢出了。

auto高度

由上文可見(jiàn)元素的auto高度只會(huì)一直隨內(nèi)容的高度在同步變化，并不會(huì)去“自適應(yīng)”容器的高度，即使元素已經(jīng)溢出容器：

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

同時(shí)通過(guò)這兩個(gè)例子，也可以看到auto寬度還是繼續(xù)在自適應(yīng)容器的寬度。

結(jié)論

結(jié)論就是：在默認(rèn)定位的情況下，元素的auto寬度始終都會(huì)自適應(yīng)于容器的寬度；而auto高度則和元素內(nèi)容的高度有關(guān)，除非遇到內(nèi)容浮動(dòng)或絕對(duì)定位時(shí)引發(fā)的高度塌陷。

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

元素絕對(duì)定位和浮動(dòng)

auto寬度

現(xiàn)在我們讓 .test 元素絕對(duì)定位：

再加點(diǎn)內(nèi)容：

只有添加了內(nèi)容元素才會(huì)有寬度，顯然寬度只會(huì)適應(yīng)內(nèi)容的寬度咯。但還有個(gè)特殊情況，就是文本內(nèi)容的寬度會(huì)因?yàn)閾Q行飄忽不定，所以當(dāng)我們?cè)偌娱L(zhǎng)文本長(zhǎng)度后：

.test 元素的文本居然自動(dòng)換行，導(dǎo)致寬度適應(yīng)容器了，再禁止換行看看：

嗯，在不能換行時(shí)，就還是只會(huì)適應(yīng)內(nèi)容的寬度。所以下面要解決的，就是文本內(nèi)容的換行規(guī)則是什么，或者說(shuō)文本內(nèi)容的寬度受什么影響？

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

上面的結(jié)果說(shuō)明， .test 元素的文本確實(shí)會(huì)自動(dòng)換行來(lái)讓元素寬度適應(yīng)容器，但也只能是在換行規(guī)則下盡力而為，不會(huì)為適應(yīng)容器而去分割單詞；當(dāng)然，若設(shè)置 word-break: break-all 就可以“盡力”得到這樣的結(jié)果了：

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

auto高度

最后來(lái)看下auto高度，上面幾個(gè)例子中auto高度也是一直隨文本內(nèi)容的高度在同步變化。而如果內(nèi)容是浮動(dòng)時(shí)，也應(yīng)該是這樣，因?yàn)樵O(shè)置容器絕對(duì)定位也是清除浮動(dòng)的方法之一嘛：

但當(dāng)內(nèi)容是絕對(duì)定位時(shí)，還是會(huì)溢出，而且因?yàn)閮?nèi)容溢出導(dǎo)致寬度也沒(méi)了：

結(jié)論

綜上，結(jié)論就是：

1. 內(nèi)容為純文本的元素絕對(duì)定位時(shí)，則其文本會(huì)盡量嘗試換行以讓元素的auto寬度適應(yīng)容器的寬度。

2. 而若元素內(nèi)容只是定寬的塊級(jí)元素，就不存在這種auto寬度變來(lái)變?nèi)サ那闆r。且當(dāng)內(nèi)容是絕對(duì)定位或浮動(dòng)的，不會(huì)讓元素的寬高被直接置0。

3. 當(dāng)元素內(nèi)容既有純文本又有塊級(jí)元素時(shí)，顯然就得比較兩者誰(shuí)更寬，元素的auto寬度最終由最寬者決定。

4. auto高度只和元素的內(nèi)容的總高度有關(guān)，除非遇到內(nèi)容絕對(duì)定位時(shí)引發(fā)的高度塌陷。

同樣，經(jīng)過(guò)驗(yàn)證， .test 采用浮動(dòng)定位時(shí)，結(jié)論和上面討論的絕對(duì)定位是一樣的。

聲明：本網(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