search

博客列表 >绝对定位与固定定位和flex必会的容器与项目属性

绝对定位与固定定位和flex必会的容器与项目属性

P粉890456325
P粉890456325原创
2023年02月13日 12:24:23279浏览

1. 实例演示绝对定位与固定定位,并描述联系与区别 2. 实例演示flex必会的容器与项目属性

绝对定位

绝对: position: absolute, 相对距离最近的定位元素发生偏移

宽度自动收缩到内容宽度, 释放所占空间,后面顶上去,但是还在父容器中
li 定位元素
li ul 不是定位元素
li ul body 非定位
html 非定位
所有祖先都不是可定位元素,没有参考物了,就得找一个默认的,视口或html 

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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.     <ul>
  11.       <li class="relative">item1</li>
  12.       <li class="absolute">item2</li>
  13.       <!-- <li style="background: green">item3</li> -->
  14.     </ul>
  15.     <style>
  16.       /* 初始化 */
  17.       * {
  18.         margin: 0;
  19.         padding: 0;
  20.         box-sizing: border-box;
  21.       }
  22.       body {
  23.         border: 5px solid red;
  24.       }
  25.       /* 基本样式 */
  26.       ul {
  27.         width: 400px;
  28.         height: 400px;
  29.         border: 5px solid blue;
  30.       }
  31.       ul li {
  32.         height: 30px;
  33.         border: 1px solid #000;
  34.         list-style: none;
  35.       }
  36.       ul li:first-child {
  37.         background-color: yellow;
  38.       }
  39.       ul li:first-child + * {
  40.         background-color: lightgreen;
  41.       }
  43.       /* 相对定位 */
  44.       ul li.relative {
  45.         /* 转为"可定位元素"  */
  46.         position: relative;
  47.         top: 10px;
  48.         left: 10px;
  49.         /* item2没有向上偏移,说明 item1 还在文档流中,所占空间没有释放 */
  50.       }
  52.       /* 绝对定位 */
  53.       ul li.absolute {
  54.         /* 定位元素 */
  55.         position: absolute;
  56.         /* 宽度自动收缩到内容宽度, 释放所占空间,后面顶上去,但是还在父容器中 */
  58.         /* top: 40px
  59.         item1.height(28+2) + ul.border(5) + body.border(5) = 40px
  61.         left: 10px
  62.         ul.border(5) + body.border(5) = 10px
  63.         */
  65.         top: 100px;
  66.         left: 100px;
  68.         width: auto;
  69.         height: auto;
  71.         right: 200px;
  72.         bottom: 100px;
  74.         /* 宽度受限, 高度受内容伸展的空间进行布局 */
  75.         /* 水平居中非常容易,但垂直极困难 */
  77.         top: 0;
  78.         left: 0;
  79.         right: 0;
  80.         bottom: 0;
  82.         width: 200px;
  83.         height: 200px;
  85.         margin: auto auto;
  86.       }
  88.       /* li 定位元素 */
  89.       /* li ul 不是定位元素 */
  90.       /* li ul body 非定位 */
  91.       /* html 非定位 */
  92.       /* 所有祖先都不是可定位元素,没有参考物了,就得找一个默认的,视口或html */
  94.       ul {
  95.         /* 将 li 的包容器,转为定位元素 */
  96.         position: relative;
  97.       }
  98.     </style>
  99.   </body>
  100. </html>

固定定位

固定: position: fixed, 总相对于最初包含块(html)偏移

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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">广告位/客服</div>
  12.     <style>
  13.       * {
  14.         margin: 0;
  15.         padding: 0;
  16.       }
  17.       .box {
  18.         width: 150px;
  19.         height: 150px;
  20.         background-color: lightgreen;
  22.         /* 固定定位 */
  23.         position: fixed;
  24.         /* top: 0;
  25.         left: 0; */
  26.         /* 右上角 */
  27.         /* top: 0;
  28.         right: 0; */
  29.         /* 右下角 */
  30.         /* left: 0;
  31.         bottom: 0; */
  32.         /* 右下角 */
  33.         right: 20px;
  34.         bottom: 50px;
  35.       }
  37.       body {
  38.         min-height: 2000px;
  39.       }
  40.     </style>
  41.   </body>
  42. </html>

