博客列表 >盒模型的基础和居中(0617)

盒模型的基础和居中(0617)

丶久而旧之丶
丶久而旧之丶原创
2020年06月22日 15:19:07528浏览

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. <title>盒模型</title>
  7. <style>
  8. /* 样式初始化,设置了整个页面内外边距为0,
  9. 设置盒子大小不随内边距和边框的大小而变化,
  10. 设置背景裁切到内容区不覆盖内边距和边框 */
  11. * {
  12. margin: 0;
  13. padding: 0;
  14. box-sizing: border-box;
  15. background-clip: content-box;
  16. }
  17. /* 设置第一个盒子的宽高,背景色,边框,下外边距和内边距 */
  18. .box1 {
  19. width: 200px;
  20. height: 200px;
  21. background-color: burlywood;
  22. border: 6px solid black;
  23. margin-bottom: 20px;
  24. padding: 20px;
  25. }
  26. /* 设置盒子的宽高,背景色,边框,内边距,上外边距,添加定位属性并使其向下和向右偏移 */
  27. .box2 {
  28. width: 200px;
  29. height: 200px;
  30. background-color: aquamarine;
  31. border: 2px solid black;
  32. padding: 20px;
  33. margin-top: 10px;
  34. position: relative;
  35. top: 10px;
  36. left: 20px;
  37. }
  38. /* 设置第三个盒子的宽高,背景色,边框,
  39. 添加绝对定位属性,通过偏移值充满整个父容器后用margin:auto进行水平垂直居中 */
  40. .box3 {
  41. width: 30px;
  42. height: 30px;
  43. background-color: beige;
  44. border: 2px solid black;
  45. position: absolute;
  46. top: 0;
  47. right: 0;
  48. bottom: 0;
  49. left: 0;
  50. margin: auto;
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <div class="box1"></div>
  56. <div class="box2">
  57. <div class="box3"></div>
  58. </div>
  59. </body>
  60. </html>

总结

1.了解了盒模型的基础知识(内边距,外边距,边框的表达)

2.明白了如何使背景只覆盖内容区而不会覆盖到内边距

3.了解了如何自定义盒子的大小,使其不会因调整内边距和边框而使得盒子的大小发生变化

4.了解块级元素的居中尤其是垂直居中是如何实现的

5.对于图片偏移的js代码多看回放,加深理解。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议