search

博客列表 >定位原理、模态框以及三列布局

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

再见羊肉串儿
再见羊肉串儿原创
2021年07月21日 17:10:26671浏览
  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>
上一条：JQuery 常用方法下一条：作业_0706
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多