您现在的位置是:主页 > Web前端技术 > Web前端技术

CSS中定位布局的细节有哪些

IDCBT2021-12-24服务器技术人已围观

简介这篇文章主要讲解了“CSS中定位布局的细节有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS中定位布局的细节有哪

这篇文章主要讲解了“CSS中定位布局的细节有哪些”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“CSS中定位布局的细节有哪些”吧!

1. 相对定位1.1) 什么是相对定位

相对定位:盒子可以根据自己原来的位置进行位置调整(通过位置描述词实现)。

位置描述词:
left: 向右移动; right 向左移动;top 向下移动;bottom 向上移动
(当里面值为负数的时候,往相反方向移动)

举个例子:
原来:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        p {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            margin: 50px auto;
        }

        p {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            position: relative;
            top: 50px;
            left: 50px;
        }
    </style></head><body>
    <p>
    	<p></p>
    </p></body></html>


将 p 设置成相对定位:

p {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    position: relative;
    top: 50px;
    left: 50px;}

标签:

很赞哦! ()

本栏推荐