search

博客列表 >定位与定位演示/flex布局必会的容器与项目属性

定位与定位演示/flex布局必会的容器与项目属性

茂林
茂林原创
2023年03月30日 21:36:49831浏览
  1. 实例演示绝对定位与固定定位,并描述联系与区别 2. 实例演示flex必会的容器与项目属性

元素定位

一、定位position

1 定位术语

  1. 定位元素:position: relative,absolute,fixed；
  2. 最初包含块：包含了<html>的不可见的，但可感知的区块，类似“视口”；
  3. 参照物：自身；祖先定位元素；最初包含块；

    2 坐标系

    1- 起始点: 左上角,坐标[x,y]=>[0,0]
    2- 变化方向: 向右x变大, 向下y变大
    3- 页面四个顶点用: top,left,right,bottom 表示

    3 定位元素

    1- 定位元素: 也叫”可定位元素”,允许用户自定义元素的位置与排列方式
    2- 判断依据: position: relative | absolute | fixed

    4 定位类型

    1-. 静态: position: static, 文档流中的元素的默认定位方式
    2-. 相对: position: relative, 相对原始位置偏移,仍在文档流中
    3-. 绝对: position: absolute, 相对距离最近的定位元素发生偏移
    4-. 固定: position: fixed, 总相对于最初包含块(html)偏移
    5-. 粘性: position:sticky:static与fixed，自动切换,元素自动悬停

    5 绝对定位与固定定位的区别与联系

    1.绝对定位时，宽度自动收缩到内容的宽度，释放所占空间，后面顶上去，但是还在父容器中；
    2.绝对定位的元素不再存在于正常文档布局流中；
    3.固定定位的工作方式与绝对定位的工作方式完全相同，只有一个区别，绝对定位将元素固定在相对于其位置最近的一个祖先，如果没有则为初始包含他的块，而固定定位固定元素是相对于浏览器视口本身；
    4.固定定位一般用于，持久的导航栏，广告栏，页面聊天栏等。

各种定位演示

相对定位position:relative和绝对定位position:absolute的演示

  1. <style>
  2.       /*整体初始化*/
  3.       * {
  4.         margin: 0px;
  5.         padding: 0px;
  6.         box-sizing: border-box;
  7.       }
  8.       ul {
  9.         width: 200px;
  10.         height: 100px;
  11.         border: 5px solid blue;
  12.       }
  13.       ul li {
  14.         border: 5px solid red;
  15.         list-style: none;
  16.       }
  17.       ul li:first-child {
  18.       top: 10px;
  19.       left: 10px;
  20.       }
  21.       ul li:last-child {
  22.         border: 5px solid lightblue;
  23.       }
  24.          /* 相对定位*/
  25.       ul li.item1 {
  26.             /*转为定位元素*/
  27.         position: relative;
  28.         /*
  29.         relative:将第一个li转成相对定位元素后，item2没有向上偏移，说明item1还在文档流中，所占的空间没有释放。
  30.         */
  31.       }
  32.     </style>
  34.     <ul>
  35.       <li class='item1'>item1</li>
  36.       <li>item2</li>
  37.     </ul>
  38.   </body>

