对于div盒子的一些困惑解答

最新推荐文章于 2024-10-04 06:11:34 发布

qq_44074788

最新推荐文章于 2024-10-04 06:11:34 发布

阅读量231

点赞数 1

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

本文链接：https://blog.csdn.net/qq_44074788/article/details/108199489

版权

Div 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

对于div盒子的一些困惑解答

对于div盒子，此处我主要讲两个方面，一个是关于盒子position定位的问题，另一个是关于盒子自身大小以及距离变化的问题。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            box-sizing: border-box;
            margin: 0;
        }
        body{
            display: flex;
        }
        #box-father1{
            position: absolute;
            width: 400px;
            height: 400px;
            left: 20%;
            top: 20%;
            background-color: burlywood;
        }
        #box-son1{
            width: 100px;
            height: 100px;
            position: absolute;     /* 此处需注意，对应box-son2 */
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: cornflowerblue;
        }

        /*此处的box-son1和box-son2的定位都是针对于处于同一父对象之中而言，自然了，position:absolute即使脱离文档流，那么定位也还是得相对于所处的父对象进行定位*/

        #box-son2{
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            margin-left: 0px;        /*此处需注意,多个已绝对定位的对象进行位置定位的时候，margin是相对于离它最近的单位进行定位*/
            margin-top: 0px;
            background-color: dodgerblue;
        }
        #box-father2{
            /*此处需注意，因为使用了position:relative，所以下面的定位是相对于离它最近的一个块状对象进行定位*/

            /*需要特别注意的是一旦使用了position:absolute，那么就意味着脱离了文档流，那么position:relative的对象将不再相对于离它最近的对象进行定位，
            而是相对于离它最近的未absolute的对象进行定位，针对于未处于同一父对象之中而言*/

            /*relative与absolute同时用的时候，relative处于absolute上面*/

            /*一个有趣的现象：当一个对象使用了position:relative之后，后面的对象是依照具有此relative属性的对象的最初的位置进行定位的*/

            /* position: relative; */
            width: 400px;
            height: 400px;
            background-color: slategray;
            margin-left: 200px;         /*此处需注意*/
            margin-top: 100px;          /*此处需注意*/
        }
        #box1,#box2,#box3{
            background-color: cornflowerblue;
            width: 100px;
            height: 100px;
        }


        /*始终需要注意的是div本就是一个盒子，padding还有border只不过是div盒子自身的一个属性，因而使用了padding亦或是border之后，
        div盒子看似位移了，实则是原本的div盒子变成了content，整个div盒子则会随着padding和border的增加而变大，所占用的空间自然就变大了，
        因此最开始设置的盒子宽高都将加上后面设置的margin和padding的长度，这里为了解决盒子宽高变化问题，得使用box-sizing:border-box，此时
        盒子设置的padding和border都是以原盒子长宽进行操作，此处需注意，margin不参与。
        因而，使用top亦或是left都只是针对于div这个盒子本身进行位移，且只能是配合position进行移动*/



    </style>
</head>
<body>
    <div id="box-father1">
        <div id="box-son1"></div>
        <div id="box-son2"></div>
    </div>
    <div id="box-father2"></div>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>