Home
HTML
HTML
Tryit: HTML
运行 ❯
×
Change Orientation
Change Theme, Dark/Light
<!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> <h1>使用 JavaScript 更改框大小</h1> <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 像素。 这个“问题”可以通过将 box-sizing 属性设置为“border-box”来解决。</p> <p>点击“试一试”按钮，将两个框的 box-sizing 属性设置为 "border-box"：</p> <button onclick="myFunction()">试一试</button> <script> function myFunction() { document.getElementById("box1").style.boxSizing = "border-box"; document.getElementById("box2").style.boxSizing = "border-box"; } </script> </body> </html>