CSS-標準盒模型和怪異盒模型box-sizing
阿新 • • 發佈:2019-01-03
盒模型
以上圖為例: 在w3c標準盒模型下, 元素實際寬等於width + padding-left + padding-right + border-left + border-right + margin-left + margin-right 元素實際高等於height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
怪異盒模型box-sizing
box-sizing;以特定的方式定義匹配某個區域的特定元素。 box-sizing可以取以下三個值:兩種模式的區別:
標準模式會被設定的padding撐開,而怪異模式則相當於將盒子的大小固定好,再將內容裝入盒子。盒子的大小並不會被padding所撐開。