前端知识整理-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 中间就是剩下的也是自适应 

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

  width:100%;
          display: grid;
          grid-template-rows: 100px;
          grid-template-columns: 300px auto 300px;

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

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

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

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

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

猜你喜欢

转载自www.cnblogs.com/dash-soap/p/10013720.html