CSS 盒子模型和百分比不一致的瘋狂
在CSS 領域， div及其兩個輸入子項似乎擺脫了分配的限制。這是什麼魔法？
讓我們來解開這個謎團吧！
根據 CSS 盒子模型的原理，元素的寬度和高度在內部發揮得很好內容框。然而，內邊距喜歡走出這個框框，有效地放大整個元素。
將 width: 100% 應用於帶有內邊距的元素會賦予它不適當的餘地，使其比其 100% 父級更寬。在這種情況下，輸入變得比其容器更寬。
為了抑制填充的惡作劇行為，我們引入了盒子大小屬性。將其設為 border-box 可確保內邊距保持在元素定義的尺寸內。
網頁設計奇才 Paul Irish 與 Chris Coyier倡導繼承方法，由以下傳播片段：
為了見證修復的實際效果，這裡是調整後的代碼：
瞧！現在，任何輸入欄位都不敢越界。盒子模型的理智恢復了。
以上是為什麼帶有「width: 100%」的 CSS 輸入會超出其父級的邊界？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
