三篇文章带你过一遍CSS基础知识-CSS定位布局

掰头战士
7 阅读5分钟

前言

当你开发一个网页页面时，显然，只用html文件没办法做出像样的页面。这就需要CSS工具帮忙了！笔者将用三篇文章带你从文档流出发，彻底梳理CSS的基础知识。

CSS定位布局

我们从一段代码开始：

<!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{
            width: 100px;
            height: 100px;
            background-color: burlywood;
        }

    </style>
</head>
<body>
    <div class="box"></div>
    
</body>
</html>

这是一个常规的html骨架。一般我们的CSS代码都写在title标签结尾下面，也就是style标签你可以观察到：我们已经创建了一个div对象为box，它在网页中长这样：

定位布局1.png

如果你看的更仔细点，会发现这个棕色的方块并没有挨着页面的边框！现在我想让这个方块挨着该怎么办？

  • 不妨使用margin。直接设置所有的属性为margin。
*{
   margin:0;
}

确实可行，现在挨着了。我若再新建一个box2，设置属性如下：

.box2{
            width: 200px;
            height: 100px;
            background-color: blue;
        }

它和box的位置关系怎么样？

2.png

为什么排在了box的下面？CSS的位置关系是怎么设置的？这就要讲到html的文档流与三种元素。

文档流与三种元素

文档流

文档流(Normal Flow)：是页面的默认排列方式，元素从上到下、从左往右一次排列，呈现一种流式的排列效果。

一个 HTML 就是一个文档，文档中的元素默认按照文档流的方式进行布局。

文档流的特性：

  1. 从上到下：块级元素依次垂直排列
  2. 从左到右：行内元素水平排列，宽度不够自动换行
  3. 自动填充：块级元素默认占满父容器宽度

上面那段代码的box与box2都是块级元素，因此都默认占一行，不会并在一起。于是你有点疑问：怎样的算块级元素？有哪些元素？

块级元素

块级元素：

  • 默认占据父容器的一整行，可以设置宽高。
  • 天生有display-block属性

行内块级元素

行内块级元素：

  • 可以同一行排列，也可以设置宽高
  • display - inline block 属性

行内元素

  • 不可以设置宽高

三种元素的演示

 .box{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            display: inline-block;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color: blue;
            display: inline-block;
        }

我们将box、box2都设置为 display: inline-block，也就是块级行内元素，于是这两块就可以并列在同一行了。

别忘了两个都设置为行内块级元素才能同列，否则会因为块级元素独占一行的特性而毫无变化。

接着来看看行内元素，我们插入一段网址,这是我写的上一篇文章地址，讲的是js基本类型。

<a href="https://juejin.cn/post/7639999260360523811">我的文章</a>

设置属性为

.a{
            width: 100px;
            height: 100px;
        }

不会有任何变化。因为行内元素不能设置宽高

CSS的四种定位

CSS 提供了四种定位方式，通过position属性控制

相对定位

相对定位：是相对于元素自身在文档流中的原始位置进行偏移

  • 不会脱离文档流，通过 position: relative 来设置 请看代码：
.box{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            /* display: inline-block; */
            position: relative;
            left: 50px;
            top: 50px;
        }

image.png 现在box就移动了位置。

相对定位后，原始位置的占位空间亦然保留，后续元素并不会顶上来！

绝对定位

绝对定位：相对最近的拥有定位属性的父级元素进行定位。

绝对定位会完全脱离文档流，如果找不到参考，最终会以body为参考标准

定位属性：就是position的设置，例如：

position:relative
position:absolute
position:fixed
position:sticky

那么我们设定一个wrap作为box的子元素，属性这样设置：

width: 50px;
    height: 50px;
    background: #ee13c2;
    position: absolute; 
    left: 20px;
    top: 20px;

粉色色块就出现了。

image.png

脱离文档流：脱离之后，就好像这个元素从页面中漂浮起来，不占据任何空间、后续元素会填补它的位置。

利用 transform 可以实现完美居中

trap{
position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

固定定位

固定点位：相对于浏览器可视区域进行定位，不随页面滚动而滚动。

.box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: fixed;
            bottom: 10px;
            right: 10px;
        }

那么右下角就有一个固定下来的红块

image.png

粘性定位

粘性定位可以看作 relative 和 fixed 的结合体，到达指定位置之前是相对定位，到达后就变成固定定位

.box{
            width: 100px;
            height: 100px;
            background-color: burlywood;
            position: relative;
        }
        .box2{
            width: 200px;
            height: 100px;
            background-color: blue;
            position: sticky;
            top: 0;
        }
        .sticky-box {
            width: 100px;
            height: 50px;
            background-color: #ee13c2;
            position: relative;
        }

可以看到，这样我们就实现了类似导航栏的效果。

层级控制:z-index

  1. 层级要生效，一定要配合定位属性
  2. 只能在兄弟元素之间进行比较
  3. 后设置的层级显示优先级高于先设计的

总结

CSS定位布局的核心在于理解文档流与参考对象

1.文档流是页面布局的基石，要和脱离的含义一起牢记

2.定位的核心是相对谁偏移

3.牢记三种元素的区别

4.层级元素控制靠z-index

如果本文对你有帮助，欢迎点赞、收藏、关注，一起学习、一起讨论。你的支持是我创作的动力！🌹🌹

avatar
文章
阅读
粉丝