CSS 布局 ----- 定位流
前端 CSS 学习目录导航
首先我们前面学习的只是我们的简单的对网页中的某一个盒子实现的样式的设计，现在开始实现的是我们对整个网页实现控制，实现控制我们的整个
网页中的多个盒子排布以及布局，这个时候就需要使用的是我们的 定位position + 浮动float + 弹性盒flex
以前我们实现的布局的形式只是使用的是我们的标准流的布局，这个就是我们的默认的布局的格式和方式
从我们的这里开始，我们就要开始增加我们的代码量了，这个很不好理解的
CSS 布局之定位流（position）
-
当使用定位流的时候，可以实现的是将元素的布局实现从标准流（文档流）中实现脱离出来，可以不是标准流的那一套布局了
- 可以实现将一个元素实现存放在另一个元素的上面
- 实现将元素始终存放在浏览器视口中的同一个位置
-
标准流布局（
normal flow）-
标准流就是平时的以往写的，没有任何的其他的设置，只是实现的浏览器自带的一套布局准则
-
可以理解的是，就是关于没有涉及这些布局的样式的设计的部分，这个就是我们的标准流布局
-
特征就是：
从左到右，从上到下按照顺序排放好的- 默认的情况下每一个盒子之间是不存在
层叠现象
-
在标准流中调整元素的摆放位置的时候，就是通过盒子模型来实现的调整
margin和padding来实现的我们的盒子的排版- 所以说，在后面实现布局排版的时候，先把不同的部分抽象为每一个每一个的盒子
- 然后在盒子里面实现标准流的设计，在整体的页面的排版的时候，通过我们的布局的样式进行一个一个的设计
- 最后就形成了我们的自己的网页，同时这个也是我们的
vue和react框架的思想
-
这个思想就是: 将网页中的每一个部分抽离出一个一个的组件，一部分一部分的实现开发 在网页中的每一个部分进行组件化开发，在每一个组件进行开发的时候，独立的完成各个部分的功能即可 这个思想的话，也是可以谈到我们的 `div` 元素为什么出现了，就是为了将网页中的每一个部分实现单独的抽离，然后书写每个部分的 结构(HTML)，样式(CSS/Less/Sass)，行为(JavaScript/Typescript) -
前端的组件化开发也是顺应了现在的企业的开发模式，分模块实现开发，把网页中的每个部分分为不同的功能（
个人理解）
-
-
定位流可以设置的几个值
-
设置这个值就还是标准流
position: static默认值，静态定位，这个时候就是标准流
-
使用下面的元素，可以实现我们的将元素设置为定位元素（
positioned element）position: relative相对定位position: absolute绝对定位position: fixed固定定位position: sticky粘性定位
-
-
静态定位（
position: static）【默认值】- 使用这个定位的时候，元素就是按照的是标准流进行的布局（
normal flow） - 这个时候，定位流中可以设置的属性:
left rioght top bottom都是无效的 - 上面的几个属性只有在我们的定位元素的时候才可以实现使用这几个属性，这几个属性才实现了激活
- 使用这个定位的时候，元素就是按照的是标准流进行的布局（
-
相对定位（
position: relative）-
通过相对定位可以发现，元素本身还是会占用页面中在标准流中的位置的空间的
-
但是是可以通过：
left right top buttom来实现控制元素的位置，实现调整的时候，是依据的元素的原本的位置实现移动的 -
通过上面的描述我们就可以知道的是： 相对定位的元素是没有完全脱离标准流的，是依据的是元素本身的左上角开始移动的
-
<!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> /* 开始样式的设计 */ body, div, span{ padding: 0; margin: 0; font-size: 16px; } div > span:nth-child(1){ color: skyblue } div > span:nth-child(2){ color: yellowgreen } div > span:nth-child(3){ color: orange } /* 注意，我们的元素一旦处于激活状态的定位元素 ， 那么就可以使用我们的 left right top bottom 来控制其在页面中的位置的 */ /* 开始对我们的span元素进行定位流的设计 */ div > span:nth-child(-n + 2){ position: relative; /* 先实现设置我们的这个元素为我们的相对定位 */ left: 100px; top: 5px; } </style> </head> <body> <div> <span>我是第一个span元素</span> <span>我是第二个span元素</span> <span>我是第三个span元素</span> </div> </body> </html> -
使用的场景就是：
-
在不影响其他元素的前提下，对当前的元素实现元素位置的微微调整
-
或者说可以实现的是将一个图片作为背景的时候，在视口中一直居中显示
-
这个的实现可以通过设置背景来实现，然后设置背景定位为
center即可 -
或者说还可以利用这个 相对定位来实现
background: relative（这个有一定难度）- 实现步骤： 1.先通过定位移动背景一半 2.然后通过
margin-left或者margin-right设置为50% -
<!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> /* 开始样式的设计 */ body { padding: 0; margin: 0; } .box { height: 300px; background-color: skyblue; overflow: hidden; /* 将超出盒子的部分全部隐藏不显示 */ } /* 开始设置图片 */ .box img { position: relative; /* left: -200px; 注意这里是我们的图片宽度的一半 */ /* transform 就是相对于元素本身的百分比 */ transform: translate(-50%); /* 这个就可以实现最终的不用手动的调整，直接是图片一半 */ margin-left: 50%; /* 当我们使用我们的百分比来实现移动的时候，是相对于 container block 来作为比较单位的 */ } /* 通过上面的样式的设计，那么就可以实现背景图片，不会随着视口的移动导致图片的不居中 */ </style> </head> <body> <div class="box"><img src="" alt="网络出错，请检查网络后重试"></div> </body> </html>
- 实现步骤： 1.先通过定位移动背景一半 2.然后通过
-
-
-
-
固定定位（
position: fixed）-
这种的定位是完全的脱离了标准流（文档流）
normal flow（可以理解的是：元素不会再占用原本的位置了，不占用空间了） -
可以通过
left right bottom top来实现元素盒子的定位 -
这种定位的参照物是依据的是可视视口的，可以实现设置一个盒子元素在网页中位置的固定，就是不会随着视口的滚动而移动
-
就是相当于百度的搜素引擎一样的，上面的搜素框是不会随着网页的画布的滚动而滚动的
-
<!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> body { padding: 0; margin: 0; } :root { height: 1700px; /* 体现我们的固定定位的话，视口的高度能大就大 */ background-color: skyblue; } .box, .box01 { width: 100px; height: 100px; background-color: red; } .box { position: fixed; left: 10px; top: 200px } .box01 { margin: 10px; } /* 对我们的 container block 进行了上面的样式的设计的话， 那么最终的效果就是，这个盒子在视口中的位置一直不变 */ </style> </head> <body> <div class="box"></div> <div class="box01"></div> </body> </html> -
可以应用的场景含有：
- 背景图片的固定
- 选项栏在页面中的固定
- 音乐播放栏的固定
- 在后期的开发中，我们是可以发现一点，就是我们网页的高度基本都是由内容撑起来的
-
-
绝对定位（
position: absolute）-
元素还是一样的，脱离了标准流（
normal flow）,所以说通过调整位置，是不会占用原来位置的空间的 -
绝对定位的移动是根据的是
container block（父元素）进行的样式的设计 -
当没有这个
container block的时候，默认的就是根据的是视口来实现的位置的调整 -
由于这个属性的设计任然是激活了定位元素的属性，所以说还是可以通过
left right top bottom来控制的元素 -
只要上面的两个定位理解了，这个就很好理解，就不做过多的描述了（
这个部分感觉我文字描述不清除，可以私聊） -
所以说这个时候，就可以有一个开发时候的结论出现了: 父相子绝: 父元素使用相对定位，子元素使用绝对定位 原理就是: 相对定位（relative）就是实现的是对我们的元素进行在标准流中的位置的调整 绝对定位（absolute）就是实现的是一个`container block`为子元素调整位置的 但是当我们希望一个元素在视口的固定的位置进行展示的时候，那么就可以直接使用固定定位（fixed） -
使用绝对定位的场景含有：
- 父相子绝
- 父绝子绝
- 兄弟都绝（
词穷啦！！！）
-
-
粘性定位（
position: sticky）- 首先的话，我们的这个属性是比较新的，可以看作的是
相对定位和固定定位的结合体 - 它可以实现的效果是：可以变现的是相对定位一样，但是到达某个值的时候，可以直接变为固定定位
- 这个属性实现停留在页面的根据的参照物是那种距离最近的具有滚动的视口，根据的是滚动的视口来实现的判断
- 首先的话，我们的这个属性是比较新的，可以看作的是
-
控制层级的属性（
z-index）- 首先需要我们注意的是这个属性设置后生效的位置是在定位流中才可以实现
- 然后每一个元素的默认值为:
0 - 显示的模式是，我们的后出现的元素会覆盖前面的元素
- 值越大，那么最终的显示就越在上面，利用这个属性，我们是可以实现模态框（
models）的
定位流的注意点
-
设置定位流为
absolute/fixed时候的注意点- 这个时候，我们的每个元素都是可以设置宽高的
width/height - 宽高默认是由内容来决定的，不再区分这个盒子是什么级的元素(
block/inline/inline-block) - 不再为
container block(父元素) 汇报宽高 - 脱标元素内部还是按照的是标准流进行的布局
- 这个时候，我们的每个元素都是可以设置宽高的
- 还有一个开发的思路： 就是实现使用那个精灵图的时候，我们是可以将精灵图的设置实现单独的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>
/* 开始我们的样式的设计 */
/* 这个是我们的CSS的新的书写方式，层次感更强 */
body {
padding: 0;
margin: 0;
height: 1700px;
.nav {
width: 70px;
text-align: center;
margin: 100px auto;
background-color: skyblue;
position: sticky;
top: 0;
.sticky_h {
color: red
}
}
.container {
width: 800px;
height: 600px;
background-color: rgba(255, 153, 0, 0.5);
position: relative;
margin: 100px auto;
.fix {
width: 50px;
height: 50px;
background-color: brown;
position: fixed;
right: 10px;
bottom: 10px;
/* 注意我们的固定定位一直是相对于视口而言的,但是实现移动的时候，还是根据的是container block 进行的位置调整 */
}
.box, .box01 {
width: 100px;
height: 100px;
position: absolute;
}
.box {
background-color: red;
left: 10px;
top: 10px;
z-index:1;
.son {
width: 50px;
height: 50px;
background-color: yellowgreen;
position: absolute;
left: 10px;
top: 10px;
}
}
.box01 {
background-color: skyblue;
left: 20px;
top: 20px;
/* 这个属性只能在定位流中生效 */
z-index: 0; /* 通过我们的这个属性是可以来实现设置层级显示的时候，表层的显示是哪一个 */
}
}
}
</style>
</head>
<body>
<div class="nav">
<h1 class="sticky_h">标题</h1>
</div>
<div class="container">
<div class="fix"></div>
<div class="box">
<div class="son"></div>
</div>
<div class="box01"></div>
</div>
</body>
</html>
