Blogger Information
Blog 56
fans 0
comment 4
visits 38119
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
CSS:盒模型-复习
异乡客
Original
737 people have browsed it
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <title>盒模型</title>
  8. </head>
  9. <body>
  10. <div class="box">
  11. </div>
  12. <style>
  13. .box {
  14. width: 200px;
  15. height: 250px;
  16. background-color: violet;
  17. /* border: 10px dashed currentColor; */
  18. background-clip: content-box;
  19. /* 顺时针方向 */
  20. /* padding:5px 10px 15px 20px; */
  21. /* padding:5px 10px 20px; */
  22. /* padding:5px 20px; */
  23. padding:5px;
  24. /* 改变盒子的计算方式,使得宽高就是设定的,不会破坏布局 */
  25. box-sizing: border-box;
  26. /* 边框设置 */
  27. /* border-top-width: 20px;
  28. border-top-style: solid;
  29. border-top-color:red; */
  30. border: 5px solid red;
  31. }
  32. *{
  33. padding: 0;
  34. margin: 0;
  35. box-sizing: border-box;
  36. }
  37. </style>
  38. </body>
  39. </html>
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post