这篇文章主要介绍“CSS的单列布局怎么实现”，在日常操作中，相信很多人在CSS的单列布局怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS的单列布局怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
单列布局中还能划分为两种，一种是等宽的单列布局；另一种是 header 和 footer 等宽并占满屏幕，而 contant 略窄的单列布局。
等宽单列布局：
在等宽单列布局中，我们需要对 header、contant、footer 都设置同样的宽度，设置宽度可以使用 width 或者 max-width 两个属性，两者不同的区别的在于，当屏幕小于设置的宽度时，width 会出现滚动条，而 max-width 显示屏幕实际的宽度。设完宽度后，在设置 margin：0 auto; 实现居中。
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS实现单列布局 - 云搜网(yisu.com)</title>
<style type="text/css">
.header{
max-width: 1080px;
height: 100px;
margin: 0 auto;
background-color: gray;
}
.contant{
max-width: 1080px;
height: 500px;
margin: 0 auto;
background-color: red;
}
.footer{
max-width: 1080px;
height: 100px;
margin: 0 auto;
background-color: gray;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="contant"></div>
<div class="footer"></div>
</body>
</html>
不等宽单列布局
不等宽的实现原理与上述相似，只是不在设置header与footer设置宽度，而在contant中设置宽度即可。
源代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS实现单列布局 - 云搜网(yisu.com)</title>
<style type="text/css">
.header{
height: 100px;
margin: 0 auto;
background-color: gray;
}
.contant{
max-width: 1080px;
height: 500px;
margin: 0 auto;
background-color: red;
}
.footer{
height: 100px;
margin: 0 auto;
background-color: gray;
}
</style>
</head>
<body>
<div class="header"></div>
<div class="contant"></div>
<div class="footer"></div>
</body>
</html>
到此，关于“CSS的单列布局怎么实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注云搜网网站，小编会继续努力为大家带来更多实用的文章！
