search

博客列表 >相对定位与绝对定位的区别和联系，flex必会的容器与项目属性

相对定位与绝对定位的区别和联系，flex必会的容器与项目属性

Jet的博客
Jet的博客原创
2023年02月11日 19:33:45526浏览

一、相对定位与绝对定位

1.1 基础代码

  1. <body>
  2.     <ul>
  3.         <li class="relative">item1</li>
  4.         <li class="absolute">item2</li>
  5.         <li>item3</li>
  6.         <!--绝对定位不占原先空间-->
  7.     </ul>
  8.     <style>
  9.         /* 初始化 */
  10.         * { margin:0; padding:0; box-sizing: border-box;}
  11.         body {border: 5px solid red;}
  12.         /* 基本样式 */
  13.         ul { width: 400px; height: 400px; border:5px solid blue; }
  14.         ul li { height: 30px; border: 1px solid black; list-style: none;}
  15.         ul li:first-child { background-color: bisque;}
  16.             /* *号：后面所有的元素*/
  17.         ul li:first-child + * { background-color:lightgreen; }        
  18.     </style>
  19. </body>

1.2 相对定位

  1.         /*相对定位*/
  2.         ul li.relative {
  3.             position: relative; top: 10px; left: 10px;
  4.             /*
  5.                 itme1相对于自己原来的位置移动；
  6.                 itme2没有偏移，继续保留原来的位置
  7.                 没有释放原空间
  8.             */
  9.         }

1.3 绝对定位

  1.         /* 绝对定位 */
  2.         ul li.absolute {
  3.             position:absolute;
  4.             top:0; left:0; bottom:0; right:0;
  5.             width: 200px;
  6.             height: 200px;
  7.             margin: auto;
  8.         /* 父级元素没有定位，即没有参考物，以浏览器html为准*/
  10.         }
  12.         /*
  13.             父级元素有定位，则以最近一级有定位元素为参照物
  14.             绝对定位不占原先空间
  15.         */
  16.         ul { position: relative;}

1.4 固定定位

  1.     <div class="box">广告位/客服</div>
  3.     <style>
  4.         * {
  5.             margin: 0;
  6.             padding: 0;
  7.         }
  8.         .box {
  9.             width: 150px;
  10.             height: 150px;
  11.             background-color: lightgreen;
  13.             /* 固定定位 */
  14.             position: fixed;
  15.             /* 右下角 */
  16.             right: 20px;
  17.             bottom: 50px; 
  18.         }
  20.         body {
  21.             min-height: 2000px;
  22.         }
  23.     </style>

1.5 粘性定位

  1.     <style>
  2.         article figure {
  3.             margin: 1em 0;
  4.         }
  5.         article figure figcaption {
  6.             background-color: lightgreen;
  7.             color: color;
  8.             border: 1px solid #000;
  9.             padding: 1em;
  10.             font-size: 1.3em;
  12.             /* 粘性定位 */
  13.             position: sticky;
  14.             /* 当标题滚动到顶部时自动停住 */
  15.             top: 0;
  16.         }
  17.     </style>
  1.     <article>
  3.         <figure>
  4.             <figcaption>11、标题11</figcaption>
  5.             <p>
  6.                 内容内容内容
  7.             </p>
  8.             <p>
  9.                 内容内容内容
  10.             </p>
  11.             <p>
  12.                 内容内容内容
  13.             </p>
  14.             <p>
  15.                 内容内容内容
  16.             </p>
  17.             <p>
  18.                 内容内容内容
  19.             </p>
  20.             <p>
  21.                 内容内容内容
  22.             </p>
  23.             <p>
  24.                 内容内容内容
  25.             </p>
  26.             <p>
  27.                 内容内容内容
  28.             </p>
  29.         </figure>
  31.         <figure>
  32.             <figcaption>1、标题1</figcaption>
  33.             <p>
  34.                 内容内容内容
  35.             </p>
  36.             <p>
  37.                 内容内容内容
  38.             </p>
  39.             <p>
  40.                 内容内容内容
  41.             </p>
  42.             <p>
  43.                 内容内容内容
  44.             </p>
  45.             <p>
  46.                 内容内容内容
  47.             </p>
  48.             <p>
  49.                 内容内容内容
  50.             </p>
  51.             <p>
  52.                 内容内容内容
  53.             </p>
  54.             <p>
  55.                 内容内容内容
  56.             </p>
  57.         </figure>
  58.     </article>

定位总结：

二、flex必会的容器与项目属性

1.1 基础代码

  1.     <div class="container">
  2.         <div class="item">item1</div>
  3.         <div class="item">item2</div>
  4.         <div class="item">item3</div>
  5.     </div>

1.2 flex布局

  2.     <style>
  3.         .container {
  4.            /* width:450px;*/
  5.             height: 100px;
  6.             /*使用flex进行布局，先将它转为flex容器元素*/
  7.             display: flex;
  8.         }
  9.     </style>

1.3 place-content主轴的排列方式

  1.             /*主轴的排列方式 place-content*/
  2.             place-content: start;
  3.             place-content: end;

1.4 place-items 交叉轴的排列方式

  1.             /*交叉轴的排列方式 place-items*/
  2.             place-items: end;
  3.             place-items: center;

1.5 独立排列

  1.             /*独立排列*/
  2.             place-content: space-between;   /*两端对齐*/
  3.             place-content: space-around;    /*分散对齐*/
  4.             place-content: space-evenly;    /*平均对齐*/

1.6 flex宽度比例

宽度会根据游览器宽度自动进行伸缩

  1.         .container .item:first-child,
  2.         .container .item:last-child{
  3.             background-color: yellow; flex:1;
  4.         }
  5.         .container .item:first-child + *{ 
  6.             flex: 3;
  7.         }

  1.         /* order 在项目主轴上的排列顺序，默认每个都是0 */
  2.         /* 数值越少越靠前 */
  3.         .container .item:first-child{
  4.             order:1;
  5.         }
  6.         .container .item:first-child + *{
  7.             order:2;
  8.         }

上一条：理解绝对定位/固定定位下一条：em,rem,vw,vh在实例中的演示
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多