如何防止 CSS 輸入「width: 100%」超出父邊界？

CSS 輸入寬度：100% 超出父級邊界

在 CSS 中，元素的寬度和高度應用於其內容區域，包括填充。但是，將內邊距設為 100% 寬度的元素可能會導致其超過其父級的大小。

理解 CSS 基本盒模型

CSS 基本盒模型定義元素的大小和佈局被計算。它由內容、內邊距、邊框和邊距組成。

應用 width: 100% 時，它會影響內容區域的寬度。但如果元素有內邊距，它就會超出內容區域，從而有效地增加其整體大小。

打破內邊距障礙

要防止內邊距影響元素的寬度和高度，請設定框-sizing CSS property to border-box:

這指示瀏覽器包含元素的填充innerhalb寬度和高度，防止其超出父級的邊界。

瀏覽器相容性

所有主要瀏覽器都支援框大小調整，但請考慮對舊版的 Internet Explorer 使用前綴（在版本 8)。

在上下文中使用框大小

解決您的問題提供JSFiddle，添加box-sizing: border-box；遵循以下規則：

推薦的「繼承」用法

Paul Irish 和Chris Coyier 建議從html 元素繼承box-sizing，以確保整個頁面的一致性：

以上是如何防止 CSS 輸入「width: 100%」超出父邊界？的詳細內容。更多資訊請關注PHP中文網其他相關文章！