當父元素的顯示類型為inline或inline-block時，width: 100%的顯示效果有什么不同？

width: 100% 在不同父元素 display 屬性下的行為差異

設置元素 width: 100% 時，其寬度是相對于父元素計算的。但當父元素的 display 屬性為 inline 或 inline-block 時，計算方式存在差異，導致顯示效果不同。

代碼示例及分析

讓我們通過代碼示例來理解這種差異：

示例一：父元素 display: inline-block

<div>   <div style="height: 100px;">測試內容</div>   <div style="display: inline-block; border: 1px solid red; padding: 10px; width: 100%;">     這是 inline-block 元素   </div> </div>

在這個示例中，內部 inline-block 元素的 width: 100% 基于其父元素（第一個 div）的寬度計算。父元素寬度會根據其內容自適應調整。

示例二：父元素 display: inline

<div>   <div style="height: 100px;">測試內容</div>   <div style="display: inline; border: 1px solid red; padding: 10px; width: 100%;">     這是 inline 元素   </div> </div>

這里，內部 inline 元素的 width: 100% 無效。 inline 元素的寬度由其內容決定，width 屬性對其不起作用。 width: 100% 不會影響其父元素的寬度。

示例三：控制父元素寬度

為了更清晰地展示 inline 元素的行為，我們修改示例二，為父元素設置固定寬度：

<div style="width: 800px; background-color: aqua;">   <div style="height: 100px;">測試內容</div>   <div style="display: inline; border: 1px solid red; padding: 10px; width: 50%;">     這是 inline 元素   </div> </div>

即使設置了 width: 50%，inline 元素的寬度仍然由其內容決定，不會占據父元素的 50%。

總結:

width: 100% 對 inline-block 元素有效，其寬度會根據父元素內容自適應調整，而對 inline 元素無效，其寬度始終由其內容決定，width 屬性不起作用。 只有當父元素是塊級元素（display: block，display: flex 等）時，width: 100% 才能真正占據父元素的全部寬度。