静态定位（默认）
静态定位
相对定位
相对定位

  1.   <body>
  2.     <style>
  3.       /*整体初始化*/
  4.        * {
  5.         margin: 0px;
  6.         padding: 0px;
  7.         box-sizing: border-box;
  8.       }
  9.       body {
  10.         border: 5px solid red;
  11.       }
  12.       ul {
  13.         width: 400px;
  14.         height: 400px;
  15.         border: 5px solid blue;
  16.       }
  17.      ul li{
  18.       height: 30px;
  19.       border: 1px solid #000;
  20.       list-style: none;
  21.      }
  22.       ul li:first-child {
  24.         background-color: red;
  26.       }
  27.       ul li:first-child+* {
  28.         background-color: yellow;
  29.       }
  30.          /* 相对定位*/
  31.       ul li.item1 {
  32.             /*转为定位元素*/
  33.         position: relative;
  34.         /*
  35.         relative:将第一个li转成相对定位元素后，item2没有向上偏移，说明item1还在文档流中，所占的空间没有释放。
  36.         */
  37.     top: 10px;
  38.     left: 10px;
  39.       }
  40.     /*绝对定位*/
  41.     ul li.item2{
  42.      position: absolute;
  44.       /*宽度自动收缩到内容的宽度，释放所占空间，后面顶上去，但是还在父容器中*/
  45.       /*原始top:40px
  46.       item1.height(28+2)+ul.border(5)+body.border(5)=40px
  47.       原始left:10px;
  48.       ul.border(5)+body.border(5)=10px
  49.       */
  50.       top: 100px;
  51.       left:100px;
  52.       width: auto;
  53.       height: auto;
  54.       right:200px;
  55.       bottom: 50px;
  56.     }
  57.     /*宽度受限，高度受内容伸展的空间进行布局
  58.      水平居中非常容易，但垂直居中极困难
  59.     */
  60.       /* li 定位元素 */
  61.       /* li ul 不是定位元素 */
  62.       /* li ul body 非定位 */
  63.       /* html 非定位 */
  64.       /* 所有祖先都不是可定位元素,没有参考物了,就得找一个默认的,视口或html */
  65.     ul{
  66.       /*将li的包容器，转为定位元素*/
  67.       position: relative;
  68.     }
  69.     </style>
  71.     <ul>
  72.       <li class='item1'>item1</li>
  73.       <li class='item2'>item2</li>
  74.     </ul>
  75.   </body>

固定定位 与 粘性定位

  1.   <style>
  2.     /*页面初始化*/
  3.     * {
  4.       margin: 0px;
  5.       padding: 0px;
  6.       box-sizing: border-box;
  7.     }
  8.     body {
  9.       min-height: 2000px;
  10.     }
  11.     .box {
  12.       width: 150px;
  13.       height: 50px;
  14.       background-color: lightblue;
  15.       /*将box转成固定定位元素,默认的位置是左上起始位置*/
  16.       position: fixed;
  17.       /*右上*/
  18.       /*   right: 0px;
  19.       top: 0px; */
  20.       /*  左下 */
  21.       /*   left: 0px;
  22.       bottom: 0px; */
  23.       /*   右下 */
  24.       right: 0px;
  25.       bottom: 0px;
  26.     }
  27.   </style>
  28.   <body>
  29.     <div class="box">固定定位：广告位或客服聊天等用途</div>
  30.   </body>


粘性定位

  1.     <style>
  2.         article figure figcaption{
  3.             background-color:lightblue;
  4.             color:color;
  5.             border:1px solid #000;
  6.             padding:1em;
  7.             font-size: 1.3em;
  9.             /*粘性定位*/
  10.             position:sticky;
  11.             /*当标题滚动到时自动*/
  12.             top:0px;
  13.         }
  14.     </style>
  15.   </head>
  16.   <body>
  17.     <article>
  18.       <figure>
  19.         <figcaption>position: sticky </figcaption>
  20.         <p>
  21.           还有一个可用的位置值称为 position:
  22.           sticky，比起其他位置值要新一些。它基本上是相对位置和固定位置的混合体，它允许被定位的元素表现得像相对定位一样，直到它滚动到某个阈值点（例如，从视口顶部起10像素）为止，此后它就变得固定了。例如，它可用于使导航栏随页面滚动直到特定点，然后粘贴在页面顶部。
  23.         </p>
  24.         <figcaption>定位上下文 </figcaption>
  25.         <p>
  26.             哪个元素是绝对定位元素的“包含元素“？这取决于绝对定位元素的父元素的 position 属性。(参见 Identifying the containing block).
  27.             如果所有的父元素都没有显式地定义 position 属性，那么所有的父元素默认情况下 position 属性都是 static。结果，绝对定位元素会被包含在初始块容器中。这个初始块容器有着和浏览器视口一样的尺寸，并且<html>元素也被包含在这个容器里面。简单来说，绝对定位元素会被放在<html>元素的外面，并且根据浏览器视口来定位。
  28.             绝对定位元素在 HTML 源代码中，是被放在<body>中的，但是在最终的布局里面，它离页面 (而不是<body>) 的左边界、上边界有 30px 的距离。我们可以改变定位上下文 —— 绝对定位的元素的相对位置元素。通过设置其中一个父元素的定位属性 —— 也就是包含绝对定位元素的那个元素（如果要设置绝对定位元素的相对元素，那么这个元素一定要包含绝对定位元素）。为了演示这一点，将以下声明添加到你的 body 规则中：
  29.     </p>
  30.       </figure>
  31.     </article>

