关于前端:前端面试题页面布局

46次阅读

共计 2474 个字符，预计需要花费 7 分钟才能阅读完成。

题目：
假如高度已知，写出三栏布局，其中左右两栏各为 300px, 两头宽度自适应。

根底代码如下

<style>
      * {
        padding: 0;
        margin: 0;
      }
      .layout {
        margin: 20px 0;
        min-height: 200px;
      }
      .layout div {
        min-height: 200px;/* 已知高度 */
        background: #ccf;
      }
      .layout .left {
        width: 300px; /* 左栏宽度 300px*/
        background: #ffc;
      }
      .layout .right {
        width: 300px; /* 右栏宽度 300px*/
        background: #cfc;
      }
</style>
<body>
    <!-- 浮动解决方案 -->
    <section class="layout float">
      <div class="left"></div>
      <div class="right"></div>
      <!-- 留神三个模块的程序，对布局有影响 -->
      <div class="center">float</div>
    </section>
    <!--flex 盒模型解决方案 -->
    <section class="layout flex">
      <div class="left"></div>
      <div class="center">flex</div>
      <div class="right"></div>
    </section>
    <!--position 定位解决方案 -->
    <section class="layout position">
      <div class="left"></div>
      <div class="center">position</div>
      <div class="right"></div>
    </section>
    <!--table 布局解决方案 -->
    <section class="layout table">
      <div class="left"></div>
      <div class="center">table</div>
      <div class="right"></div>
    </section>
    <!-- 栅格布局解决方案 -->
    <section class="layout grid">
      <div class="left"></div>
      <div class="center">grid</div>
      <div class="right"></div>
    </section>
  </body>

一、浮动 float 解决方案

<style>
      .float .left {
        /*1、设置右边栏往左浮动 */
        float: left;
      }
      .float .right {
       /*2、设置左边栏往右浮动 */
        float: right;
      }
      .float .center {
        /*3、因左右两栏浮动后脱离了文档流，此时两头栏的宽度应该为 100%，设置 margin 可让两头模块宽度自适应 */
        margin: 0 300px; 
      }
</style>

长处：兼容性好

毛病：会带来高度塌陷、影响四周元素布局等问题，须要革除浮动

革除浮动的办法：革除浮动的原理次要是开启该元素的 BFC(块级格式化环境)-BFC 的特点之一是：计算 BFC 的高度时，浮动元素会参加计算。开启元素 BFC 的办法有
1. 设置该元素的 float 不为 none（可为 left/right）2. 设置该元素的 position 不为 static 和 relative(可为 fixed/absolute)
3. 设置该元素的 overflow 不为 visible(可为 hidden/auto)
4. 设置该元素的 display 为 inline-box，table(与 table 相干的几个值，比方 table-cell)

个别咱们应用 css 中的 clear 属性革除浮动
.clearfix::before,
.clearfix::after{
    content:  '';
    display: table;
    clear: both;
}

二、position 定位解决方案

<style>
      .position {
        /*1、设置父元素 position 为 relative*/
        position: relative;
      }
      .position div {
        /*2、设置三个子元素为相对定位 */
        position: absolute;
      }
      .position .left {
        /*3、设置右边栏的 left 和 top 值为 0 */
        left: 0;
        top: 0;
      }
      .position .center {
        /*4、两头栏通过设置 left 和 right 值实现宽度自适应 */
        left: 300px; 
        right: 300px;
      }
      .position .right {
        /*5、设置左边栏的 right 和 top 值为 0 */
        right: 0;
        top: 0;
      }
</style>

长处：简便
毛病：设置相对定位的元素会脱离文档流，对子元素以及四周元素的布局影响较大。

三、flex 盒模型解决方案

<style>
      .flex {
        /*1、设置父元素的 display 属性为 flex*/
        display: flex;
      }
      .flex .center {
        /*2、设置两头栏的 flex 属性值为 1 */
        flex: 1;
      }
</style>

长处：为布局而生的属性，解决了 flex 和 position 计划的弊病，且挪动端支持性好
毛病：IE8 及以下不反对

四、table 布局解决方案

<style>
      .table {
        /*1、设置父元素的 display 为 table, 并将 width 设置为 100%*/
        display: table;
        width: 100%;
      }
      .table div {
        /*2、子元素设置 display 属性值为 table-cell*/
        display: table-cell;
      }
</style>

长处：兼容性好
毛病：三个元素的高度会与当中高度最大的保持一致，且无奈批改。

五、grid 栅格布局解决方案

<style>
      .grid {
        /*1、将父元素的 display 设置为 grid*/
        display: grid;
        width: 100%;
        /*2、设置行 */
        grid-template-rows: 200px;
        /*3、设置列 */
        grid-template-columns: 300px auto 300px;
      }
</style>

长处：最新 css 标准，简洁

正文完