本文手把手带你了解CSS布局的三大方式：标准流、浮动与定位~你必须要知道的布局技巧都总结好啦！并配有综合实践案例，三大方式相互配合实现一个布局规整的（仿崩三）网页！
实践案例分析
只有知道了这三种布局方式在开发中的用途，才能实现“紧密配合”“各司其职”，使开发效率更高！因此先让我们分析实战案例中是怎样运用它们的吧~
- 本案例第一部分由导航栏，‘战备列表’标题，以及一个展示女武神的大盒子组成~
- 最上面的导航栏是固定在屏幕顶端，不随滚动条发生变化的。要做到这个效果，需要使用‘定位’方式中的固定定位方式。
- ‘战备列表’标题和展示女武！神的大盒子是用标准流实现布局的。标准流是最基础的布局方式，务必好好学习打牢基础。在项目中一般也是最先使用标准流实现大块盒子和页面的整体布局，再辅以浮动和定位才能实现整个界面布局！
- 大盒子中四个女武神小盒子使用了‘浮动’的布局方式。‘浮动’方式可以非常方便的使许多个并列关系的盒子规整地摆放在父盒子中。‘浮动’与标准流的配合在这个模块中必不可少！
- 四个律者的名字、简介、推荐阵容是使用标准流来摆放在父盒子中的。
- 第二部分由标题、动态轮播图、咨询列表三个主要大盒子组成~
- ‘今日崩坏新闻放送’使用标准流布局，因为h标签本身为块级元素，独占一行显示。因此只需要设置margion属性就可以摆放好了。
- 左侧轮播图盒子和右侧咨询列表盒子采用‘浮动’方式，一起装在一个大盒子中显示。而该大盒子使用的是标准流布局。这就是‘浮动’的孩子常常搭配标准流的父亲使用~
- 轮播图中的左下侧五个小点，右下两个按钮，以及咨询列表右下的‘更多资讯’按钮使用‘定位’中的绝对定位布局方式。他们压在父盒子的上边，并相对于父盒子固定位置显示。这里综合运用了‘子绝父相’的布局技巧！
布局必备知识点及技巧
分析完这个案例，我们就知道了三种布局方式各自的运用场景了~分析案例中所提到的技巧在接下来都会进行讲解，一起耐心学习吧！
一.普通流/标准流
1.盒子：
包括边框(border)，内边距（padding)，外边距（margin),实际内容(content)
2.边框
(1)border-style
- 属性值none,solid,double,dashed,dotted.........
(2)border-width
- 单位为px
(3)border-color
(4)复合写法border
-
无先后顺序，如1px solid red
-
可分开设置：top,right,left,bottom
@给表格画边框
table>tr>td或th
- border-collapse:collapse;合并边框线
@边框会影响盒子大小
边框的宽度加在盒子周围
3.内边距
默认紧贴左上角
设置content与border间的距离
（1）单独设置：padding-left/right/bottom/top:20px
（2）复合写法：padding
(3)padding会撑大盒子
因此盒子不设置width和height会比较合理
直接设定padding，盒子大小就会随内容物大小改变，并且始终保持内边距不变！
div {
/* width: 100px;
height: 100px; */
padding: 100px;
border: rgb(168, 11, 11) 5px dotted;
background: #b36969;
}
4.外边距margion
和padding使用方法一致~同样也会撑大盒子！
@如何使块级盒子水平居中显示？
- 盒子必须指定了宽度
- 将盒子左右边距设为auto
margion:0 auto
margion:100px auto
margion :auto
@如何使行内元素居中对齐？
在其父类中添加text-aligin:center
@注意：行内元素一般只设置左右内外边距
若要设置上下则需要转换为其他类型元素
@注意：外边距合并的塌陷问题
想要如图这样让子元素相对父元素有一定距离时，一般使用‘定位’来实现。若使用标准流给父，子都指定margin-top时，则会发生外边距合并的塌陷问题：父、子的margin-top都会变为父、子指定的margin-top中最大的那个值。
解决办法：
- 为父盒子指定上边框线
- 为父元素定义上内边距
- 为父元素添加：overflow:hidden;
<div class="one">
<div class="two">
</div>
</div>
<style>
.one {
width: 200px;
height: 200px;
background-color: #d48686;
overflow: hidden;
}
.two {
width: 100px;
height: 100px;
background-color: #922d2d;
margin-top: 30px;
}
</style>
@清除内外边距的常用做法
* {
margin: 0;
padding: 0;
}
由于不同浏览器默认带有不同的内外边距，所以一般css代码的开头都会写上这么两句，可以使网页在不同浏览器中的兼容性更好~
二.浮动
1.属性：float:none/left/right
2.浮动的特性（难点）：
-
脱离标准流
浮动的盒子不再保留原先的位置
-
如果多个盒子都加了浮动，那么他们会一行显示，顶端对齐
如果父级元素一行装不下，会挤到下一行
-
任何元素都可以浮动
添加浮动后都会具有行内块元素的特性，可以设置高度宽度等
3.浮动元素通常搭配标准流的父亲
实际开发中常常设定一个标准流的父盒子，再给父盒子中的几个小盒子添加浮动，使他们在父盒子限定的范围内紧密排列!
三.定位
1.定位的应用：
- 某个元素可以自由的在一个盒子内移动位置并压住其他盒子
- 让盒子固定在屏幕某位置，如导航栏搜索栏等
2.定位=定位模式+边偏移
（1）定位模式
-
position:static/relative/adsolute/fixed
1.静态定位static(了解）:
- 按照标准流特性拜访盒子，没有边偏移
2.相对定位relative(重要)：
-
边偏移设置即为相对自己原来的位置偏移的量
-
相对定位不脱标，仍保留其原来在标准流的位置，不会被其他盒子占有原位置！
3.绝对定位absolute(重要)：
元素在移动位置时是相对其祖先元素来说的
-
如果没有祖先元素，或者父元素没有定位，则是相对于document元素来说的
-
如果父元素有定位：则以最近一级有定位的祖先元素为基准
-
脱标。绝对定位不保留原来在标准流的位置，会被其他元素占有
4.固定定位fixed（重要）
-
以浏览器的可视窗口为基准定位
-
不随滚动条的滚动而滚动
（2）边偏移
- top
- bottom
- left
- right
值单位为px
3.子绝父相
-
孩子用绝对定位，这样可以在父盒子内自由地摆放
-
父亲要加相对定位，这样父亲不会脱标会保留原来的位置，保持页面布局
代码展示
具备以上知识储备后，就可以独立制作出本文开头的网页了。当然本网页还使用了js来做出一些动态效果，例如轮播图自动轮播，按钮点击切换下一张等。 以下为参考代码：
1.html部分
<h1>战备列表</h1>
<p>这些律者你都没有，羡慕吧嘻嘻</p>
<div class="nav">
<span>设为首页</span><span>手机版</span><span>客户端</span><span>微博</span>
</div>
</div>
<div class="box">
<div class="cha">
<img src="/web/asset/cha1.png" alt="">
<p><a href="https://bh3.mihoyo.com/valkyries/1206/25858"> 终焉之律者</a></p>
<p class="review">
造成火焰元素伤害，可进行空中攻击
</p>
<span class="name">推荐阵容</span>
<span class="p1"></span>
<span class="p2"></span>
<span class="p3"></span>
</div>
<div class="cha">
<img src="/web/asset/cha2.png" alt="">
<p><a href="https://bh3.mihoyo.com/valkyries/1207/25857"> 始源之律者</a></p>
<p class="review">
使用太刀造成雷电元素伤害
</p>
<span class="name">推荐阵容</span>
<span class="p1"></span>
<span class="p2"></span>
<span class="p3"></span>
</div>
<div class="cha">
<img src="/web/asset/cha3.png" alt="">
<p><a href="https://bh3.mihoyo.com/valkyries/1208/25103">真理之律者</a></p>
<p class="review">
新一代顶级元素辅助
</p>
<span class="name">推荐阵容</span>
<span class="p4"></span>
<span class="p3"></span>
<span class="p5"></span>
</div>
<div class="cha">
<img src="/web/asset/cha4.png" alt="">
<p><a href="https://bh3.mihoyo.com/valkyries/1216/28160"> 死生之律者</a></p>
<p class="review">
使用镰刀造成物理伤害
</p>
<span class="name">推荐阵容</span>
<span class="p6"></span>
<span class="p7"></span>
<span class="p8"></span>
</div>
</div>
<h1>今日崩坏新闻放送</h1>
<div class="info">
<div class="slider">
<div class="slider-wrapper">
<img src="图片资料/news1.png" alt="" />
</div>
<div class="slider-footer">
<p>6.8版本情报大放送！死律登场</p>
<ul class="slider-indicator">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="toggle">
<button class="prev"><</button>
<button class="next">></button>
</div>
</div>
</div>
<div class="bg">
<ul class="list">
<script>
const arr = ['崩坏三同人衍生作品创作指引', '封号名单（2023年7月31日）', '精准补给B|布洛妮娅：次生银翼', '神州漂流记|参与活动赢取水晶等丰富奖励', '雷之律者限时返场补给开启~', '魔法裁衣|参与可得三星圣痕', '云墨丹心|服装补给八折！', '参与活动赢水晶', '补给概率与结果公示']
for (let i = 0; i < arr.length; i++) {
const word = arr[i]
document.write(`
<li> <a href="#">${word}</a></li>
<hr>
`)
}
</script>
</ul>
<button>更多资讯</button>
</div>
</div>
2.css代码
* {
margin: 0;
padding: 0;
color: #c9dbe0;
text-align: center;
font-family: 'Microsoft YaHei';
line-height: 1.5em;
}
.nav {
position: fixed;
top: -20px;
left: 0;
border-top: rgb(68, 153, 166) 3px solid;
border-bottom: #c3bbbb 1px solid;
height: 36px;
width: 1385px;
/* line-height: 41px; */
margin: 15px 0;
text-align: center;
background-color: #0f152b;
}
.nav span {
font-size: 14px;
padding: 20px 70px;
color: rgb(243, 249, 218);
}
.cha .p1,
.cha .p2,
.cha .p3,
.cha .p4,
.cha .p5,
.cha .p6,
.cha .p7,
.cha .p8 {
display: inline-block;
width: 44px;
height: 64px;
border: #3bd2fc 1px solid;
/* background-image: url(/web/asset/zr2.png); */
background-size: 100% 100%;
background-color: #a95e5e;
}
.cha span:hover {
background-image: url(/pictures/bg7.jpg);
}
span:hover {
background-color: #6dd6f3;
}
h1 {
margin-top: 40px;
color: #82e4ff;
font-style: italic;
}
p {
font-size: 14px;
}
body {
background: url(/pictures/beng3.jpg) no-repeat;
background-size: 1500px;
background-attachment: fixed;
}
.box {
width: auto;
height: 500px;
background-color: rgba(255, 255, 255, .6);
text-align: center;
margin-top: 10px;
border: #82e4ff solid 5px;
/* background-image: url(/pictures/bg8.jpg); */
overflow: hidden;
}
.box div {
background-color: #edf4f7;
/* 浮动布局 */
float: left;
width: 280px;
margin: 50px 30px;
}
.box img {
width: 280px;
}
div p {
color: #3bd2fc;
font: italic 700 19px 'Microsoft YaHei';
}
.box .review {
color: #6fa6ea;
font: normal 14px 'Microsoft YaHei';
line-height: 2em;
}
.name {
/* background-color: #887474; */
display: inline-block;
width: 55px;
height: 35px;
color: #6fa6ea;
}
.name:hover {
color: #fd7eca;
}
.name {
font-size: 12px;
display: inline-block;
}
/* .box>div:hover {
background-color: #f0f2a7;
} */
.cha:hover {
background-color: #f0f2a7;
}
a {
color: #3bd2fc;
text-decoration: none;
}
a:hover {
color: #fd7eca;
}
.info {
width: 1200px;
height: 500px;
margin: 30px auto;
}
.slider {
/* display: inline-block; */
float: left;
width: 700px;
background-color: rgba(0, 0, 0, .5);
overflow: hidden;
}
.slider-wrapper {
width: 700px;
}
.slider-wrapper img {
width: 100%;
height: 100%;
display: block;
}
/* 子绝父相 */
.slider-footer {
width: 700px;
height: 80px;
background-color: rgb(93, 81, 111);
padding: 12px 12px 0 12px;
position: relative;
}
.slider-footer .toggle {
position: absolute;
right: 0;
top: 12px;
display: flex;
}
.slider-footer .toggle button {
margin-right: 12px;
width: 28px;
height: 28px;
appearance: none;
border: none;
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-radius: 4px;
cursor: pointer;
}
.slider-footer .toggle button:hover {
background: rgba(255, 255, 255, 0.2);
}
.slider-footer p {
margin: 0;
color: #fff;
font-size: 18px;
margin-bottom: 10px;
}
.slider-indicator {
margin: 0;
padding: 0;
list-style: none;
display: flex;
align-items: center;
}
.slider-indicator li {
width: 8px;
height: 8px;
margin: 4px;
border-radius: 50%;
background: #fff;
opacity: 0.4;
cursor: pointer;
}
.slider-indicator li.active {
width: 12px;
height: 12px;
opacity: 1;
}
.bg .list {
position: relative;
}
.bg .list li {
font: 19px 'Microsoft YaHei';
color: rgb(234, 250, 255);
line-height: 40.4px;
}
.bg .list li :hover {
color: rgb(247, 223, 182);
background-color: #344f65;
background: 800px 70px;
}
.bg {
width: 500px;
float: right;
position: relative;
top: 0;
background-color: rgba(0, 0, 0, .5);
border: 2px solid rgb(91, 206, 214);
}
.bg button {
position: absolute;
bottom: 0;
right: 0;
background-color: #f6cc73;
width: 100px;
height: 50px;
color: black;
font-size: 20px;
border: white 1px solid;
}
.bg button:hover {
background-color: #fff;
}
3.js代码
碍于字数原因，js部分代码在本文中先不予展示了~以后会发布在其他js学习相关的文章中！
