前端面试--两侧宽度固定,中间宽度自适应的三栏布局

目录

    • 1.使用浮动布局
    • 2.根据绝对定位布局
    • 3.使用flex布局(CSS3重点,也是学习的重点)
    • 4.表格布局
    • 5.网格布局
    • 总结

 前端面试–两侧宽度固定,中间宽度自适应的三栏布局
 高度固定,左右300px,中间随页面变化改变
 直接上代码,自己研究

1.使用浮动布局


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layouttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .layout article div {
            min-height: 100px;
        }

    style>
head>
<body>

    <section class="layout float">
        <style>
            /* 浮动布局 但是 html 中 middle要放到最后 */
            .layout.float .left {
                float: left;
                width: 300px;
                background: red;
            }
            .layout.float .right {
                float: right;
                width: 300px;
                background: blue;
            }
            .layout.float .center {
                background: yellow;
            }
        style>
        <article class="left-right-center">
            <div class="left">
                left
            div>
            <div class="right">
                right
            div>
            <div class="center">
                <h1>浮动解决方案h1>
            div>
        article>
    section>
body>
html>

2.根据绝对定位布局


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layouttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .layout article div {
            min-height: 100px;
        }

    style>
head>
<body>

    <section class="layout absolute">
        <style>
            .layout.absolute .left-center-right>div{
                position: absolute;
            }
            .layout.absolute .left {
                left: 0;
                width: 300px;
                background: red;
            }
            .layout.absolute .center {
                left: 300px;
                right: 300px;
                background: yellow;
             }
            .layout.absolute .right {
                right: 0;
                width: 300px;
                background: blue;
            }

        style>
        <article class="left-center-right">
            <div class="left">
                left
            div>
            <div class="right">
                right
            div>
            <div class="center">
                <h1>绝对定位解决方案h1>
            div>
        article>
    section>
body>
html>

3.使用flex布局(CSS3重点,也是学习的重点)


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layouttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .layout article div {
            min-height: 100px;
        }

    style>
head>
<body>

    <section class="layout absolute">
        <style>
            .layout.absolute .left-center-right>div{
                position: absolute;
            }
            .layout.absolute .left {
                left: 0;
                width: 300px;
                background: red;
            }
            .layout.absolute .center {
                left: 300px;
                right: 300px;
                background: yellow;
             }
            .layout.absolute .right {
                right: 0;
                width: 300px;
                background: blue;
            }

        style>
        <article class="left-center-right">
            <div class="left">
                left
            div>
            <div class="right">
                right
            div>
            <div class="center">
                <h1>绝对定位解决方案h1>
            div>
        article>
    section>
body>
html>

4.表格布局


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layouttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    style>
head>
<body>

    <section class="layout table">
        <style>
            .layout.table .left-center-right {
                display: table;
                width: 100%;
                height: 100px;
            }
            .layout.table .left-center-right>div {
                display: table-cell;
            }
            .layout.table .left {
                width: 300px;
                background: red;
            }
            .layout.table .center {
                background: yellow;
             }
            .layout.table .right {
                width: 300px;
                background: blue;
            }

        style>
        <article class="left-center-right">
            <div class="left">
                left
            div>
            <div class="center">
                <h1>table表格布局解决方案h1>
            div>
            <div class="right">
                right
            div>

        article>
    section>
body>
html>

5.网格布局


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layouttitle>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    style>
head>
<body>

    <section class="layout grid">
        <style>
            .layout.grid .left-center-right {
                display: grid;
                width: 100%;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
            }
            .layout.grid .left {
                background: red;
            }
            .layout.grid .center {
                background: yellow;
             }
            .layout.grid .right {
                background: blue;
            }

        style>
        <article class="left-center-right">
            <div class="left">
                left
            div>
            <div class="center">
                <h1>grid网格布局解决方案h1>
            div>
            <div class="right">
                right
            div>

        article>
    section>
body>
html>

总结

1.每个解决方案的优缺点?

  • 浮动:脱离文档流,处理不好,带来很多问题,
    兼容性比较好
  • 绝对定位:快捷,不容易出问题
    已经脱离文档流了,导致之后的元素都要脱离文档流
  • flex:css3中新出的,为解决上面上个问题而出现的,而且在手机端基本使用的都是flex布局
  • table布局:表格布局兼容性特别好,能轻易解决一些问题
    麻烦,操作繁琐,三栏布局当其中一个单元格的高度超出以后,剩余的也是要调整高度的
  • grid网格布局:css3新出的,代码简洁,不用在模拟环境中去做网格。

2.假如把高度去掉,不做任何改变的情况下,哪个还可以使用?

  • 把高度去掉,浮动布局、绝对定位布局、grid网格布局是不能使用的
  • flex布局和table布局还是可以使用的。**

3.真正在业务中使用那个最使用?

单栏、两栏、三栏(浮动、绝对定位、flex-box、table布局、网格布局)、
圣杯、双飞翼

三栏布局

 - 左右宽度固定,中间自适应
 - 上下高度固定,中间自适应(用于手机端)

两栏布局

  - 左宽度不变,右自适应
  - 右宽度不变,左自适应
 - 上高度不变,下自适应(用于手机端)
 - 下高度不变,上自适应(用于手机端)

你可能感兴趣的:(前端)