W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!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>