使用 CSS 的 box-sizing 屬性
MDN docs 關于box-sizing
一種解決方法是使用 CSS 的 box-sizing 屬性來控制元素的盒模型，默認情況下，盒模型是 "content-box"，這意味著元素的寬度和高度只包括其內容，而不包括 padding 和 border，將 box-sizing 設定為 "border-box" 將會更改盒模型，使得元素的寬度和高度包括 padding 和 border，
* { box-sizing: border-box; }
這樣，元素的寬度和高度就包括了 padding 和 border，就不會超出預算了，
使用百分比值設定 padding:
使用百分比值設定 padding 可以避免固定像素值的限制，例如，如果設定元素的寬度為 100%，則可以使用百分比值設定 padding，例如 padding: 2%，這樣就能保證元素的總寬度不會超出預算，
使用 CSS calc() 函式:
MDN docs 關于 css3 calc()函式
使用 calc() 函式可以在 CSS 中進行動態計算（calc()計算中的兩個值必須同運算子號之間存在空格，否則不會起作用）例如，可以使用比如 calc(100% - 10px) 來減去固定的像素值，從而避免超出預算，這樣就能保證元素的總寬度不會超出預算，注意這個屬性不支持IE瀏覽器，但是ta已經沒了??
使用 max-width 屬性
這個屬性可以限制元素的最大寬度，從而避免超出預算， 例如，如果預算的最大寬度是360px，可以這樣設定：
.element { max-width: 360px; } 這樣，即使你設定了 padding 或 border，元素的寬度也不會超過360px，
本文來自博客園，作者：DanicaStarrr，轉載請注明原文鏈接：https://www.cnblogs.com/hazjblog/p/css-tips-about-padding-set.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/542352.html
標籤：其他
上一篇：vue3實作一個抽獎小專案