盒子的固定定位和展示

小k鏖

已于 2024-10-29 18:29:27 修改

阅读量1k

点赞数 12

文章标签： css 前端

于 2024-10-29 14:44:57 首次发布

本文链接：https://blog.youkuaiyun.com/2301_79765198/article/details/143328867

版权

一、固定定位（Fixed Positioning）的概念和应用场景

固定定位是一种CSS定位技术，它允许元素相对于浏览器视窗固定在一个位置，即使页面滚动，该元素也会保持在同一位置。这种定位方式使得元素能够独立于页面内容存在，常被用于创建固定在页面顶部或侧面的导航栏、广告悬浮、返回顶部按钮、模态框等。固定定位的元素脱离了正常的文档流，因此它们不会影响其他元素的布局，也不会随着页面内容的滚动而移动.

固定定位的典型应用场景包括：

1.固定导航：创建一个始终显示在页面顶部的导航栏，用户可以在任何位置浏览页面内容时轻松访问.

2.广告悬浮：在页面的固定位置展示广告，以吸引用户注意力，增加广告的曝光率.

3.返回顶部按钮：在长页面中提供一个快速返回页面顶部的按钮，改善用户体验.

4.侧边栏：固定在页面一侧的侧边栏，便于用户在浏览主要内容的同时访问额外的信息或链接.

5.模态框：在页面中央固定显示的模态框，用于突出显示重要信息或进行用户交互.

固定定位的实现在CSS中通过设置元素的position属性为fixed，并指定top、right、bottom和left属性来设定元素在视口中的位置。

例子

创建10个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: gold;
            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>
   
</body>

运行结果：不管鼠标怎么滑下去都仅仅是灰色盒子在滑动，而盒子3和盒子5都不动。

二、盒子展示与display属性概念

在HTML和CSS中，盒子（元素）的展示方式在很大程度上由display属性控制。display属性规定了元素应该生成的框的类型，这直接影响到元素在页面上如何显示以及与其他元素的布局关系。

二、display属性的常见值及对应的盒子展示效果

1.block（块级元素）

概念：块级元素会独占一行，在其前后都会换行。它会尽可能地占据父容器的可用宽度。
标签示例：<div>和<p>标签默认是块级元素。例如：

<div style="background - color:red;">这是一个div元素，它是块级元素，独占一行。</div>
<p style="background - color: red;"> 这是一个段落元素，也是块级元素，独占一行。</p>

盒子展示效果：块级元素在页面上垂直排列，高度由其内部内容和垂直方向的内边距、边框、外边距共同决定，宽度默认是父容器的宽度（除非设置了具体宽度值）。

2.inline（行内元素）

概念：行内元素不会独占一行，它会按照文本流的顺序在一行内排列。行内元素的宽度和高度只由其内容决定，不能设置宽度和高度等盒模型属性（除了line - height可以间接影响高度）。
标签示例： <span>和<a>标签默认是行内元素。例如：

<span style="background - color: yellow;">这是一个span元素</span>

<a href="#" style="background - color: orange;">这是一个链接元素</a>

盒子展示效果：

多个行内元素会在一行内依次排列，如果一行内空间不足，则会换行显示。它们在垂直方向上的对齐方式默认是基线对齐（baseline），可以通过vertical - alignment属性来改变对齐方式。

3.inline - block（行内块元素）

概念：行内块元素结合了行内元素和块级元素的一些特性。它不会独占一行，可以与其他行内或行内块元素在一行内排列，同时又可以像块级元素一样设置宽度、高度、内边距、边框和外边距等盒模型属性。
标签示例：可以通过设置display: inline - block来将元素变为行内块元素。例如：

<span style="display: inline - block; width: 100px; height: 50px; background - color: pink;">

  这是一个行内块的span元素

</span>

<span style="display: inline - block; width: 80px; height: 40px; background - color: red;">

  这是另一个行内块的span元素

</span>

盒子展示效果：

行内块元素在一行内排列时，它们之间会有空白间隙（这是由于HTML代码中的换行和空格引起的，可以通过一些技巧去除），并且可以根据设置的宽度和高度来展示，在垂直方向上的对齐方式也可以通过vertical - alignment属性调整。

4.none（隐藏元素）

概念：当元素的display属性设置为none时，该元素及其所有子元素都不会在页面上显示，并且不会占用页面空间。
标签示例：例如：

<div style="display: none; background - color: gray;">
  这个div元素被设置为不显示

</div>

盒子展示效果：就好像这个元素不存在于页面上一样，它对布局没有任何影响（除了在DOM结构中仍然存在）。

下面再来演示

下图是无display属性的块级元素，都独占一行

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

<head>
    <style>
        article{
            width: 1500px;
            height: 600px;
            background-color: ghostwhite;
            border: black 1px 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: goldenrod;
            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>

下图设置了display：nome；盒子4被隐藏了

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