資訊專欄INFORMATION COLUMN
摘要：關(guān)于內(nèi)聯(lián)元素之前討論的多是塊級元素，而沒有考慮到內(nèi)聯(lián)元素的情況。但巧合的是，在普通流定位中，內(nèi)聯(lián)元素寬度和高度規(guī)則卻和塊級元素絕對定位差不多，都只受內(nèi)容大小影響。
我們知道，元素在沒有設(shè)置寬高的情況下，默認(rèn)的寬高值都為auto。而這個(gè)auto到底是如何讓元素自動擁有寬高的呢，也就是說，元素的寬度和高度到底會受到什么因素的影響？本文將通過一個(gè)例子來對這一問題一探究竟，HTML結(jié)構(gòu)和初始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é)果所示，元素的寬度似乎會自適應(yīng)于容器的寬度，而高度則和元素內(nèi)容高度有關(guān)。
但要注意所謂的寬度自適應(yīng)并不是指元素的寬度就一定會等于的容器寬度，而是指元素的寬度+左右padding+左右border+左右margin等于的容器寬度。比如下面我再給.test元素加上margin之后，元素的寬度可就不等于容器的寬度了：
在進(jìn)一步測試極端情況：
此時(shí)元素的寬度被margin擠得不見，文本溢出了。
auto高度由上文可見元素的auto高度只會一直隨內(nèi)容的高度在同步變化，并不會去“自適應(yīng)”容器的高度，即使元素已經(jīng)溢出容器：
當(dāng)然，上面只是討論了元素內(nèi)容為文本的情況，所以auto高度才這么老實(shí)地跟隨內(nèi)容變化。而如果內(nèi)容是塊級元素，雖然一般情況下auto高度還是隨內(nèi)容高度變化的，但若內(nèi)容采用絕對定位或浮動時(shí)，就會導(dǎo)致我們很熟悉的“溢出”（高度塌陷）了：
同時(shí)通過這兩個(gè)例子，也可以看到auto寬度還是繼續(xù)在自適應(yīng)容器的寬度。
結(jié)論結(jié)論就是：在默認(rèn)定位的情況下，元素的auto寬度始終都會自適應(yīng)于容器的寬度；而auto高度則和元素內(nèi)容的高度有關(guān)，除非遇到內(nèi)容浮動或絕對定位時(shí)引發(fā)的高度塌陷。
若采用相對定位，結(jié)果和上面也是一樣的。原理也很好理解，畢竟相對定位時(shí)元素還是在原位置渲染的，只是多了個(gè)可以設(shè)置相對偏移罷了，各位可以自己試試看~
元素絕對定位和浮動 auto寬度現(xiàn)在我們讓.test元素絕對定位：
再加點(diǎn)內(nèi)容：
只有添加了內(nèi)容元素才會有寬度，顯然寬度只會適應(yīng)內(nèi)容的寬度咯。但還有個(gè)特殊情況，就是文本內(nèi)容的寬度會因?yàn)閾Q行飄忽不定，所以當(dāng)我們再加長文本長度后：
.test元素的文本居然自動換行，導(dǎo)致寬度適應(yīng)容器了，再禁止換行看看：
嗯，在不能換行時(shí)，就還是只會適應(yīng)內(nèi)容的寬度。所以下面要解決的，就是文本內(nèi)容的換行規(guī)則是什么，或者說文本內(nèi)容的寬度受什么影響？
規(guī)則其實(shí)不難：在可以自動換行（white-space: normal/pre-wrap/pre-line）時(shí)，文本中最長的一個(gè)單詞或中文字符的長度就是最小的換行單位（若設(shè)置了word-break: break-all甚至可以取每個(gè)字母的長度作為換行單位），這個(gè)最小的換行單位是不可分割的。在文本容器寬度不夠時(shí)，文本就只會在空格或-等字符處自動換行，而不會去分割換行單位。這條規(guī)則是不能違背的，我們可以來弄個(gè)超長的單詞看看：
上面的結(jié)果說明，.test元素的文本確實(shí)會自動換行來讓元素寬度適應(yīng)容器，但也只能是在換行規(guī)則下盡力而為，不會為適應(yīng)容器而去分割單詞；當(dāng)然，若設(shè)置word-break: break-all就可以“盡力”得到這樣的結(jié)果了：
而如果.test元素到了容器外，文本依然會換行讓.test元素寬度“適應(yīng)”容器，哪怕此時(shí)給擠壓成這樣：
auto高度最后來看下auto高度，上面幾個(gè)例子中auto高度也是一直隨文本內(nèi)容的高度在同步變化。而如果內(nèi)容是浮動時(shí)，也應(yīng)該是這樣，因?yàn)樵O(shè)置容器絕對定位也是清除浮動的方法之一嘛：
但當(dāng)內(nèi)容是絕對定位時(shí)，還是會溢出，而且因?yàn)閮?nèi)容溢出導(dǎo)致寬度也沒了：
結(jié)論綜上，結(jié)論就是：
內(nèi)容為純文本的元素絕對定位時(shí)，則其文本會盡量嘗試換行以讓元素的auto寬度適應(yīng)容器的寬度。
而若元素內(nèi)容只是定寬的塊級元素，就不存在這種auto寬度變來變?nèi)サ那闆r。且當(dāng)內(nèi)容是絕對定位或浮動的，不會讓元素的寬高被直接置0。
當(dāng)元素內(nèi)容既有純文本又有塊級元素時(shí)，顯然就得比較兩者誰更寬，元素的auto寬度最終由最寬者決定。
auto高度只和元素的內(nèi)容的總高度有關(guān)，除非遇到內(nèi)容絕對定位時(shí)引發(fā)的高度塌陷。
同樣，經(jīng)過驗(yàn)證，.test采用浮動定位時(shí)，結(jié)論和上面討論的絕對定位是一樣的。
更新： 關(guān)于表單元素自己原來的想法還是too young了，沒有考慮到表單元素這種存在.由于瀏覽器對一些表單元素的原生實(shí)現(xiàn)是基于操作系統(tǒng)的，這就導(dǎo)致表單元素的auto寬高并不符合上面提到的那些規(guī)律。
比如一個(gè)按鈕，不管是在何種定位之下、也不管容器如何，只要不手動指定寬高它就還是那個(gè)樣子。而且由于和操作系統(tǒng)有關(guān)，所以瀏覽器并沒有給我們提供能夠取消這種默認(rèn)行為的屬性，也就是說我們不能采用諸如-webkit-appearance: none;這樣的做法來覆蓋默認(rèn)樣式。故而上面對auto寬高的討論對這些表單元素都是不適用的，面對表單元素時(shí)我們沒必要再auto寬高的問題，有什么需求就老實(shí)去去手動指定好了。
想了解更多關(guān)于表單元素原生的內(nèi)容，可參考我翻譯的原生表單組件。
關(guān)于內(nèi)聯(lián)元素之前討論的多是塊級元素，而沒有考慮到內(nèi)聯(lián)元素的情況。其實(shí)分析起來也比較簡單，只要考慮普通流定位的情況，因?yàn)榻^對定位和浮動后他們就變成塊級元素了。但巧合的是，在普通流定位中，內(nèi)聯(lián)元素auto寬度和高度規(guī)則卻和塊級元素絕對定位差不多，都只受內(nèi)容大小影響。
當(dāng)然凡事都有例外，這里的例外就是元素，其auto寬高的規(guī)則和表單元素一樣受到瀏覽器默認(rèn)規(guī)則的影響。而該規(guī)則的特殊地方在于：auto寬高會等比例縮放，具體來說，就是為了防止失真，圖片的寬高只要有一個(gè)沒指定就會自動等比例縮放來決定最終大小，而不是像別的元素一樣寬高各管各的。
當(dāng)CSS偽元素設(shè)置了content和display:block;時(shí)，可以看做是原元素作容器的子元素，此時(shí)偽元素的auto寬高也會受上面規(guī)則的影響。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/115250.html
摘要：垂直居中表格布局法為什么就能垂直居中拜讀了張鑫旭大神的文章行高指的是什么行高指的是文本行的基線間的距離。行內(nèi)框具有垂直居中性。 CSS水平居中、垂直居中、水平垂直居中方法總結(jié) 文字的水平居中: text-align:center; 單行文字的垂直居中： line-height:30px; height:30px; 讓有寬度的div水平居中： margin: 0 auto; width:...
摘要：效果圖為了讓效果更明顯，特意設(shè)置了兩邊字體大小不同關(guān)鍵代碼父容器子容器這里要提一下的是，只對于內(nèi)聯(lián)元素或者內(nèi)聯(lián)內(nèi)容有效，比如說為塊級元素標(biāo)簽設(shè)置行高，實(shí)際上是為標(biāo)簽中的內(nèi)聯(lián)文字設(shè)置了行高。允許指定負(fù)長度值和百分比值。 前言 先扯一段廢話來引入好了。又很久沒有寫文章了（間接性躊躇滿志，持續(xù)性混吃等死），幾個(gè)月了登上來看到有人收藏和點(diǎn)贊，感到很慚愧，最近主要精力花費(fèi)在react和redux...
摘要：而滾動條的突然出現(xiàn)，會讓子元素統(tǒng)統(tǒng)向左抖了一下。解決方案一滾動條常駐不完美但也還行滾動條常駐，或者滾動條消失，都是為了避免滾動條從無到有這個(gè)突發(fā)過程?！ ∮袝r(shí)候在一個(gè)寬高固定的容器中，需要加載更多內(nèi)容，如果設(shè)置了overflow:auto，加載更多內(nèi)容時(shí)，子元素的大小超過父容器，就會出現(xiàn)滾動條。而滾動條的突然出現(xiàn)，會讓子元素統(tǒng)統(tǒng)向左抖了一下。效果如下： 先來復(fù)習(xí)一下ov...
閱讀 1166·2021-08-12 13:24
閱讀 3016·2019-08-30 14:16
閱讀 3331·2019-08-30 13:01
閱讀 2094·2019-08-30 11:03
閱讀 2793·2019-08-28 17:53
閱讀 3107·2019-08-26 13:50
閱讀 2287·2019-08-26 12:00
閱讀 970·2019-08-26 10:38
