前端知识整理-DIV+CSS 之页面布局

终于收到了第一份面试邀请。

时间是下周一。 也是为了验证自己的修炼水平 进行一下知识整理 顺带 查漏补缺 也给后来的同学 提供一些参考

我们用实例来总结：

假设 进行三栏布局 左右300px 中间自适应 我们有几种解决方案呢？

第一种，我们用float

第二种，我们用绝对布局

以上两种过于简单 不解释了

第三种，就是flaxbox了

flexbox就是我心目中的最佳解决方案了，很多坑都是用flex来解决的 

代码如下：

复制代码
<head>
html *{
display:flax;
}
.left{
width:300px;
    }
.center{
flex:1;
background:red;

}
.right{
width:300px;
}
</head>


<body>
<div class="left"></div>
        <div class="center">
          <h2>flexbox解决方案</h2>
        </div>
        <div class="right"></div>
</body>
复制代码

给所有HTML加上flax  然后给中间的加flax=1就行了 没有特别写的呢 默认都是0

第四种：表格布局。

解决思路就是给三个块加一个总width：100%  然后左右各300px 中间就是剩下的也是自适应 

 

第五种 网格布局 这个我也不是很熟悉 

 

?
1
2
3
4
width:100%;
        display: grid;
        grid-template-rows: 100px;
        grid-template-columns: 300px auto 300px;

　　貌似这样加上所有块的css就行了

 

总结一下：第一种第二种有各种缺憾 flax布局就是用来解决他们俩的缺陷的 但是flax比较新 我查了一下 兼容到IE10 也是一种遗憾吧

第四种 表格布局大家都在摒弃  但是我用的挺顺手的 

第五种：网格布局 感觉很简便 但是不熟悉 刚刚查的 

大家还有什么好方法 或我哪里说的不对的请斧正

posted @   奔跑的肥皂  阅读(496)  评论(1)  编辑  收藏  举报
编辑推荐：
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
· 一次Java后端服务间歇性响应慢的问题排查记录
· dotnet 源代码生成器分析器入门
阅读排行：
· 互联网不景气了那就玩玩嵌入式吧，用纯.NET开发并制作一个智能桌面机器人（四）：结合BotSharp
· Vite CVE-2025-30208 安全漏洞
· 《HelloGitHub》第 108 期
· MQ 如何保证数据一致性？
· 一个基于 .NET 开源免费的异地组网和内网穿透工具
点击右上角即可分享
微信分享提示
AI原生IDE