前端小白的第一篇博客—CSS定位

最新推荐文章于 2023-06-26 15:12:05 发布

SAKURE2210866448

最新推荐文章于 2023-06-26 15:12:05 发布

阅读量267

点赞数 1

文章标签：前端 css css定位 web 绝对定位

本文链接：https://blog.csdn.net/SAKURE2210866448/article/details/102261484

版权

CSS定位的一些个人理解

本人是还没有入门的技术小白，仅以此篇记录成长，欢迎大家一起讨论学习，也欢迎在评论区指出问题~~
言归正传啦，以下是关于CSS中定位的个人理解。

一、分类

在CSS中定位分为：static静止定位、relative相对定位、absolute绝对定位、fixed固定定位、inherit继承定位。本文主要讨论相对定位，绝对定位与固定定位。

二、应用

（1）相对定位

相对自己的原始位置定位
就是在没添加定位前，它已经占了一个位置了，应用相对定位后，是相对于它本来该在的位置上下左右移动。但是它之前的位置还是给它留着的。之前看到有人给相对定位比喻成进城打工的人，虽然进城了，但是老家还是有房子的，不会因为人进城打工，老家的房子就没了。下面引入代码，大家可以运行一下感受相对定位。

先做一些准备

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <head>
        <style>
        *{
    
            margin: 0;/*去掉系统自带的一些边距*/
            padding: 0;
            }
        .big{
    /*为了看上去比较直观，我们定义了一个大盒子和小盒子*/
            width: 1000px;
            height:1000px;
            background-color: gray;
        }
         .small{
    
             width: 300px;/*定义一个边长为300像素的黄色小正方形*/
             height: 300px;
             background-color: yellow;
         }
        </style>
    </head>
    <body>

最低0.47元/天解锁文章

SAKURE2210866448

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
前端小白的第一篇博客—CSS定位

CSS定位的一些个人理解本人是还没有入门的技术小白，仅以此篇记录成长，欢迎大家一起讨论学习，也欢迎在评论区指出问题~~言归正传啦，以下是关于CSS中定位的个人理解。一、分类在CSS中定位分为：static静止定位、relative相对定位、absolute绝对定位、fixed固定定位、inherit继承定位。本文主要讨论相对定位，绝对定位与固定定位。二、应用（1）相对定位相对自己的原...
复制链接

扫一扫