CSS布局 | 青训营笔记这是我参与「第五届青训营」笔记创作活动的第2天前言 CSS布局部分一直以来都是CSS的重点

这是我参与「第五届青训营」笔记创作活动的第2天

前言

CSS布局部分一直以来都是CSS的重点之一，布局可以决定一个或多个HTML元素的摆放的样式，一个优秀的精美的网站离不开CSS的修饰，本篇文章将介绍CSS布局中的定位部分。

标准文档流

标准流指的是在不使用其他的与排列和定位相关的特殊CSS规则时，各种元素的排列规则。HTML文档中的元素可以分为两大类：块级元素和行内元素。

块级元素：块状元素排斥其他元素与其位于同一行，可以设定元素的宽（width）和高（height），块级元素一般是其他元素的容器，可容纳块级元素和行内元素。常见的块级元素有div, p ,h1~h6等。

行内元素：行内元素不可以设置宽（width）和高（height），但可以与其他行内元素位于同一行，如果你想控制内联元素的尺⼨，你需要为元素设置display: block; （或者，display: inline-block; inline-block 混合了 inline 和 block 的特性)，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大小决定，宽度由内容的长度控制。常见的行内元素有 span 、a、 img等。

只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位（absolute）和固定定位（fixed）。

定位（position）

定位可以分为五大类别，分别是static、relative、absolute、fixed和sticky，其中绝对定位与固定定位可以让我们元素脱离标准文档流，一般来说，掌握定位可以解决大部分元素的摆放问题。

1. static（默认）

静态布局就是获取每个元素的默认位置，并根据位置摆放到文档布局流的正常位置，是一种默认的元素摆放的定位方式

<!-- 默认定位方式 -->
position: static

2. relative（相对定位）

顾名思义，元素依然按照标准文档流排布，相对元素自己原来的位置进行定位，通过属性 left、right、top 和 right 设置偏移位置的大小。

相对定位有两个使用场景，一是进行元素位置的微调，二是为绝对定位的元素提供参照物。下面我们使用一个demo来测试relative定位的使用方式

<style>
.relation-father {
    width: 200px;
    height: 200px;
    border:  1px solid red;
}
.relation-test {
    position: relative;
    width: 150px;
    top: 20px;
    left: 20px;
    background-color: yellowgreen;
}
</style>

<dody>
<div class="relation-father">
   <div class="relation-test">
        hello world!
   </div>
</div>
</dody>

效果如下：

relative测试

可以看到此时的子元素相比于父元素的<div>分别向右和向下偏移了20px，这是因为我们以父元素的左上角为偏移依据点，往右下角进行偏移。

3. absolute（绝对定位）

使用绝对定位的元素，脱离了标准文档流。绝对定位的元素的参照物是最近的非 static 定位的元素，也就是最近的定位元素。如果找不到，会将视口作为参照物。

通常在使用绝对定位时，会给它的父元素设置一个 postion: relative 样式，让父元素为相对定位，子元素为绝对定位，下面我们依旧以一个demo为例子来看看absolute的使用方式。

<style>
.relation-father {
    pisiton: relative
    width: 200px;
    height: 200px;
    border:  1px solid red;
}
.relation-test {
    position: absolute;
    width: 150px;
    top: 20px;
    left: 20px;
    background-color: yellowgreen;
}
</style>

<dody>
<div class="relation-father">
   <div class="relation-test">
        hello world!
   </div>
</div>
</dody>

效果如下：

relative测试

可以看出来以父元素的左上角为偏移点与我们relative得到的效果其实是一样的，为了分析出两者的区别，我们这里把父元素向下移动并且去掉relative的定位属性。

<style>
.relation-father {
    margin-top: 20px;
    width: 200px;
    height: 200px;
    border:  1px solid red;
}
.relation-test {
    position: absolute;
    width: 150px;
    top: 20px;
    left: 20px;
    background-color: yellowgreen;
}
</style>

<dody>
<div class="relation-father">
   <div class="relation-test">
        hello world!
   </div>
</div>
</dody>

relative测试2

可以看到此时的子元素不再随着父元素的移动而移动，这是因为我们取消了父元素上的相对定位，此时子元素绝对定位以视口作为参照物，相对视口向右下角移动了20px于是得到上图的样式

4. fixde （固定定位）

固定定位的元素脱离了标准文档流。固定定位的参照物是视口。当页面滚动时，固定定位的元素会保持位置不变。

固定定位适合一些元素相对窗口固定的场景，比如页面侧边的工具按钮，比如页面底部的返回顶部按钮，比如页面居中的弹窗等。

<!-- 固定定位方式 -->
<style>
.fixed-test {
    position: fixed;
    top: 10px;
    left: 10px;
}
</style>

上方代码的意思是我们可以指定任意一个元素，它可以依据当前的视口往右下角偏移10px，此时这个元素会固定在这个位置，当我们鼠标控制页面上滑或者下滑的时候，该元素不会改变其位置。具体的效果可以参考上文的绝对定位的效果图。

5. sticky（粘性定位）

粘性定位是 CSS 后来推出的一个定位种类，粘性定位可以看作是相对定位和固定定位的一个结合体。

当粘性定位元素在在目标区域以内，它表现的像是 relative 定位；在页面滚动过程中，当其距离父元素的距离达到 sticky 粘性定位设置的距离时，又表现的像是 fixed 定位，固定到此位置不再变化。

页面中的头部导航通常会使用这种定位，方便用户下拉很远之后，依然能快速使用头部的菜单等功能。

<!-- 粘性定位方式 -->
<style>
.fixed-test {
    position: fixed;
    top: 10px;
}
</style>

要使用position: sticky，需要我们满足以下条件:

1.父元素不能overflow:hidden或者overflow:auto属性；2.必须指定top、bottom、left、right4个值之一，否则只会处于相对定位；3.父元素的高度不能低于sticky元素的高度；4、sticky元素仅在其父元素内生效。

总结

以上就是CSS中的定位部分的介绍，定位部分几乎是前端开发中的必学项目，在上文中的每一个定位属性中我们都给出了一定的是应用场景，从应用场景来看，定位属性使用的频率还是很高的，尤其是当中的相对定位与绝对定位更可以称得上是每一个页面的“必需品”；除了我们介绍的定位给属性，对于布局部分CSS还有一个重要的部分是盒子模型以及弹性盒，使用定位属性与弹性盒模型进行开发可以解决绝大部分的前端页面的需求。

参考文章

MDN-web开发技术

CSS布局 | 青训营笔记

前言