定位原理、模态框以及三列布局


  1. 相对定位(position:relative):相对于自身之前的位置发生偏移进行定位;
  2. 绝对定位(position:absolute):相对于上级定位元素进行定位;
  3. 固定定位(position:fixed):相对于 html 进行绝对定位;

div 居中,如果只是使用 margin:auto,这个只能保证左右居中,因为垂直方向默认的高度是 0,高度需要有内容决定,所以这个时候需要找一个定位空间,然后再使用 margin:auto

  1. <style>
  2. .parent {
  3. background-color: aqua;
  4. height: 20em;
  5. width: 20em;
  6. /* position: relative; */
  7. }
  8. .box {
  9. background-color: blue;
  10. height: 10em;
  11. width: 10em;
  12. /* position: absolute;
  13. left: 0;
  14. right: 0;
  15. top: 0;
  16. bottom: 0; */
  17. margin: auto;
  18. }
  19. </style>
  20. <body>
  21. <div class="parent">
  22. <div class="box"></div>
  23. </div>
  24. </body>

如果注释的定位不放开,显示的结果是下图:

但是如果打开注释则是居中在浅蓝色方框正中间,如图:


采用定位做模态框和三列布局

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. }
  7. header {
  8. height: 5em;
  9. background-color: aqua;
  10. }
  11. footer {
  12. height: 5em;
  13. background-color: green;
  14. }
  15. .container {
  16. margin: 0.5em 0;
  17. /* min-height: 100vh; */
  18. /* 总高度是:100vh */
  19. /* 扣除页眉页脚的宽高还有margin的大小就是container的大小 */
  20. min-height: calc(100vh - 5em - 5em - 1em);
  21. position: relative;
  22. }
  23. .container aside {
  24. min-height: inherit;
  25. }
  26. /* 绝对定位必须要有一个定位父级 */
  27. .container aside:nth-of-type(1) {
  28. width: 10em;
  29. background-color: greenyellow;
  30. position: absolute;
  31. top: 0;
  32. left: 0;
  33. }
  34. .container aside:last-of-type {
  35. width: 10em;
  36. background-color: hotpink;
  37. position: absolute;
  38. right: 0;
  39. top: 0;
  40. }
  41. .container main {
  42. min-height: inherit;
  43. background-color: red;
  44. position: absolute;
  45. left: 10.5em;
  46. right: 10.5em;
  47. }
  48. .motaikuang {
  49. position: fixed;
  50. top: 0;
  51. left: 0;
  52. right: 0;
  53. bottom: 0;
  54. background-color: rgb(0, 0, 0, 0.5);
  55. }
  56. /* 这里面的left 0:相当于整个html最左边;right 0:相当于整个html的最右边;上下左右都从最边开始,所以定位空间就是整个页面 */
  57. .motaikuang-img img {
  58. position: fixed;
  59. top: 0;
  60. left: 0;
  61. right: 0;
  62. bottom: 0;
  63. margin: auto;
  64. }
  65. </style>
  66. <body>
  67. <header>我是头部</header>
  68. <div class="container">
  69. <aside>我是左边栏</aside>
  70. <main>我是内容</main>
  71. <aside>我是右边栏</aside>
  72. </div>
  73. <footer>我是底部</footer>
  74. <div class="motaikuang">
  75. <div class="motaikuang-img">
  76. <img src="huoying.jpg" />
  77. </div>
  78. </div>
  79. </body>