為什麼帶有 `width: 100%` 的 CSS 輸入會超出其父級的邊界？

寬度為 100% 的 CSS 輸入超出了父級的邊界

為什麼會發生這種情況？

在 CSS 中，寬度和高度屬性設定內容框的大小。但是，內邊距會加入到內容框外部，從而增加元素的整體大小。

當您將內邊距設為 width: 100% 時，其內邊距會使其比其包含元素的 100% 寬。

解決方案

要防止padding 影響元素的寬度或高度，請使用box-sizing 屬性設定為border-box:

box-sizing: border-box;

這使得寬度和高度屬性包括內邊距和邊框，導致總寬度為100%。

瀏覽器相容性

box -sizing具有良好的瀏覽器相容性（IE8）。不需要前綴。

替代方法：「繼承」盒子大小

一些專家建議使用以下「繼承」方法：

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

這設定盒子大小為整個文件設定邊框，並允許所有元素繼承該邊框設定。

示範

這是將邊框框應用於輸入元素的示範：

input[type=text],
input[type=password] {
  width: 100%;
  box-sizing: border-box;
}

以上是為什麼帶有 `width: 100%` 的 CSS 輸入會超出其父級的邊界？的詳細內容。更多資訊請關注PHP中文網其他相關文章！