Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 定位原理、模态框以及三列布局
Blogger Information
Blog 17
fans 0
comment 0
visits 12848
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
定位原理、模态框以及三列布局
再见羊肉串儿
Original
672 people have browsed it
  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>
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