常见的面试问题:【CSS】已知高度,写出三栏布局

王小匠

问题:

已知高度,写出三栏布局,其中左右两栏宽度各位200px,中间自适应
问题

回答:效果示例

解决方案(1)浮动;(2)绝对定位;(3)弹性布局;(4)表格布局;(5)网格布局。

拓展问题:

(1)每个解决方案的优缺点
(2)他们之间的比较,假设高度去掉,那种方法还能适用或者不适用
(3)解决方案的兼容性,哪个更适用在实际项目中

拓展回答:

(1)
A:缺点:浮动脱离文档流,所以使用的时候要清除浮动;优点:兼容性比较好
B:缺点:绝对定位布局脱离文档,它的子元素也会脱离文档流;优点:使用快捷,不容易出现问题,兼容性也比较好
C:弹性布局是为了解决上述问题出现的,比较完美的一个
D:表格布局比较繁琐,不利于SEO优化;表格布局兼容性比较好,IE8不支持flex,但支持表格。当其中的一个单元格超出的,两侧单元格也会同时增高,根据场景决定。
E:网格布局作为一个新技术,可以实现很多复杂的布局,代码量简化很多。
(2)
flex布局和表格布局。浮动布局因为左侧有遮挡,所以没有超出的文本会在中间出现,超出部分没有遮挡会再左侧出现。

变通:

三栏布局 两栏布局
左右宽度固定,中间自适应 左宽度固定,右自适应
上下高度固定,中间自适应 右宽度固定,左自适应
/ 上高度固定,下自适应
/ 下高度固定,上自适应

公共样式:

设置大小盒子的高度为 100px,左右(leftright)的 div 宽度固定为 200px, 并分别给三个盒子设置不同颜色用来区分。

* {
    padding: 0;
    margin: 0;
}
.layout {
    height: 100px;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: hidden;
}
.layout div {
    height: 100px;
}
.layout .left {
    width: 200px;
    background-color: blue;
}
.layout .center {
    background-color: yellow;
}
.layout .right { 
    width: 200px;
    background-color: red;
}

(1)方案一:浮动

centerdiv 需要放到后面(其余方案都不需要更改 Html 顺序),对左右 div 使用 float:leftfloat:rightfloat 使左右两个元素脱离文档流,中间的正常文档流中。

.float .left {
    float: left;
}   
.float .right {
    float: right;
} 
<section class="layout">
    <article class="float">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </article>
</section>

(2)方案二:绝对定位

left、right 和 centerdiv 都设置 absolute 脱离文档流,给 centerdiv 设置左右两边距离 200px (即左右两边盒子的实际宽度)。

.absolute div {
    position: absolute;
}
.absolute .left {
    left: 0;
}
.absolute .center {
    left: 200px;
    right: 200px;
}
.absolute .right {
    right: 0;
}
<section class="layout">
    <article class="absolute">
        <div class="left"></div>
        <div class="center">absolute</div>
        <div class="right"></div>
    </article>
</section>

(3)方案三:弹性布局

设置大盒子为 display: flex;,给 centerdiv 设置 flex: 1,除去左右盒子的宽度外剩余宽度是 center 的宽度。

.flexbox {
    display: flex;
}
.center {
    flex: 1;
}

(4)方案四:表格布局

设置大盒子为 display: table;,将 left、right 和 centerdiv 都设置 display: table-cell

.table {
    width: 100%;
    display: table;
}
.table div{
    display: table-cell;
}

(5)方案五:网格布局

就给大盒子设置属性。

.grid {
    width: 100%;
    display: grid;
    grid-template-rows: 100px;
    grid-template-columns: 200px auto 200px;
} 

更多文章分享https://www.artroy.com.cn/

阅读 1.1k

不断成长的码农
相互交流交流
211 声望
3 粉丝
0 条评论
你知道吗?

211 声望
3 粉丝
宣传栏