CSS 常用布局
总结文章:https://mp.weixin.qq.com/s/S008EYuPxLqKFBnss5mZyw
两栏布局(边栏定宽主栏自适应)
方法一:float + overflow(BFC 原理)
方法二:float + margin
方法三:flex
方法四:grid
三栏布局(两侧栏定宽主栏自适应)
方法一:圣杯布局
方法二:双飞翼布局
方法三:float + overflow(BFC 原理)
方法四:flex
方法五:grid
三行布局(头尾定高主栏自适应)
<div class="layout">
<header></header>
<main>
<div class="inner"></div>
</main>
<footer></footer>
</div>
html,
body,
.layout {
height: 100%;
}
body {
margin: 0;
}
header,
footer {
height: 50px;
}
main {
overflow-y: auto;
}
方法一:calc
方法二:absolute
方法三:flex
方法四:grid
注:日常整理,仅做参考,欢迎评论,虚心接受。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~