目录
前言
页脚置底
页脚置底的几种方法
使用calc()设置内容高度
使用flex布局
将内容部分的margin-bottom改为负值【不推荐】
一个网页底部Demo
HTML部分：
CSS部分：
效果：
其他说明
margin负值特性
下面以一个具体的例子来说明margin为负值的四种情况：
margin-left为负值的情况
margin-right为负值的情况
margin-top为负值的情况
margin-bottom为负值的情况：
padding为负值
使用margin将一个元素置于屏幕中心
前言
我们制作网页时，少不了会给网页制作底部，用来注明作者信息也好，底部导航栏也好。
最近作者在制作个人网站，制作网页底部踩了不少坑，因此来分享一下经验。
页脚置底
页脚置底(Sticky footer)，就是让网页的<footer>部分始终在浏览器底部。
当网页内容足够长以至超出浏览器可视高度时，页脚会随着内容被推到网页底部；
但如果网页内容不够长，置底的页脚就会保持在浏览器窗口底部。
如下图所示：
页脚置底的几种方法
使用calc()设置内容高度
如果页面是“内容-页脚”结构，如下代码所示：
<div class="content">
<!-- content -->
</div>
<footer class="footer">footer</footer>那么，我们就可以使用calc()手动固定内容高度，使内容高度 等于 “整个页面高度 - 页脚高度”，这样页脚就被手动固定在底部，但是这个方法有个劣势，需要我们固定“页脚高度”，如果页脚高度不可控或动态，那么这个方法将会破坏界面布局。
.content {
min-height: calc(100vh - 70px);
}
.footer {
height: 70px;
}使用flex布局
如果在页面设计初期，我们就确定：“标题部分-内容部分-页脚部分”三大部分，那么我们可以使用“flex”布局来很方便的固定底部
<div class="content">
<!-- content -->
</div>
<footer class="footer">footer</footer>首先，我们将<body>标签改为“flex”布局，并将子元素对齐方式设置为“column”(垂直方向)，最后我们将flex-grow的值设置为“1”(如果整个网页有剩余空间，页脚部分则根据内容部分分配，内容部分则占据剩余的空白空间)
html {
height: 100%;
}
body {
min-height: 100%;
display: flex;
flex-direction: column;
}
.content {
flex: 1;
}将内容部分的margin-bottom改为负值【不推荐】
<div class="wrapper"><!-- content --></div>
<footer class="footer">footer</footer>我们可以将内容部分的下边界改为负值(大小为页脚的高度)，同时将<html>和<body>高度设置为100%
html, body {
margin: 0;
padding: 0;
height: 100%;
}
.wrapper {
min-height: 100%;
margin-bottom: -50px; /* 等于footer的高度 */
}
.footer, .push {
height: 50px;
}一个网页底部Demo
该Demo可以复制即用，大家可以自行选用修改
HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<body>
<div style="min-height: calc(100vh - 150px);"></div>
<footer>
<ul>
<li><a href="/1">首页</a></li>
<li><a href="/">作品集</a></li>
<li><a href="/">关于我</a></li>
</ul>
<div class="footer-div">
<span>联系地址：烟台市SDTBU</span>
<span>邮箱：1600472625@qq.com</span>
<span>您对网站有任何建议，欢迎联系作者~</span>
<span>YangYang @ 2024</span>
</div>
</footer>
</body>
</html>CSS部分：
body {
margin: 0px;
}
footer {
height: 150px;
background-color: #f5f5f5;
font-family:Arial, sans-serif;
}
footer > ul {
display: flex;
justify-content: center;
list-style-type: none;
margin: 0px;
padding: 0px;
}
footer > ul > li > a {
margin-top: 40px;
display: block;
color: black;
text-decoration: none;
width: auto;
margin: 20px 40px;
}
.footer-div {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
.footer-div > span{
cursor: default;
color: #666;
font-size: 0.8rem;;
display: block;
margin-bottom: 5px;
font-weight: 600;
}
效果：
其他说明
margin负值特性
- margin-left 设置负值，元素自身向左移动，后面的元素也向左移
- margin-right 设置负值，自身不受影响，右边元素向左移动
- margin-top 设置负值，元素自身向上移动，下面的元素也向上移
- margin-bottom 设置负值，自身不受影响，下方元素向上移动
下面以一个具体的例子来说明margin为负值的四种情况：
<style>
.container {
width: 100px;
height: 200px;
border: 2px solid red;
margin: 150px auto;
}
.box {
width: 100px;
height: 100px;
}
.box1 {
/* 背景色为粉色 */
background-color: rgb(252, 188, 198);
/* 负值，元素自身向左移动，会影响后面元素位置 */
margin-bottom: -50px;
}
.box2 {
/* 背景色为天蓝色 */
background-color: rgb(136, 208, 237, 0.5);
}
</style>
<body>
<div class="container">
<div class="box box1"></div>
<div class="box box2"></div>
</div>
</body>margin-left为负值的情况
margin-right为负值的情况
margin-top为负值的情况
margin-bottom为负值的情况：
padding为负值
padding不能为负值，如果padding为负值，那么系统会自动会将它与padding为0当做一种情况处理。
使用margin将一个元素置于屏幕中心
将margin与绝对定位结合，实现元素置于屏幕中心的效果。
/* 绝对定位 */
position: absolute;
top: 50%;
left: 50%;
/* 向上移动自身宽度一半 */
margin-top: -50px;
/* 向左移动自身宽度一半 */
margin-left: -50px;先利用绝对定位
让元素的顶部和左侧分别与父元素垂直和水平中间对齐
然后再利用margin负值，让元素向上和向左移动自身宽度的一半
这样就实现了水平和垂直居中
![Edge-TTS：微软推出的，免费、开源、支持多种中文语音语色的AI工具[Python代码]](https://i-blog.csdnimg.cn/direct/6acbb6eb2f7649e697772f387d5511d9.png)
