​x
 
<!DOCTYPE html>
<html>
<head>
<style> 
div.container {
  width: 300px;
  border: 1px solid;
}
​
div.box {
  width: 150px;
  border: 3px solid coral;
  float: left;
  padding: 10px;
}
</style>
</head>
<body>
​
<div class="container">
<div class="box" id="box1">这是 BOX1。</div>
<div class="box" id="box2">这是 BOX2。</div>
<div style="clear:both;"></div>
</div>
​
<p>一个 300 像素的容器内有两个 150 像素的框。这应该很合适，但由于边框和内边距，两个框各自占用的空间超过 150 像素。这个“问题”可以通过将 boxSizing 属性设置为 “border-box” 来解决。</p>
​
<p>点击“试一试”按钮，将两个框的 boxSizing 属性设置为 “border-box”：</p>
​
<button onclick="myFunction()">试一试</button>
​
<script>
function myFunction() {
  document.getElementById("box1").style.MozBoxSizing = "border-box"; /* 针对老版本 Firefox 的代码 */
  document.getElementById("box2").style.MozBoxSizing = "border-box"; /* 针对老版本 Firefox 的代码 */
  document.getElementById("box1").style.boxSizing = "border-box";
  document.getElementById("box2").style.boxSizing = "border-box";
}
</script>
​
</body>
</html>
​