最大流算法_css的position定位「建议收藏」

最大流算法_css的position定位「建议收藏」标准流(Normal Flow) 默认情况下,元素都是按照normal flow(标准流, 常规流, 正常流. 文档流(document flow)) 从左到右,从上到下按顺序摆放好 默认情况下,互相之间不存在层叠现象 在标准流中,可以使用margin, padding对元祖进行定位 margin还

标准流(Normal Flow)

默认情况下,元素都是按照normal flow(标准流, 常规流, 正常流. 文档流(document flow))

  1. 从左到右,从上到下按顺序摆放好
  2. 默认情况下,互相之间不存在层叠现象
    1. 最大流算法_css的position定位「建议收藏」
  3. 在标准流中,可以使用margin, padding对元祖进行定位
    1. margin还可以设置负数
    2. 缺点;
      1. 设置一个元素的margin或者padding,通常会影响到标准流中其他元素定位效果
      2. 不便于实现元素层叠效果

定位position

利用position可以对元素进行定位,常用取值4个:

  1. static: 静态定位,  (默认值),按照标准流进行布局
  2. relative: 相对定位 , 相对自己于标准流中的位置进行定位
  3. absolute: 绝对定位 ,  相对于非static的最近父元素进行绝对定位, 没有找到就是相对于浏览器窗口
  4. fixed 固定定位 , 相对于浏览器窗口进行固定定位

static:   静态定位

  1. static,是position的默认值
  2. 按照标准流进行布局
  3. 设置left,right,top,bottom没有作用

relative:  相对定位

  1. 元素按照mormal flow 布局
  2. 可以通过left, right,top,bottom距离大小进行定位
    1. 定位参照对象是元素自己原来的位置
  3. 距离元素原来的left,right,bottom,top相对定位(相对四堵墙),值还可以负值
  4. 最大流算法_css的position定位「建议收藏」
  5. <style>
        .box, .box2 {
    
          display: inline-block;
          width: 100px;
          height: 100px;
          
          line-height: 100px;
          text-align: center;
        }
    
        .box {
          background-color: rgb(95, 95, 160);
    
          position: relative;
          /* left: 50px; */
          /* right: 50px; */
          /* bottom: 50px; */
          top: 50px;
    
        }
    
        .box2 {
          background-color: olivedrab;
        }
      </style>
    </head>
    <body>
      <span class="box">元素</span>
      <span class="box2">标准流元素</span>
    </body>

    最大流算法_css的position定位「建议收藏」最大流算法_css的position定位「建议收藏」最大流算法_css的position定位「建议收藏」最大流算法_css的position定位「建议收藏」最大流算法_css的position定位「建议收藏」

  6. 水平居中 

 /* 水平居中 */
    .box3 img {
      /* 1. 向左移动img的一半 */
      position: relative;
      /* left: -960px; */
      transform: translate(-50%);

      /* 2. 向右移动父元素(.box3)的一半 */
      margin-left: 50%;
    }

 

fixed: 固定定位

  1. 元素脱离标准流
  2. 可以通过left, right,top, bottom 进行定位
  3. 定位参照物是视口(viewport)
  4. 当画布滚动的时候,元素位置不变
    1. body {
            margin: 0;
            padding: 0;
          }
      
          .box, .box2 {
            width: 100px;
            height: 100px;
      
            line-height: 100px;
            text-align: center;
          }
      
          .box {
            background-color: rgb(95, 95, 160);
      
            position: fixed;
            /* left: 50px; */
            /* right: 50px; */
            /* bottom: 50px; */
            /* top: 50px; */
          }
      
          .box2 {
         display: inline-block;
        background-color: olivedrab;
          }

      最大流算法_css的position定位「建议收藏」最大流算法_css的position定位「建议收藏」  最大流算法_css的position定位「建议收藏」   
      最大流算法_css的position定位「建议收藏」

      最大流算法_css的position定位「建议收藏」 最大流算法_css的position定位「建议收藏」

 

absolute 绝对定位

  1. 元素脱离标准流
  2. 可以通过left,  right,top, bottom 进行定位
    1. 定位参考对象是最相邻的定位祖先元素
    2. 如果找不到这样的祖先元素,参考对象就是视口
  3. 定位元素
    1. position值不为static的元素
    2. 也就是position值为relative, absolute, fixed的元素
  4. 子绝父相
    1. 在绝大数情况下,子元素的绝对定位都是相对于父元素进行定位
    2. 最大流算法_css的position定位「建议收藏」

 

绝对定位技巧: 

    1. 绝对定位元素
      1. position 值为absolute或者fixed的元素
    2. 对于绝对定位元素来说
      1. 对于参照对象的宽度 = left  + margin-left +  right + margin-right + 绝对定位元素的实际占用宽度
      2. 对于参照对象的高度 = top+ margin-top+  bottom+ margin-bottom+ 绝对定位元素的实际占用高度
    3. 如果你希望绝对定位元素的宽高和参照对象一样(占满), 可以设置绝对定位的以下属性为:  
      1. left: 0; right:0; top:0; bottom: 0; margin:0;

 

  1. 如果你希望绝对定位元素在参照对象中居中(水平垂直居中), 可以设置绝对定位的以下属性为:   (要确定绝对定位元素宽高)
    1. left: 0; right:0; margin:auto;(水平居中)
    2. top:0; bottom: 0; margin:auto; (垂直居中)
    3. left: 0; right:0; top:0; bottom: 0; margin:auto;(水平垂直居中)
    4. <style>
          .box {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: blue;
          }
      
          .inner {
            position: absolute;
            /* 占满父元素 */
            /* left: 0;
            right: 0;
            top: 0;
            bottom: 0; */
      
            /* 居中 */
            width: 100px;
            height: 100px;
             /* 垂直水平居中 */
            /* 水平居中 */
            left: 0;
            right: 0;
      
            /* 垂直居中 */
            top: 0;
            bottom: 0;
           
            margin: auto;
      
            background-color: olivedrab;
          }
        </style>
      </head>
      <body>
        <div class="box">
          <div class="inner"></div>
        </div>
      </body>

 

元素之间的层叠关系z-index

  1. z-index 属性用来设置定位元素的层叠顺序
    1. 取值可以是正整数,负整数,0
  2. 比较关系:
    1. 如果是兄弟关系
      1. z-index 越大,层叠越在上面
      2. z-index相等, 写在后面的那个元素层叠在上面
    2. 如果不是兄弟关系
      1. 各自从元素自己以及祖先元素中,找出最相邻的2个定位元素进行比较
      2. 而且这2个定位元素必须有设置z-index的具体数值
  3. 最大流算法_css的position定位「建议收藏」

     

     

 

position总结

  最大流算法_css的position定位「建议收藏」

 

 

脱离标准流

  1. 可以脱离标准流的元素:  postion:fixed/absolute,  float
  2. 特点:
    1. 可以随意设置宽高
    2. 宽高默认由内容决定
    3. 不再受标准流的约束
    4. 不再给父元素汇报宽高数据
    5. 脱离标准流的元素不是inline-block
    6. 最大流算法_css的position定位「建议收藏」

 

 

 

 

 

今天的文章最大流算法_css的position定位「建议收藏」分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/54809.html

(0)
编程小号编程小号
上一篇 2023-08-28
下一篇 2023-08-28

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注