CSS基础知识4

最新推荐文章于 2024-05-14 23:39:54 发布

中小庸

最新推荐文章于 2024-05-14 23:39:54 发布

阅读量42

点赞数

分类专栏： Web 文章标签： html 定位 css

本文链接：https://blog.csdn.net/qq_49556725/article/details/118653648

版权

Web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

定位
- 相对定位
- 绝对定位
- 浮动定位

相对定位

<!DOCTYPE html>
<!--DOCTYPE 是指定当前的html的版本，这里默认指定的是html5-->
<html>
<!--这里是html文件中的框架，将html文件括起来-->

<head>
    <meta charset="utf-8">
</head>

<body>

    <div>
        <p style="position: relative; left: -20px; bottom: -20px;">
            <!--进行相对定位-->
            第一段
        </p>

        <p style="position:relative;">
            第二段
        </p>
    </div>
</body>

</html>

在这里插入图片描述
绝对定位

<!--
 * @Author: zhu xianyu
-->
<!DOCTYPE html>
<!--DOCTYPE 是指定当前的html的版本，这里默认指定的是html5-->
<html>
<!--这里是html文件中的框架，将html文件括起来-->

<head>
    <meta charset="utf-8">
</head>

<body>

    <div>
        <p style="position: absolute; left: -20px; bottom: -20px;">
            <!--进行相对定位-->
            <!--这里是根据浏览器的相对位置进行定位-->
            第一段
        </p>

        <p style="margin: 10px 50px 50px 10px;">
            第二段
        </p>
    </div>
</body>

</html>

在这里插入图片描述
浮动定位

<!--
 * @Author: zhu xianyu
-->
<!DOCTYPE html>
<!--DOCTYPE 是指定当前的html的版本，这里默认指定的是html5-->
<html>
<!--这里是html文件中的框架，将html文件括起来-->

<head>
    <meta charset="utf-8">
</head>

<body>

    <div>
        <img src="/icon.png" width="200" style="float:right">

    </div>
</body>

</html>

在这里插入图片描述

中小庸

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS基础知识4

定位相对定位绝对定位浮动定位相对定位<!DOCTYPE html><html><head> <meta charset="utf-8"></head><bo.
复制链接

扫一扫