盒子的固定定位和展示

最新推荐文章于 2024-10-29 22:30:14 发布

努力小贼

最新推荐文章于 2024-10-29 22:30:14 发布

阅读量663

点赞数 11

分类专栏： web前端文章标签： css 前端

本文链接：https://blog.csdn.net/2302_81399643/article/details/142963776

版权

web前端专栏收录该内容

29 篇文章

订阅专栏

一、盒子的固定定位

盒子的固定定位可以使用CSS的position属性来实现。具体来说，可以使用 position : fixed ;来将盒子固定在浏览器窗口的指定位置。这样无论用户如何滚动页面，盒子都会保持在原来的位置不动。

使用了固定定位的元素会形成一个浮层！！！脱离了文档流！！！

多用于以下场景之一：

导航栏：将网站的导航栏固定在页面顶部或侧边，使用户在页面滚动时可以随时访问导航栏，提供更好的用户体验。

广告悬浮：将广告或重要信息悬浮在页面的固定位置，无论用户如何滚动页面，都能保持显示，增加广告或信息的曝光率。

返回顶部按钮：在长页面中添加一个返回顶部按钮，通过固定定位将其放置在页面角落，使用户可以方便地回到页面顶部。

侧边栏：将侧边栏固定在页面的一侧，使用户可以在阅读内容的同时访问其他相关链接或信息。

模态框：在网页中弹出一个模态框，通过固定定位将模态框固定在页面中心，使用户注意力集中在模态框上。

接下来通过实例来更好地认识盒子的固定定位：

下面代码创建二十个 div 元素，将 div3 和 div5 设置固定定位

<head>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: gray;
            margin-bottom: 5px;
        }
        #div3{
            background-color: red;
            margin-bottom: 5px;
            position: fixed;
            left: 200px;
            top: 208px;
        }
        #div5{
            background-color: green;
            margin-bottom: 5px;
            position: fixed;
            left: 250px;
            top: 250px;
        }
    </style>
</head>
<body>
    <!-- 用于固定工具栏 -->
    <div>盒子1</div>
    <div>盒子2</div>
    <div id="div3">盒子3（固定定位）</div>
    <div>盒子4</div>
    <div id="div5">盒子5（固定定位）</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
    <div>13</div>
    <div>14</div>
    <div>15</div>
    <div>16</div>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
</body>

运行结果如下图：不管怎么往下滑动，盒子3和盒子5都固定在同一个位置

运用在一个常见的地方：反馈信息（联系我们）

其CSS代码为：

 position: fixed;
 right: 50px;
 bottom: 50px;
 background-color: pink;
 border: 2px rgb(255, 88, 116) solid;
 padding: 5px;

二、盒子的展示

展示盒子可以通过CSS的 display 属性来控制

常用的display属性值有以下几种：

display: block; 将盒子以块级元素的形式展示，盒子会独自占据一行，并且默认宽度为100%。

display: inline; 将盒子以行内元素的形式展示，盒子不会独自占据一行，而是根据内容进行排列。

display: inline-block; 将盒子以行内块级元素的形式展示，盒子不会独自占据一行，但可以设置宽度、高度和边距等属性。

display: none; 将盒子隐藏，不会在页面上显示，也不会占据任何空间。

下面通过将块级元素变成行内块级元素演示：

下图是没有设置display属性的块级元素，每个元素是独占一行的

下图设置了display：inline-block;属性，块元素变行内块元素，不独占一行

其代码如下：

<head>
    <style>
        article{
            width: 1500px;
            height: 600px;
            background-color: gray;
            border: black 5px solid;
        }
        #d1{
            width: 300px;
            height: 50px;
            background-color: red;
            border: black 5px solid;
            margin-bottom: 5px;
            /* display  ：none 隐藏（并释放文档流）
            块元素变行内块元素，不独占一行 */
            display: inline-block;
        }
        #d2{
            width: 300px;
            height: 50px;
            background-color: green;
            border: black 5px solid;
            margin-bottom: 5px;
            display: inline-block;
        }
        #d3{
            width: 300px;
            height: 50px;
            background-color: blue;
            border: black 5px solid;
            margin-bottom: 5px;
            display: inline-block;

        }
        #d4{
            width: 300px;
            height: 50px;
            background-color: purple;
            border: black 5px solid;
            margin-bottom: 5px;
            display: inline-block;

        }
    </style>
</head>
<body>
    <article>
        <div id="d1">1</div>
        <div id="d2">2</div>
        <div id="d3">3</div>
        <div id="d4">4</div>
      
</body>

下图 div2 设置了display：none;属性，盒子2给隐藏了

其CSS代码为：

        #d2{
            width: 300px;
            height: 50px;
            background-color: green;
            border: black 5px solid;
            margin-bottom: 5px;
            display: none;
        }