當前位置：
首頁 >
CSS3盒模型box-sizing属性详解，布局更方便
發布時間：2025/6/15
63
豆豆
生活随笔
收集整理的這篇文章主要介紹了
CSS3盒模型box-sizing属性详解，布局更方便
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
使用方法：
- box-sizing: content-box;
- box-sizing: padding-box;
- box-sizing: border-box;
屬性解析：
當設置為content-box時，盒子的寬度和高度同默認寬度（不包括padding，border）；
當設置為padding-box時，盒子的寬度和高度包括padding區域；
當時設置為border-box時，盒子的寬度和高度包括padding和border區域；
注：瀏覽器支持性不做介紹，具體使用時請做具體測試，本人秉著早晚所有瀏覽器都會支持的態度寫此文。
樣例代碼：
<!doctype html> <html> <head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 200px;background-color: #000;color: #fff;margin: 30px auto;padding: 30px;border: 30px solid #f60;}.box-1 {-moz-box-sizing: content-box;}.box-2 {-moz-box-sizing: padding-box;}.box-3 {-moz-box-sizing: border-box;}</style> </head> <body><div class="box-1">content-box</div><div class="box-2">padding-box</div><div class="box-3">border-box</div> </body> </html>樣例圖片：（ff下測試）
?
本條目發布于2013年11月15日。屬于CSS3分類，被貼了?-moz-、box-sizing、盒模型?標簽。作者是聽心_cy。
總結
以上是生活随笔為你收集整理的CSS3盒模型box-sizing属性详解，布局更方便的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： css3 box-sizing属性
- 下一篇： jQuery - 获取并设置 CSS 类