提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其他

当前栏目

【前端学习之HTML&CSS】-- CSS第八篇 -- 视觉格式化模型之三 定位

amp定位HTML学习前端CSS -- 模型
2023-09-11 14:16:44 时间

【前端学习之HTML&CSS】-- CSS第八篇 – 视觉格式化模型之三 定位

文章目录


本文具体内容参考了B站渡一教育的课程，原课程链接如下：
渡一教育课程

lc own

前言

html与css以及今后我们将会学到的js共同构成了前端技术中最重要的三种语言，在学习过程中，我们首先从html出发，在html的学习过程中深入了解css，在步入学期末尾阶段再进行js的学习。

在CSS的学习过程中，最重要的内容，主要包含属性值的计算过程、层叠继承、盒模型以及视觉格式化模型，本节博客继续之前学习的内容，主要负责视觉格式化模型中关于定位的相关内容。通过定位我们可以实现手动控制元素在包含块中的精准位置.

概念

在这里插入图片描述

  • 概念: 手动控制元素在包含块中的精准位置
  • 涉及属性: position

1. position

  • 默认值：static，静态定位(不定位)
  • relative：相对定位；
  • absolute：绝对定位；
  • fixed：固定定位；

在这里插入图片描述
一个元素只要position的值不是static，就认为该元素是一个定位元素；定位元素会脱离文档流(相对定位除外)

脱离文档流的元素：

  • 文档流中元素拜访时，忽略脱离文档流的元素；
  • 文档流中元素计算自动高度时，会忽略脱离文档流的元素；

2. 相对定位

特殊：不会导致元素脱离文档流，只是元素在原位置上进行偏移

在这里插入图片描述

可以通过四个CSS属性设置其位置：

  • left、right、top、bottom；
    【重点：此偏移为相对该元素原位置的偏移，元素的高度、宽度不变】
    #p1{
        position: relative;
        /* margin会保证盒子撑满包含块，宽度会减小 */
        left: 50px;
        /* 然而这里只是相对于该元素原位置的偏移，宽度不变 */
        bottom: 20px;
        /* 重点：设置出现矛盾：以左边和上边为准 */
    }

在这里插入图片描述

									**相对位置的偏移不会对其他元素造成任何影响**

3. 绝对定位

1） 宽高auto：

  • 盒模型中宽高为auto时：盒子尺寸适应内容

2） 包含块变化：

  • 找祖先元素(从父元素一层层往上找)中第一个定位元素，该元素的填充盒为其包含块；
    .incl{
        position: absolute;
        /* left表示绝对定位元素的左边离包含块左边的距离 */
        left: 0;
        top: 0;
    }
    .grf{
        position: relative;
    }

    <div class="grf" style="width: 500px; height: 300px; padding: 30px; border: 2px solid;">
        这里是祖先元素，第一个定位元素；
        <div style="width: 400px; height: 200px; padding: 30px; border: 2px solid;">
            这里是父元素，但是没有定位；
            <div class="incl" style="width: 100px; height: 100px; background: #008c8c;"> 
                这里用于测试包含块的变化
            </div>
        </div>
    </div>

在这里插入图片描述

  • 若找不到祖先定位元素，则其包含块为整个网页(初始化包含块)
    lc

3） 应用：

  • 精准定位，如将一张图片放在另一张图片的某个位置，可将其中下面的图片设置为相对定位，上方的图片设置为绝对定位；

在这里插入图片描述

4. 固定定位

  • 其他情况和绝对定位完全一样

  • 包含块不同：固定为视口(浏览器的可视窗口)

如该图中的绿色区域：
在这里插入图片描述

在修改参数时，发生的变化效果如图，类似于那种烦人广告或者顶端的导航栏：

在这里插入图片描述

5. 定位下的居中

  • 主要针对于绝对定位和固定定位

  • 某个方向居中步骤：

  1. 定宽/高
  2. 将左右/上下距离设置为0
  3. 将左右/上下margin设置为auto
    <div style="width: 100px; height: 100px; position: fixed; 
    background: #008c8c; left: 0; top: 0; right: 0; margin: auto;">
        这里用来测试定位居中
    </div>

在这里插入图片描述

绝对定位和固定定位中，在margin为auto时，会自动吸收剩余空间

6. 多个定位元素重叠

  • 设置z-index，通常情况下，该值越大，越靠近用户；
    .item{
        position: absolute;
        width: 70px;
        height: 70px;
        border: 4px solid;
        /* 变成边框盒，容易设置 */
        border-radius: 50%;
        /* 设置为原型 */
    }
    .circle1{
        left: 0;
        top: 0;
        border-color: blue;
        z-index: 1;
    }
    .circle2{
        left: 70px;
        top: 0;
        border-color: black;
        z-index: 2;
    }
    .circle3{
        left: 140px;
        top: 0;
        border-color: red;
        z-index: 3;
    }
    .circle4{
        left: 105px;
        top: 40px;
        border-color: yellow;
        z-index: 4;
    }
    .circle5{
        left: 35px;
        top: 40px;
        border-color: green;
        z-index: 5;
    }

    <div class="item circle1"></div>
    <div class="item circle2"></div>
    <div class="item circle3"></div>
    <div class="item circle4"></div>
    <div class="item circle5"></div>

在这里插入图片描述
z-index：注意事项

  1. 只有定位元素设置该值有效；
  2. z-index可以为负数，如果是负数，遇到常规流和浮动元素，则会被其覆盖；

6. 补充

  • 绝对定位/固定定位一定是块盒
  • 绝对定位/固定定位一定不是浮动
  • 没有外边距合并

总结

本篇博客主要负责介绍了视觉格式化模型中的定位布局，在学习过本节内容后，我们就将基本的视觉格式化模型格局都学习完毕，和往常一样，在下一篇博客中我们将会给出一些对应的练习，包括二级菜单以及弹出层、轮播图等，敬请期待。

在这里插入图片描述

相关文章