二 flex 布局

flex 布局简介

1.flex:弹性盒布局
2.一维布局:每次只能在水平或垂直一个方向布局

flex 术语

1.容器：display:flex / inline-flex
2.项目：flex 容器的子元素（仅限子元素，可嵌套）
3.主轴：项目排列参考线
4.交叉轴：与主轴垂直的参考线

容器属性

1.display:容器类型（块或行内） flex
2.flex-flow:主轴方向与是否换行。
3.place-content:项目在“主轴”上的排列方式；
4.place-items:项目在“交叉轴”上的排列方式；

项目属性

1.flex:项目在“主轴”上的缩放比例与宽度；
2.place-self:某项目在“交叉轴”上的排列方式；
3.order:项目在“主轴”上的排列方式；

flex布局容器和项目属性演示

1. 简写属性flex-flow: flex-direction 和 flex-wrap 组合为简写属性 flex-flow。

  1. 第一个指定的值为 flex-direction,更改 flex 元素的排列方向,`row` 横排/`column` 竖排
  2. 第二个指定的值为 flex-wrap,项目太大而无法全部显示在一行中，则会换行显示, `wrap` 换行/`nowrap` 不换行
  1.     <div class="container">
  2.       <div>One</div>
  3.       <div>Two</div>
  4.       <div>Three</div>
  5.       <div>One</div>
  6.       <div>Two</div>
  7.       <div>Three</div>
  8.       <div>One</div>
  9.       <div>Two</div>
  10.       <div>Three</div>
  11.     </div>
  12.   </body>
  13.   <style>
  14.     .container {
  15.       width: 300px;
  16.       height: 150px;
  17.       display: flex;
  18.       flex-flow: row wrap;
  19.     }
  20.     .container > div {
  21.       border: 1px solid lightblue;
  22.       background-color: beige;
  23.     }
  24.   </style>

结果如下

### # 2.place-content: 项目在主轴上的排列方式

  1. place-content: star; 从头部排列 —主轴项目整体排列
  2. place-content:end;从尾部排列 —主轴项目整体排列
  3. place-content: space-between;—主轴项目独立排列—两端对齐
  4. place-content: space-around;—主轴项目独立排列—分散对齐
  5. place-content: space-evenly;—主轴项目独立排列—平均对齐

一 place-content: star; 从头部排列

  1. <body>
  2.     <div class="container">
  3.       <div>O n e</div>
  4.       <div>T w o</div>
  5.       <div>Three</div>
  6.       <!--   <div>F our</div> -->
  7.     </div>
  8.   </body>
  9.   <style>
  10.     .container {
  11.       width: 300px;
  12.       /* height: 50px; */
  13.       display: flex;
  14.       flex-flow: row wrap;
  15.       /* `place-content: star;` 从头部排列 */
  16.       place-content: start;
  17.     }
  18.     .container > div {
  19.       border: 1px solid lightblue;
  20.       background-color: beige;
  21.       height: 50px;
  22.     }
  23.   </style>

结果
从开始对齐

二 place-content:end;从尾部排列

  1.   <body>
  2.     <div class="container">
  3.       <div>O n e</div>
  4.       <div>T w o</div>
  5.       <div>Three</div>
  6.       <!--   <div>F our</div> -->
  7.     </div>
  8.   </body>
  9.   <style>
  10.     .container {
  11.       width: 300px;
  12.       /* height: 50px; */
  13.       display: flex;
  14.       flex-flow: row wrap;
  15.       /*   `place-content:end; `从尾部排列 */
  16.       place-content: end;
  17.     }
  18.     .container > div {
  19.       border: 1px solid lightblue;
  20.       background-color: beige;
  21.       height: 50px;
  22.     }

