當父元素的顯示類型為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%才能真正佔據父元素的全部寬度。

以上是當父元素的顯示類型為inline或inline-block時，width: 100%的顯示效果有什麼不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！