box-sizing-1.html 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <!DOCTYPE html>
  2. <html lang="en-US">
  3. <head>
  4. <title>test of box-sizing</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  6. <meta http-equiv="Content-Style-Type" content="text/css">
  7. <style type="text/css">
  8. body { font-size: 10px; line-height: 1; }
  9. table { border-spacing: 0; margin: 0; }
  10. td { border: 1px solid; padding: 1px; }
  11. td > div { width: 100px; }
  12. td#bscontent > div > div { box-sizing: content-box; }
  13. td#bsborder > div > div { box-sizing: border-box; }
  14. td > div > div {
  15. margin-left: 1px;
  16. border-left: 2px solid;
  17. padding-left: 4px;
  18. padding-right: 8px;
  19. border-right: 16px solid;
  20. margin-right: 32px;
  21. background: yellow;
  22. margin-bottom: 1px;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <table><tr>
  28. <td id="bscontent"><div>
  29. <!-- box-sizing: content-box -->
  30. <div style="width: auto">A B</div>
  31. <div style="width: -moz-max-content">A B</div>
  32. <div style="width: -moz-min-content">A B</div>
  33. <div style="width: -moz-fit-content">A B</div>
  34. <div style="width: -moz-available">A B</div>
  35. <div style="width: 50px">A B</div>
  36. <div style="width: 60%">A B</div>
  37. </div></td>
  38. <td id="bsborder"><div>
  39. <!-- box-sizing: border-box -->
  40. <div style="width: auto">A B</div>
  41. <div style="width: -moz-max-content">A B</div>
  42. <div style="width: -moz-min-content">A B</div>
  43. <div style="width: -moz-fit-content">A B</div>
  44. <div style="width: -moz-available">A B</div>
  45. <div style="width: 50px">A B</div>
  46. <div style="width: 60%">A B</div>
  47. </div></td>
  48. </tr></table>
  49. </body>
  50. </html>