前端常见布局

最新推荐文章于 2024-07-25 09:24:40 发布

Garbrielle

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量107

点赞数

文章标签：前端 css css3

本文链接：https://blog.csdn.net/garbrielle/article/details/126157357

版权

两栏布局

两个div一个设置浮动
flex
定位

三栏布局

左右固定，中间自适应

浮动

原理：左右浮动，设置中间块的margin让中间宽度自适应；
缺点：主要内容无法最先加载，内容较多时影响体验

和bfc基本一致，针对center部分利用margin左右来自适应宽度

<html>
    <head>
        <style>
            .box {
                width: 100%;
                height: 400px;
            }
            .box  div{
                height: 100%;
            }
            .l {
                float: left;
                width: 100px;
                background-color: rebeccapurple;
            }
            .r {
                float: right;
                width: 100px;
                background: red;
            }
            .c {
               margin-left: 100px;
               margin-right: 100px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="l"></div>
            <div class="r"></div>
            <div class="c"></div>
        </div>
    </body>
</html>

BFC三栏布局

原理：BFC区域不会与浮动元素重叠；（左右浮动，三个bfc区域）
缺点：主要内容无法最先加载，内容较多时影响体验

<style>
            .box {
                width: 100%;
                height: 400px;
            }
            .box  div{
                height: 100%;
            }
            .l {
                float: left;
                width: 100px;
                background-color: rebeccapurple;
            }
            .r {
                float: right;
                width: 100px;
                background: red;
            }
            .c {
               overflow: hidden;
            }
        </style>

双飞翼布局

原理：给center一个容器box 宽度100% , 设置center左右margin避开侧边栏，让div整体左浮动，left的margin-left：-100%， right的margin-left设置-200px
优点：主要模块优先加载。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <style>
    html,body,.container {
      width: 100%;
      height: 100%;
      margin: 0;
    }
    .container>div {
      float: left;
      height: 100%;
    }
    .left {
      width: 200px;
      background: red;
      margin-left: -100%;
    }
    .right {
      width: 200px;
      background: blue;
      margin-left: -200px;
    }
    .box {
      width: 100%;
      background: yellow;
    }
    .center {
      height: inherit;
      margin: 0 200px;
    }
  </style>
  <!-- 三栏布局（中间先加载渲染） -->
  <body>
    <!-- 双飞翼 -->
    <div class="container">
      <div class="box">
        <div class="center"></div>
      </div>
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </body>
</html>

圣杯布局

原理：container设置一个左右padding为侧边栏大小，center最先加载，center width是100%，也就是container的content.。让div整体左浮动，left的margin-left：-100%并让left相对自身有一个left: -width， right的margin-left设置-200px,回到container第一行content中，并相对自身有一个left: -width，回到最右边。
优点：主要模块优先加载。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <style>
    html,body,.container {
      width: 100%;
      height: 100%;
      margin: 0;
    }
    .container {
      /* 摆正center位置 */
      padding: 0 200px;
      box-sizing: border-box;
    }
    .container>div {
      float: left;
      height: 100%;
    }
    .left {
      width: 200px;
      background: red;
      margin-left: -100%;
      position: relative;
      left: -200px;
    }
    .right {
      width: 200px;
      background: blue;
      margin-left: -200px;
      position: relative;
      left: 200px;
    }
    .center {
      width: 100%;
      height: inherit;
      background: yellow;
      /* margin: 0 200px; */
    }
  </style>
  <!-- 三栏布局（中间先加载渲染） -->
  <body>
    <!-- 圣杯 -->
    <div class="container">
      <div class="center"></div>
      <div class="left"></div>
      <div class="right"></div>
    </div>

  </body>
</html>

网格布局

.box {
    	display: grid;
    	/*列宽*/
       grid-template-columns: 100px auto 100px;
       /*行高*/
       grid-template-rows: 300px;
   }

<div class="box">
  	<div class="l"></div>
    <div class="c"></div>
    <div class="r"></div>
</div>

绝对定位布局

左右绝对定位，中间设置左右margin

flex

order用来控制显示顺序

.box {
                display: flex;
                width: 100%;
            }
            .c {
                flex: 1 1 auto;
                order: 1;
            }
            .l,.r {
                flex: 0 0 100px;
            }
            .l {
                order: 0;
            }
            .r {
                order: 2;
            }

table

.box {
      display: table;
      width: 100%;
  }
  .l, .r, .c {
      display: table-cell;
      height: 200px;
  }
  .l,.r {
      width: 100px;
  }