#WEB前端（浮动与定位）

最新推荐文章于 2024-07-20 18:16:53 发布

GrassFishStudio

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量333

点赞数 3

分类专栏： WEB 文章标签：前端 html

本文链接：https://blog.csdn.net/byhyf83862547/article/details/136439556

版权

WEB 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.实验：

2.IDE：VSCODE

3.记录：

float、position

没有应用浮动前

应用左浮动和右浮动后

应用定位

4.代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>浮动</title>
</head>
<!-- 未应用浮动 -->
    <style>
       .left_box{height: 200px; width: 200px;background-color: blueviolet;}
       .right_box{height: 200px; width: 200px; color: blue;background-color: cadetblue;}
    </style>
<!-- 应用浮动 -->
    <style>
        .left_box{float: left;}        /*左浮动*/
        .right_box{float: right;}
    </style>
<!-- 应用相对定位定位 -->
    <style>
        .left_box{position: relative;left: 100px;top: 100px;}          /*相对定位，右移100px，下移100px（相对左100px，相对上100px）*/
    </style>
<!-- 应用绝对定位 -->
    <style>
        .right_box{position: absolute;top: 200px;left: 1000px;}
    </style>
<!-- 应用固定定位 -->
    <style>
        .fix_box{height: 200px; width: 200px;background-color: chartreuse;
        position: fixed;                   
        top: 100px;
        left: 1200px;
        }
    </style>
<body>
    <div class="left_box">左边盒子</div>
    <div class="right_box">右边盒子</div>
    <div class="fix_box">固定盒子</div>
    <p>这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本这是一段文本</p>
</body> 
</html>