绝对定位与固定定位的区别在 绝对: position: absolute, 相对距离最近的定位元素发生偏移，而固定: position: fixed, 总相对于最初包含块(html)偏移。

flex属性

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>flex属性</title>
  8.   </head>
  9.   <body>
  10.     <div class="container">
  11.       <div class="item">item1</div>
  12.       <div class="item">item2</div>
  13.       <div class="item">item3</div>
  14.     </div>
  16.     <style>
  17.       /* flex容器 */
  18.       .container {
  19.         /* width: 450px; */
  20.         height: 100px;
  21.         /* 使用flex进行布局,先将它转为flex容器元素 */
  22.         display: flex;
  23.         /* display: inline-flex; */
  25.         /* 容器属性,必须写到容器元素中 .container */
  26.         /* 主轴方向 */
  27.         /* flex-direction: row;默认是水平行的方向
  28.         flex-wrap: nowrap; 默认是不换行 wrap是换行*/
  29.         /* flex-flow: flex-direction flex-wrap; 合并属性*/
  30.         flex-flow: row nowrap;
  31.         /* 为了与后面的Grid布局属性对应 */
  32.         /* `place-content`: 项目在"主轴"上的排列方式 */
  33.         place-content: start;
  34.         /* place-content: start;默认是左边排列 */
  35.         /* place-content: end; 右边排列*/
  36.         /* 实际上, 主轴上的项目,可以独立进行排列 */
  37.         /* 二端对齐 */
  38.         /* place-content: space-between; */
  39.         /* 分散对齐 两边空间两倍*/
  40.         /* place-content: space-around; */
  41.         /* 平均对齐 两边空间重叠*/
  42.         /* place-content: space-evenly; */
  44.         /* place-items: 项目在"交叉轴"上的排列方式 */
  45.         /* place-items: stretch;默认值
  46.         place-items: start;顶部对齐
  47.         place-items: end;底部对齐
  48.         place-items: center;居中对齐 */
  49.       }
  51.       /* flex容器中的子元素,就是flex项目 */
  52.       .container > .item {
  53.         background-color: lightgreen;
  54.         /* height: 50px; */
  56.         /* width: 150px;
  57.         width: 250px; */
  59.         /* 1. flex: 放大比例 允许收缩 主轴空间 */
  60.         /* 默认,0不放大,1但可以自动收缩 */
  61.         flex: 0 1 auto;
  62.         /* flex: initial;默认值 */
  64.         /* 2. 完全响应式,允许放大和自动收缩 */
  65.         flex: 1 1 auto;
  66.         /* flex: auto; */
  68.         /* 完全不响应 */
  69.         flex: 0 0 auto;
  70.         /* flex: none; */
  72.         /* 常用 */
  73.         flex: 1;
  74.         /* 等价于,后面二个值取默认值 1 auto */
  75.         flex: 1 1 auto;
  77.         flex: 1; /* flex: auto */
  78.       }
  79.       /* :first-child第一个  */
  80.       /* :last-child最后一个  */
  82.       .container .item:first-child,
  83.       .container .item:last-child {
  84.         background-color: yellow;
  85.         flex: 1;
  86.       }
  87.       /* 中间占据三份 两边各占一份 */
  88.       .container .item:first-child + * {
  89.         flex: 3;
  91.         /* place-self: start;顶部对齐  交叉轴上对齐方式 */
  92.       }
  94.       /* 默认每个项目的order = 0 */
  95.       /* 越小越靠前 */
  97.       .container .item:first-child {
  98.         order: 5;
  99.       }
  100.       .container .item:first-child + * {
  101.         order: 6;
  102.       }
  103.       .container .item:first-child {
  104.         order: 7;
  105.         order: -1;
  106.       }
  107.     </style>
  108.   </body>
  109. </html>
上一条：仿PHP中文网其中片段下一条：全新知识付费小程序源码开发（uniapp完整包）
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多