这篇文章主要介绍“CSS的单列布局怎么实现”，在日常操作中，相信很多人在CSS的单列布局怎么实现问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS的单列布局怎么实现”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

单列布局中还能划分为两种，一种是等宽的单列布局；另一种是 header 和 footer 等宽并占满屏幕，而 contant 略窄的单列布局。

等宽单列布局：

在等宽单列布局中，我们需要对 header、contant、footer 都设置同样的宽度，设置宽度可以使用 width 或者 max-width 两个属性，两者不同的区别的在于，当屏幕小于设置的宽度时，width 会出现滚动条，而 max-width 显示屏幕实际的宽度。设完宽度后，在设置 margin：0 auto; 实现居中。

实现代码：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>CSS实现单列布局-亿速云(yisu.com)</title><styletype="text/css">.header{max-width:1080px;height:100px;margin:0auto;background-color:gray;}.contant{max-width:1080px;height:500px;margin:0auto;background-color:red;}.footer{max-width:1080px;height:100px;margin:0auto;background-color:gray;}</style></head><body><divclass="header"></div><divclass="contant"></div><divclass="footer"></div></body></html>不等宽单列布局

不等宽的实现原理与上述相似，只是不在设置header与footer设置宽度，而在contant中设置宽度即可。

源代码如下：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="utf-8"><title>CSS实现单列布局-亿速云(yisu.com)</title><styletype="text/css">.header{height:100px;margin:0auto;background-color:gray;}.contant{max-width:1080px;height:500px;margin:0auto;background-color:red;}.footer{height:100px;margin:0auto;background-color:gray;}</style></head><body><divclass="header"></div><divclass="contant"></div><divclass="footer"></div></body></html>

到此，关于“CSS的单列布局怎么实现”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！