zoukankan      html  css  js  c++  java
  • 定位

    • 1.相对定位:占位置 

    •  作用:1.父相子绝;

    • 2.微调元素   

      

     比如:两个元素底边没有对齐,可设置以下

    input{
            font-size: 30px;
        }
    span {
            position: relative;
            top: 2px;
        }
    </style>
    </head>
    <body>
     <span>hahah</span>
     
    <input type="text">

    然后浏览器右击检查

     

    调好后,不要忘记将代码中的top一同修改,不然修改不了

    • 2.绝对定位:不占位置(即脱离标准文档流)

    .box1 {
            height: 100px;
             100px;
            background-color: red;
            /*position: absolute;*/
        }
        .box2 {
            height: 100px;
             100px;
            background-color: green;
        }
    </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>

     对box1设置position: absolute;之后;

     box1脱离了标准文档流,不占位置,相当于box1飘起来了,此时浏览器第一个盒子是box2,box2顶到了box1的位置,被box2覆盖在上边;

    绝对定位盒子居中:

            position:absolute;
            left: 50%;
            margin-left: -width/2;
    • .wrap {
               200px;
              height:100px;
              background-color: yellow;
              margin: 0 auto /*标准流的盒子居中*/
          }
      </style>
      </head>
      <body>
      
          <div class="wrap"></div>

      结果:

    对其设置position:absolute后,不在居中,

     在对其设置left: 50%; margin-left: -50px;就可居中。

    • 标准流的盒子居中

    • margin:0 auto;

      3.固定定位     脱离标准流  不占位置

    • 1.比如固定导航栏等,京东

    • .header{
               100%;
              height:70px;
              background-color: green;
              position: fixed;
          }
      </style>
      </head>
      <body>
          <div class="header"></div>

    • 添加 top: 0;left: 0;可以直接顶到最上边

    添加z-index:1000;绿色导航栏覆盖在上边

     但是红色和黄色盒子依旧在绿色下边,需要将两个盒子往下移,设置body:padding-top: 100px 或者:body:margin-top:100px  即可

  • 相关阅读:
    Java实现 LeetCode 50 Pow(x,n)
    Java实现 LeetCode 50 Pow(x,n)
    Java实现 LeetCode 49 字母异位词分组
    Java实现 LeetCode 49 字母异位词分组
    Java实现 LeetCode 49 字母异位词分组
    Java实现 LeetCode 48 旋转图像
    Java实现 LeetCode 48 旋转图像
    Java实现 LeetCode 48 旋转图像
    Java实现 LeetCode 47 全排列 II(二)
    Java实现 LeetCode 47 全排列 II(二)
  • 原文地址:https://www.cnblogs.com/hudaxian/p/14281271.html
Copyright © 2011-2022 走看看