《CSS定位装饰》笔记总结

原创已于 2025-10-08 08:01:11 修改 · 873 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #笔记

于 2025-10-08 07:39:26 首次发布

黑马程序员（bilibili）---HTML 专栏收录该内容

8 篇文章

订阅专栏

网页常见布局方式:

定位的基本介绍

在这里插入图片描述

相对定位

基本信息：
在这里插入图片描述
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        .q {
            width: 330px;
        }
        .w {
            position: relative;
            bottom: 200px;
            left: 70px;
        }

    </style>
</head>
<body>
    <div class="q"><b>测试文本</b>---生命的歌唱是灵魂的震颤。老舍笔下的鼓书艺人面对孩童时，内心翻涌着时代的苦涩与艺术的挣扎。这让人想起敦煌藏经洞的抄经人，在幽暗洞窟中用颤抖的笔尖抄写经文，墨迹里浸透着对信仰的虔诚与对现实的无奈。他们的歌声不是舞台上的完美表演，而是生命在困境中开出的花朵。就像梵高在阿尔勒的星空下作画，颜料中混杂着麦田的芬芳与向日葵的炽热，每一笔都是灵魂的呐喊。</div>
    <div class="w"><img src="2.svg" alt=""></div>
</body>
</html>

效果图：
请添加图片描述
**tip：**只给position: relative不会产生影响。
如果left和right都给了以left为准；top和bottom都有以top为准。

绝对定位

基本信息：
在这里插入图片描述
eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绝对定位</title>
    <style>
        .q {
            width: 300px;
            height: 300px;
            background-color: rgb(91, 59, 18);
        }
        .qq {
            width: 200px;
            height: 200px;
            background-color: blueviolet;
            position: relative;
            left:50px;
            top: 66px;
        }
        .qqq {
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            position: absolute;
            left: 50px;
            bottom: 30px;
        }
    </style>
</head>
<body>
    <div class="q"><div class="qq"><div class="qqq">绝对定位测试</div></div></div>
</body>
</html>

效果图: 在这里插入图片描述

tip:先找以定位的父级(一般使用position: relative定位,方便后期移动父级)，如果有这样的父级就以这个父级为参照为物；有父级但是父级没有定位，就以坐标系为参照物。
特点：1.脱标，不占有原来的空间位置（就像浮动起来一样）
2.将原来标签改变为行内块标签:一行可以共存,可以改变大小宽高；
3.父级一级一级向上找，遵循最近的一个以定位的父级；
子绝父相:子级使用绝对定位,父级使用相对定位。

居中

tip：被绝对定位的标签不能够使用左右margin auto标签居中。

一：百分比移动
.会以盒子的左边框为中心移动，所以还要配合margin-left: -一半盒子大小px;使用。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百分比-居中</title>
    <style>
        div {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: aquamarine;
            left: 50%;
            margin-left: -150px;
             top: 50%;
            margin-top: -150px;
        }
    </style>
</head>
<body>
    <div>
        百分比-居中
    </div>
</body>
</html>

效果图:

下面那个小猫是我电脑自带的非程序内容.

二:自动位移居中
在一的基础上升级不需要自己填写盒子大小一般半的值.(一行transform: translate(-50%,-50%);)

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>百分比-居中</title>
    <style>
        div {
            position: absolute;
            width: 300px;
            height: 400px;
            background-color: aquamarine;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <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>百分比-居中</title>
    <style>
        div {
            position: absolute;
            width: 300px;
            height: 400px;
            background-color: aquamarine;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    </style>
</head>
<body>
    <div>
        百分比-居中
    </div>
</body>
</html>

效果图:
在这里插入图片描述

固定定位

基本信息:
在这里插入图片描述
eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定定位</title>
    <style>
        .q {
            width: 300px;
            height: 300px;
            background-color: blue;
            position: fixed;
            left: 0;
            top: 0;
    </style>
</head>
<body>
    <div class="q">固定测试</div>
    <div>测试文本测试文本测试文本测试文本测文本测试文本测~~~~~~(为了展示方便,文字有省略.)</div>
</body>
</html>

效果图:
在这里插入图片描述

tip:使标签变为行内块.

显示层级问题

基本信息:
在这里插入图片描述

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定位分布问题</title>
    <style>
        .q {
            position: absolute;
            width: 300px;
            height: 300px;
            background-color: rgb(179, 114, 29);
            z-index: 1;
            left: 40px;
            top: 60px;
        }
        .qq {
            width: 300px;
            height: 300px;
            background-color: rgb(6, 209, 209);
        }
    </style>
</head>
<body>
    <div class="q">定位分布问题-1</div>
    <div class="qq">定位分布问题-2</div>
</html>

效果图:
在这里插入图片描述

tip:
在这里插入图片描述

垂直对齐方式

基本信息：
在这里插入图片描述
eg：

效果图：

tip：将一些行内块和图片，文字等对齐。
浏览器把行内和行内块标签当作文字处理，默认基线对齐。

光标类型

基本信息：

在这里插入图片描述
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>光标类型</title>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: blanchedalmond;
        }
        img     {
            cursor: pointer;
        }
        p {
            cursor: default;
        }
        .q {
            cursor: move;
        }
        input {
            cursor: text;
        }
    </style>
</head>
<body>
    <div>
        <img src="2.svg" alt="">
        <p>这是一个p标签</p>
        <input type="text" name="" id="">
        <div class="q">这是一个div标签</div>
    </div>
</body>
</html>

效果图：
在这里插入图片描述

边框圆角

基本信息：
在这里插入图片描述

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框圆角</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            border-radius: 200px;
        }
        p {
            width: 400px;
            height: 400px;
            background-color: aquamarine;
            border-radius: 30%;
        }
    </style>
</head>
<body>
    <div>
        边框圆角演示-1
    </div>
    <p>
        边框圆角演示-2
    </p>
</body>
</html>

效果图：

在这里插入图片描述
tip：可以填写4个值：从左上角顺时针开始分配，如果少值则少的那个取对角的值。

`overflow`溢出部分效果显示

基本信息：
在这里插入图片描述
eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>溢出效果展示</title>
    <style>
        .q {
            width: 300px;
            height: 300px;
            background-color: aqua;
            overflow: scroll;
            display: inline-block;
        }
        .qq {
            width: 300px;
            height: 300px;
            background-color: aqua;
            overflow: auto;
            display: inline-block;
        }
        .qqq {
            width: 300px;
            height: 300px;
            background-color: aqua;
            overflow: hidden;
            display: inline-block;
        }
        .w {
            width: 300px;
            height: 300px;
            background-color: aqua;
            overflow: visible;
            display: inline-block;
        }
    </style>
</head>
<body>
    <div class="w">
        这是一个div标签,展示溢出效果。这是一个div标签,展示溢出效果。(因展示需求省略一些文本)
    </div>
    <div class="q">
        这是一个div标签,展示溢出效果。这是一个div标签,展示溢出效果。(因展示需求省略一些文本)
    </div>
    <div class="qq">
        这是一个div标签,展示溢出效果。这是一个div标签,展示溢出效果。(因展示需求省略一些文本)
    </div>
    <div class="qqq">
        这是一个div标签,展示溢出效果。这是一个div标签,展示溢出效果。(因展示需求省略一些文本)
    </div>
</body>
</html>