Home
HTML
HTML
Tryit: HTML
运行 ❯
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <style> #example1 { box-sizing: content-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue; } #example2 { box-sizing: border-box; width: 300px; height: 100px; padding: 30px; border: 10px solid blue; } </style> </head> <body> <h1>box-sizing 属性</h1> <p>定义如何计算元素的宽度和高度：它们是否应该包含填充和边框。</p> <h2>box-sizing: content-box (default):</h2> <p>宽度和高度只适用于元素的内容：</p> <div id="example1">这个 div 的宽度为 300px。 但是全宽是300px + 20px（左右边框）+ 60px（左右padding）= 380px！</div> <h2>box-sizing: border-box:</h2> <p>宽度和高度适用于元素的所有部分：内容、填充和边框：</p> <div id="example2">这里，全宽是300px，不管怎样！</div> </body> </html>