css的margin、padding和布局定位

最新推荐文章于 2024-06-01 08:44:56 发布

还很菜的小伙

最新推荐文章于 2024-06-01 08:44:56 发布

阅读量1.1k

点赞数

文章标签： html css absolute

本文链接：https://blog.csdn.net/qq_36687674/article/details/75207271

版权

个人心得：在一个页面中首先要分清整个页面总共分为多少小块，从外到内，一层一层分割，由大到小，理清包含关系，本人初学者，刚学到这，个人觉得只要思路正确，能分清哪一部分需要div，哪些部分用table布局简单，一个简单的页面就很容易成型，再运用各个属性，学习的过程不能只注重知识点，知识点要牢固，大概的框架，层次分出来，再在里边运用所学属性，进行功能细化，比如本次笔记中，就提到了几个常见的布局、定位属性，div是块级元素，会占一整行，要是想让两个div并排，就可以用absolute这个属性，来进行绝对定位，当然也可以用float：left这个属性，浮动。当使用绝对定位absolute时，一定要找到它的父容器，也就是给父容器也设置一个position属性，一般父容器设置position：relative。这样父容器也可以进行一系列的属性设置。相对于绝对布局来说，relative对其他属性设置的限制就要小的多.一个页面总会有留白，这个时候就要用到对边距的调整：margin（外边距）、padding（内边距）。在使用边距时，如果不设置具体的左右距离，比如margin：10px。这里指的就是外边距都是10px，边距的距离依据的是left、top。也就是说不管大小，设置边距属性之后，左和上一定是10px，右和下就随便了。

2.6盒子模型

margin：外边距

margin-top、margin-right、margin-bottom、margin-left

使用方式：

1）margin：30px；表示上下左右外边距都是30px；

2）margin-left：30px；单独设置上下左右外边距

3）margin：10px 20px30px 40px；分别设置上右下左四个边距为10、20、30、40

padding：内边距

也有上下左右边距，和margin类似，不在赘述

border：边框

border-width：边框宽度

border-style: 边框线条

border-color: 边框颜色

word中设置边框的操作

也可以使用更优化的书写方式

border:10px dashed blue;

outline：轮廓线，用法同border

2.7定位

定位方式有：static、fixed、relative、absolute

static静态定位（默认）

无定位，元素正常出现了流中，不受left、right、top、bottom属性影响。

div{
    width: 200px;
    height: 200px;
    background-color: red;
    position: static;
}

显示效果

fixed

#div1{
    width: 200px;
    height: 200px;
    background-color: red;
}
#div2{
    width: 200px;
    height: 200px;
    background-color: greenyellow;
}

显示效果

<style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: red;
            position: fixed;
            left: 30px;
            top: 20px;
          }
        #div2{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>

显示效果

从结果可以看出，fixed定位会将元素从流中“摘”出来单独进行定位，其定位取决于left、top等属性。

重新定位之后可能会出现重叠，通过z-index可以调整其顺序，但是静态定位z-index无效。

relative相对定位

<style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: RGBA(255,0,0,1);
          }
        #div2{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            position: relative;
            top: 20px;
            left: 30px;
        }
        #div3{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

显示结果

从结果可以看出来，相对定位是从原来的位置进行唯一，但并不影响后续位置。

absolute绝对定位

<style>
        #div1{
            width: 200px;
            height: 200px;
            background-color: RGBA(255,0,0,1);
          }
        #div2{
            width: 200px;
            height: 200px;
            background-color: greenyellow;
            position: absolute;
            top: 20px;
            left: 30px;
        }
        #div3{
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
</body>

显示效果：

从结果可以看出：绝对定位的元素将从流中被“摘”出来，依靠left、top属性进行定位。

与fixed类似，但是参照物不同

fixed参照根元素（html）

absolute参照父容器

还很菜的小伙

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css的margin、padding和布局定位

个人心得：在一个页面中首先要分清整个页面总共分为多少小块，从外到内，一层一层分割，由大到小，理清包含关系，本人初学者，刚学到这，个人觉得只要思路正确，能分清哪一部分需要div，哪些部分用table布局简单，一个简单的页面就很容易成型，再运用各个属性，学习的过程不能只注重知识点，知识点要牢固，大概的框架，层次分出来，再在里边运用所学属性，进行功能细化，比如本次笔记中，就提到了几个常见的布局、定位属性
复制链接

扫一扫