sandbox.html 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>getSize</title>
  6. <style>
  7. .container {
  8. width: 300px;
  9. height: 200px;
  10. margin-bottom: 10px;
  11. border: 1px solid;
  12. position: relative;
  13. }
  14. .box {
  15. color: blue;
  16. background: pink;
  17. }
  18. .border-box {
  19. -webkit-box-sizing: border-box;
  20. -moz-box-sizing: border-box;
  21. box-sizing: border-box;
  22. }
  23. #box1, #box2 {
  24. width: 50%;
  25. height: 50%;
  26. border: 10px solid;
  27. padding: 10px;
  28. }
  29. #box3, #box4 {
  30. width: 50%;
  31. height: 50%;
  32. border: 0px solid;
  33. margin: 10%;
  34. padding: 10px;
  35. }
  36. #box5, #box6 {
  37. width: 100px;
  38. height: 100px;
  39. border: 10px solid;
  40. margin: 10%;
  41. padding: 5%;
  42. }
  43. </style>
  44. </head>
  45. <body>
  46. <h1>getSize</h1>
  47. <div class="container">
  48. <div id="box1" class="box">box1</div>
  49. </div>
  50. <div class="container">
  51. <div id="box2" class="box border-box">box2</div>
  52. </div>
  53. <div class="container">
  54. <div id="box3" class="box">box3</div>
  55. </div>
  56. <div class="container">
  57. <div id="box4" class="box border-box">box4</div>
  58. </div>
  59. <div class="container">
  60. <div id="box5" class="box">box5</div>
  61. </div>
  62. <div class="container">
  63. <div id="box6" class="box border-box">box6</div>
  64. </div>
  65. <script src="get-size.js"></script>
  66. </body>
  67. </html>