- 作者：老汪软件技巧
- 发表时间：2024-10-10 00:02
- 浏览量：
首先我们前面学习的只是我们的简单的对网页中的某一个盒子实现的样式的设计，现在开始实现的是我们对整个网页实现控制，实现控制我们的整个
网页中的多个盒子排布以及布局，这个时候就需要使用的是我们的 定位position + 浮动float + 弹性盒flex
以前我们实现的布局的形式只是使用的是我们的标准流的布局，这个就是我们的默认的布局的格式和方式
从我们的这里开始，我们就要开始增加我们的代码量了，这个很不好理解的
CSS 布局之定位流（position）
标准流布局（normal flow）
在标准流中调整元素的摆放位置的时候，就是通过盒子模型来实现的调整
这个思想就是: 将网页中的每一个部分抽离出一个一个的组件，一部分一部分的实现开发
在网页中的每一个部分进行组件化开发，在每一个组件进行开发的时候，独立的完成各个部分的功能即可
这个思想的话，也是可以谈到我们的 `div` 元素为什么出现了，就是为了将网页中的每一个部分实现单独的抽离，然后书写每个部分的
结构(HTML)，样式(CSS/Less/Sass)，行为(JavaScript/Typescript)
前端的组件化开发也是顺应了现在的企业的开发模式，分模块实现开发，把网页中的每个部分分为不同的功能（个人理解）
定位流可以设置的几个值
使用下面的元素，可以实现我们的将元素设置为定位元素（positioned element）
静态定位（position: static）【默认值】
相对定位（position: relative）
固定定位（position: fixed）
定位流的注意点
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<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>
