文档流与CSS定位

原创已于 2025-06-05 02:05:39 修改 · 316 阅读

7 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

于 2025-05-19 14:03:52 首次发布

一、文档流

文档流的概念

文档流是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>
        .div1{
            height: 100px;
            width: 100px;
            background-color: red;
        }
        .div2{
            height: 100px;
            width: 100px;
            background-color: pink;
        }
        .div3{
            height: 100px;
            width: 100px;
            background-color: plum;
        }
    </style>
</head>
<body>
    <div class="div1">
        1
    </div>
    <div class="div2">
        2
    </div>
    <div class="div3">
        3
    </div>
    <b>文本1</b>
    <img src="mihoyo.jpg" alt="">
    <b>文本2</b>
    <b>文本                         3 </b>
</body>
</html>

因此我们可以使用CSS中对盒子的定位来解决文档流导致的页面不美观的问题

定位

在CSS中定义position属性可以对一个盒子进行相对定位或者绝对定位。可以对其进行水平方向（left、right），垂直方向（top、bottom）进行定位。水平方向和垂直方向各选一个参数即可定位；定位的数值可以为负数。

相对定位

相对定位使用relative 来定义相对于盒子原本的位置进行定位，盒子的本体仍然会占据文档流中原本的位置，哪怕改变了他的显示定位但是他仍然会以占据原本的位置但不显示。

<!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{
        height: 100px;
        width: 100px;
        background-color: red;
    }
    .div2{
        height: 100px;
        width: 100px;
        background-color: pink;
        position: relative;
            left: 50px;
            bottom: 50px;
    }
    .div3{
        height: 100px;
        width: 100px;
        background-color: plum;
    }
</style>
</head>
<body>
    <div class="div1">
        
    </div>
    <div class="div2">
        
    </div>
    <div class="div3">
        
    </div>
</body>
</html>

绝对定位

绝对定位是通过设置position属性参数为absolute让元素对于最近的已经定位的父元素进行定位，绝对定位会让盒子脱离文本流，不再占据文本流中的位置。如果父元素没有进行定位，则会根据整个页面来进行定位。

<!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{
        height: 100px;
        width: 100px;
        background-color: red;
    }
    .div2{
        height: 100px;
        width: 100px;
        background-color: pink;
        position: absolute;
            left: 45%;
            bottom: 50%;
    }
    .div3{
        height: 100px;
        width: 100px;
        background-color: plum;
    }
</style>
</head>
<body>
<div>
    <div class="div1">
        
    </div>
    <div class="div2">
        
    </div>
    <div class="div3">    
    </div>
</div>
</body>
</html>

由于我这里最外层的div元素没有进行定位，所以div2根据body元素来进行定位。

定义position的参数为fixed进行定位，可以定义盒子的位置相对于浏览器窗口是固定位置。

    .div4{
        height: 100px;
        width: 100px;
        background-color: plum;
        position: fixed;
        bottom: 10px;
        right: 0px;
    }

使用定位，我们可以将盒子根据自己的需要在页面中设计布局。

<!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>
        .face{
            width: 500px;
            height: 600px;
            background-color: 	burlywood;
            position: absolute;
            bottom: 20%;
            left: 35%;
        }
        .eye1{
            width: 100px;
            height: 60px;
            background-color: white;
            position: absolute;
            top: 30%;
            left: 20%;
        }
        .eye2{
            width: 50px;
            height: 60px;
            background-color: black;
            position: absolute;
            right: 0%;
        }
        .eyes1{
            width: 100px;
            height: 60px;
            background-color: white;
            position: absolute;
            top: 30%;
            right: 20%;
        }
        .eyes2{
            width: 50px;
            height: 60px;
            background-color: black;
            position: absolute;
            left: 0%;
        }
        .hair{
            width: 500px;
            height: 100px;
            background-color: 	#2c1a0b;
            position: absolute;
        }
        .nose1{
            border: 3px black solid;
            width: 50px;
            height: 100px;
            background-color: brown;
            position: absolute;
            top: 50%;
            left: 45%;
        }
        .mouth{
            width: 200px;
            height: 50px;
            background-color: rosybrown;
            position: absolute;
            bottom: 10%;
            left: 30%;
        }
    </style>
</head>
<body>
    <div class="face">
        <div class="hair">

        </div>
        <div class="eye1">
            <div class="eye2">
            </div>
        </div>
        <div class="eyes1">
            <div class="eyes2">
            </div>
        </div>
        <div class="nose1">
        </div>
        <div class="mouth">

        </div>
    </div>
</body>
</html>

标签

#css #前端