在最近的項(xiàng)目中棉安。出現(xiàn)了原來已經(jīng)設(shè)置溢出隱藏的元素卻又溢出了的問題。
經(jīng)過查證原來是用來做父元素的<a>變成了<button>。（這是一個(gè)封裝好的組件。檢測到有效href就渲染a否則就是button辆它。）
這也引出一個(gè)關(guān)于行內(nèi)元素和行內(nèi)塊元素的問題。
行內(nèi)元素也就是display:inline的元素履恩，最典型的是<a>標(biāo)簽锰茉。
行內(nèi)塊元素就是display:inline-block的元素，典型的有input切心。
請看下圖
image
這圖很清楚的表明常見的三種元素顯示類型飒筑。
行內(nèi)元素
- 只有設(shè)置左右的
margin和padding。 - 不能設(shè)置高寬绽昏，它的高度取決于內(nèi)部文字的行高协屡。寬度取決于內(nèi)部文字的多少。
行內(nèi)塊元素和塊級元素的屬性基本一致全谤》粝可以設(shè)高寬、邊距认然。不同在于它允許左右存在元素补憾。而塊級元素就算只有1px也不允許有元素和它共享一行。
那么如果它們內(nèi)嵌塊級元素會(huì)怎么樣呢卷员，html結(jié)構(gòu)如下
<div>
<a>
<div><div>
</a>
</div>
我們可以改變里面的div的寬度可以看出a標(biāo)簽的寬度是不隨著子元素的寬度變化而變化的盈匾，一直與自己的父級一致。倒是高度會(huì)隨著變化子刮。
行內(nèi)塊則不同威酒，它的寬高都是隨著內(nèi)部塊級元素的變化而變化相當(dāng)于height:auto;width:auto。
這也解釋我在開頭遇見的問題挺峡。我給組件設(shè)置了overflow:hidden葵孤。a標(biāo)簽寬度隨父元素，所以能生效橱赠。而<button>的寬度卻隨著子元素的寬度變化而變化的尤仍，它的overflow:hidden毫無用處。
結(jié)論：
- 行內(nèi)元素內(nèi)嵌塊級元素狭姨。高度被子元素?fù)未笤桌玻鴮挾群透讣壱恢拢ǜ讣壥莃ody就是body的寬度）。
- 行內(nèi)塊元素內(nèi)嵌塊級元素饼拍。寬高都會(huì)被子元素?fù)未蟮摹?/li>
