使用
box-sizing:content-box || border-box || inherit
原理圖
計算
怪異模型|IE模型
div寬度（定死） = 內容寬度+border寬度+padding寬度 //改變border寬度，div寬度不會變化標準模型
div寬度 = 內容寬度+border寬度+padding寬度 //改變border寬度，div寬度會變化
代碼
<html> <head></head> <style> .demo { border: 1px solid; } .box { display: inline-block; width: 200px; height: 200px; border:10px solid; background-color:red; box-sizing: border-box; } </style> <body> <div class="demo"> <div class="box">123</div> <div class="box">234</div> </div> </body> </html>
要點
- 當不對Doctype進行定義時，會觸發怪異模式
- 一般佈局採用怪異模型（border-box）解析，這樣可以很好的保持網頁佈局顯示