结果
尾部对齐
三 place-content: space-between;两端对齐 

  1.  <body>
  2.     <div class="container">
  3.       <div>O n e</div>
  4.       <div>T w o</div>
  5.       <div>Three</div>
  6.       <!--   <div>F our</div> -->
  7.     </div>
  8.   </body>
  9.   <style>
  10.     .container {
  11.       width: 300px;
  12.       /* height: 50px; */
  13.       display: flex;
  14.       flex-flow: row wrap;
  15.       /*  `place-content: space-between;`两端对齐 */
  16.       place-content: space-between;
  17.     }
  18.     .container > div {
  19.       border: 1px solid lightblue;
  20.       background-color: beige;
  21.       height: 50px;
  22.     }
  23.   </style>

结果
两端对齐排列

四 place-content: space-around;分散对齐

  1.   <body>
  2.     <div class="container">
  3.       <div>O n e</div>
  4.       <div>T w o</div>
  5.       <div>Three</div>
  6.       <!--   <div>F our</div> -->
  7.     </div>
  8.   </body>
  9.   <style>
  10.     .container {
  11.       width: 300px;
  12.       /* height: 50px; */
  13.       display: flex;
  14.       flex-flow: row wrap;
  15.       /*  `place-content: space-around;`分散对齐 */
  16.       place-content: space-around;
  17.     }
  18.     .container > div {
  19.       border: 1px solid lightblue;
  20.       background-color: beige;
  21.       height: 50px;
  22.     }
  23.   </style>

结果
分散对齐

五 place-content: space-evenly;平均对齐

  1.   <body>
  2.     <div class="container">
  3.       <div>O n e</div>
  4.       <div>T w o</div>
  5.       <div>Three</div>
  6.       <!--   <div>F our</div> -->
  7.     </div>
  8.   </body>
  9.   <style>
  10.     .container {
  11.       width: 300px;
  12.       /* height: 50px; */
  13.       display: flex;
  14.       flex-flow: row wrap;
  15.       /*  `place-content: space-evenly;`平均对齐 */
  16.       place-content: space-evenly;
  17.     }
  18.     .container > div {
  19.       border: 1px solid lightblue;
  20.       background-color: beige;
  21.       height: 50px;
  22.     }
  23.   </style>

结果
平均对齐

3.place-items:项目在“交叉轴”上的排列方式

一 place-items: start; 从开始对齐 与place-items:stretch:默认方式 相同

  1.   <style>
  2.     .container {
  3.       width: 300px;
  4.       height: 150px;
  5.       display: flex;
  6.       flex-flow: row wrap;
  7.       /* place-content: space-evenly;*/
  8.       place-items: start;
  9.     }
  10.     .container > div {
  11.       border: 1px solid lightblue;
  12.       background-color: beige;
  13.       height: 30px;
  14.     }
  15.   </style>

结果

二 place-items: center; 居中对齐

  1.   <body>
  2.     <div class="container">
  3.       <div>O n e</div>
  4.       <div>T w o</div>
  5.       <div>Three</div>
  6.       <!--   <div>F our</div> -->
  7.     </div>
  8.   </body>
  9.   <style>
  10.     .container {
  11.       width: 300px;
  12.       height: 150px;
  13.       display: flex;
  14.       flex-flow: row wrap;
  15.       /* place-content: space-evenly;*/
  16.       place-items: center;
  17.     }
  18.     .container > div {
  19.       border: 1px solid lightblue;
  20.       background-color: beige;
  21.       height: 30px;
  22.     }
  23.   </style>

三 place-items: end; 底部对齐

  1.   <body>
  2.     <div class="container">
  3.       <div>O n e</div>
  4.       <div>T w o</div>
  5.       <div>Three</div>
  6.       <!--   <div>F our</div> -->
  7.     </div>
  8.   </body>
  9.   <style>
  10.     .container {
  11.       width: 300px;
  12.       height: 150px;
  13.       display: flex;
  14.       flex-flow: row wrap;
  15.       /* place-content: space-evenly;*/
  16.       place-items: end;
  17.     }
  18.     .container > div {
  19.       border: 1px solid lightblue;
  20.       background-color: beige;
  21.       height: 30px;
  22.     }
  23.   </style>

结果

项目属性演示

1. flex: 放大比例 允许收缩 主轴空间
默认，不放大，但可以自动收缩

上一条：网络计算器的案例练习下一条：Token验证
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多