HTML/CSS网站布局方式详解
网站布局的核心就是——怎么把东西摆得清楚、好看、用着顺。一个合理的布局，不光看着舒服，用起来也顺手。现在主流用得比较多的有四种布局方式，各有适合场景，学会灵活切换才是真本事。
固定布局的宽度死死的，比如搞个width: 960px那种，桌面上没问题，但放手机上……有点挤。你要是做 PC 后台，这种布局还挺常见。
流式布局就灵活多了，宽度用百分比，比如width: 80%，窗口变大变小它自己调，省心。适合内容型网站，比如博客、新闻站。
响应式布局现在几乎是标配了，媒体查询加一点flex或grid就能搞定各种屏幕，手机平板都能适配。比如：
@media (max-width: 768px) {
.nav { flex-direction: column; }
}栅格布局更适合复杂排版，像Bootstrap、CSS Grid这些工具都用它。是做后台管理界面，栅格排版清晰又好控。
布局少不了HTML和CSS配合。 响应式方面，记得用百分比单位、弹性盒子，还有 ，搞布局别死盯一种方式，多试试组合玩法。比如用来分区块，margin和padding调间距，position搞定定位。Flexbox搞一维排列，Grid管二维排布，配合媒体查询效果更稳。
max-width限制元素拉伸，导航条可以加点display: none搞成折叠菜单。要体验更完整的响应式效果，可以看看这个响应式布局的例子。Grid + media query，或者Flex + 流式宽度，都挺好用。如果你刚入门，不妨从流式布局练手，再慢慢加料。
文件大小：40.77MB
评论区