css常见的定位操作

最新推荐文章于 2024-10-03 16:00:14 发布

Crazy Code Farmer

最新推荐文章于 2024-10-03 16:00:14 发布

阅读量108

点赞数

分类专栏：前端文章标签： css

本文链接：https://blog.csdn.net/illovesoftware/article/details/109494385

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一.默认定位

1. 1. 块级元素：h1~h6，p, div 等，自上而下，垂直排列（自动换行）；可以改变宽高。

1.2. 行内元素：a,b,span,等，从左向右，水平排列（不会换行）；不能改变宽高。

1.3. 行内块元素：input,img等，从左向右，水平排列（自动换行）；可以改变宽高。

二.浮动定位

让元素“飞”起来。不仅可以靠着左边或右边。还可以消除“块级”的霸道特性（独自占一行）。 float取值： none ：不浮动 left：贴着左边浮动 right：贴着右边浮动。

常见应用场景:自定义两个div会换行，可以通过左浮动和右浮动，使其排列在一行。

三. 相对定位

和原来的位置进行比较，进行移动定位（偏移）。

使用场景:定义一个div,因需要，使其位置相对原来位置移动，可以通过输入坐标偏移量控制。

四. 绝对定位

本元素与已定位的祖先元素的距离

1.如果父级元素定位了，就以父级为参照物；

2.如果父级没定位，找爷爷级，爷爷定位了，以爷爷为参照物。

3.如果爷爷没定位，继续向上找，都没定位的话，body是最终选择。

五.固定定位

将元素的内容固定在页面的某个位置，当用户向下滚动页面时元素框并不随着移动。

固定定位代码理解:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>固定定位</title>
  </head>
<style>
    .f{
        width: 200px;
        height: 200px;
        background-color: aqua;
        position: fixed;
        top:100px;
        left: 500px;
    }
</style>

  <body>
    <h1>就是不动，怎么滴！</h1>
    <h1>就是不动，怎么滴！</h1>
    <h1>就是不动，怎么滴！</h1>

    <div class="f">aaaaa</div>
    <h1>就是不动，怎么滴！</h1>
    <h1>就是不动，怎么滴！</h1>
    <h1>就是不动，怎么滴！</h1>
    <h1>就是不动，怎么滴！</h1>
    <h1>就是不动，怎么滴！</h1>
    <h1>就是不动，怎么滴！</h1>
    <h1>就是不动，怎么滴！</h1>
    <h1>就是不动，怎么滴！</h1>
  
  </body>
</html>