6.浮动和定位

最新推荐文章于 2023-03-24 16:53:39 发布

sheerhr

最新推荐文章于 2023-03-24 16:53:39 发布

阅读量109

点赞数

分类专栏：面试必备问题

本文链接：https://blog.csdn.net/qq_24871849/article/details/110539456

版权

面试必备问题专栏收录该内容

9 篇文章 0 订阅

订阅专栏

1.浮动

为什么要使用浮动？

请看以下问题？
怎么把以下三个div标签一行显示？

<!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>
        div {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        div:nth-child(2) {
            background-color:blue;
        }

    </style>
</head>
<body>
    <div>哈哈</div>
    <div>哈哈</div>
    <div>哈哈</div>
</body>
</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>
        div {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        div:nth-child(2) {
            background-color:blue;

        }
        div:nth-child(1) {
            float: left;
        }
        div:nth-child(3) {
            float: left;
        }

    </style>
</head>
<body>
    <div>哈哈</div>
    <div>哈哈</div>
    <div>哈哈</div>
</body>
</html>

可以看到缝隙已经消除了，使用了浮动的元素相当于inlinebox，差异有以下两点：
1：不再是标准流了。
2：元素之间没有空格了。

由于在实际开发中，我们很少会给父级盒子设置一个指定的高度，下面这个例子可以看出浮动的坏处

<!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>
        .div1 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: red;
        }
        .div2 {
            float: left;
            width: 200px;
            height: 200px;
            background-color: blue;
        }
        .div3 {
            width: 100%;
            height: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div>
        <div class="div1">haha</div>
        <div class="div2">caca</div>
    </div>
    <div class="div3"></div>
</body>
</html>

为此我们要清除浮动给父级盒子带来的影响，清除浮动主要有以下几个方法。（自行百度）
在flex布局出现之后，浮动这种东西越来越少见了，我将着重学习flex布局。

2.定位

作用
主要是用来指定元素在网页上的位置，css中的定位分为以下五类
static
relative
fixed
absolute
sticky

static

static是position属性的默认值。如果省略position属性，浏览器就认为该元素是static定位。这时，浏览器会按照源码的顺序，决定每个元素的位置，这称为"正常的页面流"（normal flow)，也就是之前所提到的标准流。每个块级元素占据自己的区块（block），元素与元素之间不产生重叠，这个位置就是元素的默认位置。非常值得注意的一点是：static定位所导致的元素位置，是浏览器自主决定的，所以这时top、bottom、left、right这四个属性无效。
可以查看如下示例

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* position: relative; */
            top: 20px;
        }
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

relative，absolute，fixed

relative、absolute、fixed这三个属性值有一个共同点，都是相对于某个基点的定位，不同之处仅仅在于基点不同。所以，只要理解了它们的基点是什么，就很容易掌握这三个属性值。

这三种定位都不会对其他元素的位置产生影响，之前提到文档流、浮动和绝对定位三者之间的关系，由于定位是处于大气层的关系，因为可以叠在其他文档流或者浮动元素的上方，产生重叠效果。

relative
relative表示，相对于默认位置（即static时的位置）进行偏移，即定位基点是元素的默认位置。

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            position: relative; 
            top: 20px;
        }
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
    <div>
    </div>
</body>
</html>

absolute
absolute表示，相对于上级元素（一般是父元素）进行偏移，即定位基点是父元素。它有一个重要的限制条件：定位基点（一般是父元素）不能是static定位，否则定位基点就会变成整个网页的根元素html。另外，absolute定位也必须搭配top、bottom、left、right这四个属性一起使用。上面代码中，父元素是relative定位，子元素是absolute定位，所以子元素的定位基点是父元素，相对于父元素的顶部向下偏移20px。如果父元素是static定位，上例的子元素就是距离网页的顶部向下偏移20px。注意，absolute定位的元素会被"正常页面流"忽略，即在"正常页面流"中，该元素所占空间为零，周边元素不受影响。也就是脱离文档流，处于大气层
fixed
fixed表示，相对于视口（viewport，浏览器窗口）进行偏移，即定位基点是浏览器窗口。这会导致元素的位置不随页面滚动而变化，好像固定在网页上一样。它如果搭配top、bottom、left、right这四个属性一起使用，表示元素的初始位置是基于视口计算的，否则初始位置就是元素的static位置。

<!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>
        div {
            width: 200px;
            height: 200px;
            background-color: black;
        }
        div:nth-child(2) {
            background-color: red;
            position: fixed;
            left: 20px;
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>
</body>
</html>

可以看到fixed也是脱离了文档流的

stickey

动态固定效果

sheerhr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.浮动和定位

1.浮动为什么要使用浮动？请看以下问题？怎么把以下三个div标签一行显示？<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title>
复制链接

扫一扫