在最近的項(xiàng)目中。出現(xiàn)了原來(lái)已經(jīng)設(shè)置溢出隱藏的元素卻又溢出了的問題。
經(jīng)過(guò)查證原來(lái)是用來(lái)做父元素的<a>變成了<button>。（這是一個(gè)封裝好的組件。檢測(cè)到有效href就渲染a否則就是button。）
這也引出一個(gè)關(guān)于行內(nèi)元素和行內(nèi)塊元素的問題。
行內(nèi)元素也就是display:inline的元素，最典型的是<a>標(biāo)簽。
行內(nèi)塊元素就是display:inline-block的元素，典型的有input。
請(qǐng)看下圖
image
這圖很清楚的表明常見的三種元素顯示類型。
行內(nèi)元素
- 只有設(shè)置左右的
margin和padding。 - 不能設(shè)置高寬，它的高度取決于內(nèi)部文字的行高。寬度取決于內(nèi)部文字的多少。
行內(nèi)塊元素和塊級(jí)元素的屬性基本一致?？梢栽O(shè)高寬、邊距。不同在于它允許左右存在元素。而塊級(jí)元素就算只有1px也不允許有元素和它共享一行。
那么如果它們內(nèi)嵌塊級(jí)元素會(huì)怎么樣呢，html結(jié)構(gòu)如下
<div>
<a>
<div><div>
</a>
</div>
我們可以改變里面的div的寬度可以看出a標(biāo)簽的寬度是不隨著子元素的寬度變化而變化的，一直與自己的父級(jí)一致。倒是高度會(huì)隨著變化。
行內(nèi)塊則不同，它的寬高都是隨著內(nèi)部塊級(jí)元素的變化而變化相當(dāng)于height:auto;width:auto。
這也解釋我在開頭遇見的問題。我給組件設(shè)置了overflow:hidden。a標(biāo)簽寬度隨父元素，所以能生效。而<button>的寬度卻隨著子元素的寬度變化而變化的，它的overflow:hidden毫無(wú)用處。
結(jié)論：
- 行內(nèi)元素內(nèi)嵌塊級(jí)元素。高度被子元素?fù)未螅鴮挾群透讣?jí)一致（父級(jí)是body就是body的寬度）。
- 行內(nèi)塊元素內(nèi)嵌塊級(jí)元素。寬高都會(huì)被子元素?fù)未蟮摹?/li>
