Home
HTML
HTML
Tryit: HTML
运行 ❯
×
Change Orientation
Change Theme, Dark/Light
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } #example1 { width: 300px; padding: 40px; border: 15px solid blue; } #example2 { width: 300px; padding: 10px; border: 2px solid red; } </style> </head> <body> <h1>通用框大小调整</h1> <p>由于使用“box-sizing: border-box”的结果好得多，许多开发人员希望他们页面上的所有元素都以这种方式工作。 上面 head 部分中的第一种样式确保所有元素都以这种更直观的方式调整大小。 您设置的宽度就是您获得的宽度，而无需进行心算和管理来自多个属性的宽度的复杂性。 将此应用于所有元素是安全且明智的：</p> <div id="example1">这个div不管是padding还是border，全宽都是300px！</div> <br> <div id="example2">这个div也是全宽300px，不管padding还是border！</div> </body> </html>