定位的应用场景和基本原理

定位的原理
  • 在本文流中 , 任何一个标签都被文本流所限制了自身的位置 , 但是通过 CSS 我们依然使得这些标签可以改变 自己的位置 , 我们可以通过 float 来让标签浮动 , 我们也可以通过 margin 来让标签产生位置移动。 CSS 定位属性,允许定义标签框相对于其正常位置应该出现的位置,或者相对于父标签、 另一个标签甚至浏览器窗口本身的位置。标签可以使用顶部、底部、左侧和右侧属性定义具体的位置

position
  • static 默认 静态定位

    • 默认的定位位置,不写就是静态定位

  • relative 相对定位

    • 相对于自己本身移动

  • absolute 绝对定位

    • 子绝父相(当找不到父标签有相对定位的时候,就会继续向上找)

    • 相对于父标签(父标签相对定位,子标签绝对定位)

  • fixed 固定定位

    • 相对于浏览器窗口

    • 不会随着滚动条滚动

总结一下position
  • 定位是否脱标参考点参数
    static  
    relative 自己本身 left,right,top,bottom
    absolute 父标签(子绝父相) left,right,top,bottom
    fixed 浏览器窗口 left,right,top,bottom
  •  

定位的技巧与层级关系

居中技巧
  • 1、方案 1 margin 负间距 (1)必需知道该 div 的宽度和高度; (2)然后设置位置为绝对位置; (3)距离页面窗口左边框和上边框的距离设置为 50%,这个 50% 就是指盒子左上角顶点距离页面左、上边 界的 50%; (4)最后将该 div 分别左移和上移,使整个盒子居中,左移和上移的大小就是该 DIV( 包括 border 和 padding) 宽度和高度的一半

  • <!DOCTYPE html>
    <html lang="en">
    <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Document</title>
       <style>
          * {
               padding: 0;
               margin: 0;
          }
           .box {
               width: 300px;
               height: 200px;
               background-color: red;
               position: fixed;
               left: 50%;
               margin-left: -150px;
               top: 50%;
               margin-top: -100px;
          }
       </style>
    </head>
    <body>
       <div class="box"></div>
    </body>
    </html>
  
- 2、方案 2 margin:auto 实现绝对定位元素的居中(该方法兼容 ie8 以上浏览器)。 此方案代码关键点: (1)上下左右均 0 位置定位; (2)margin: auto。

- ```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            width: 300px;
            height: 200px;
           
            margin: auto;
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>
定位标签的层级属性 z-index
  • 1.默认定位的标签一定在没加定位的标签上方。

  • 2.默认是0,可以设置1、2、3、4,也可以是负值-1、-2,数值大的在上方

  • 3.z-index属性必须要配合定位使用,否则无效

常见属性

  • vertical-align 属性设置标签的垂直对齐方式。利用这个属性做图文对齐方式

    • baseline 默认。标签放置在父标签的基线上。

    • top 把标签的顶端与行中最高标签的顶端对齐。

    • middle 把此标签放置在父标签的中部。

    • bottom 把标签的底端与行中最低的标签底端对齐。

  • 图片下间隙解决

    • 去除图片下间隙的办法有很多,常用的有 3 种:

      • 设置父盒子字号为 0

        • .wrap{
            font-size: 0;  
          }
      • 改变图片的 display

        • img{
            display: block;  
          }
      • 给图片设置垂直对齐方式

        • img{
            vertical-align: middle;// 设置为任意不为 baseline 的值都可以
          }
  • 显示与隐藏

    • 盒子显示:

      • display:block;

    • 盒子隐藏:

      • display:none:隐藏该元素并且该元素所占的空间也不存在了。

      • visibility:hidden :隐藏该元素但是该元素所占的内存空间还存在,即“隐身效果”。

  • overflow 属性

    • overflow 属性规定当内容溢出标签框时的显示方式,包括水平方向和垂直方向。

    • overflow-x 只包括水平方向。

    • overflow-y 只包括垂直方向。

      • visible 默认值。内容不会被修剪,会呈现在标签框之外。

      • hidden 内容会被修剪,并且其余内容是不可见的。

      • scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。

      • auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

  •  

透明度属性 (opacity,rgba())

  • opacity

    • 1、兼容性:IE6、7、8 不支持,IE9 及以上版本和标准浏览器都支持。

    • 2、使用说明:设置 opacity 元素的所有后代元素会随着一起具有透明性,一般用于调整图片或者模块的整体 不透明度。

  • rgba()

    • 1、兼容性:IE6、7、8 不支持,IE9 及以上版本和标准浏览器都支持。

    • 2、使用说明:设置颜色的不透明度,一般用于调整 background-color、color 等的不透明度