前端自适应布局方式--float、flex、负margin、绝对定位

两三星火

已于 2022-09-09 15:34:46 修改

阅读量597

点赞数

分类专栏：前端web 文章标签：前端 html css

于 2022-09-09 10:49:29 首次发布

本文链接：https://blog.csdn.net/qq_45633813/article/details/126777745

版权

前端web 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

目的

web应⽤有不同设备尺⼨和分辨率，这时需要响应式界⾯设计来满⾜复杂的布局需求。

一、使用float浮动

自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，float使左右两个元素脱离文档流，中间元素正常在正常文档流中，使用margin指定左右外边距对其进行一个定位。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      *{
        padding: 0;
        margin: 0;
      }
      #container{
        width: 100%;
        margin: 0 auto;
      }
      #left{
        width: 200px;
        height: 600px;
        float:left;
        background-color: #fffc00;
      }
      #right{
        width: 100px;
        height: 600px;
        float:right;
        background-color:orange;
      }
      #main{
        height: 600px;
        margin-left: 0 100px 0 200px; 
        /* 上右下左 */
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <!-- 方法一 ：使用float浮动
    自身浮动法的原理就是使用对左右使用分别使用float:left和float:right，
    float使左右两个元素脱离文档流，中间元素正常在正常文档流中，
    使用margin指定左右外边距对其进行一个定位。 -->
    <div id="container">
      <div id="left">left 200px</div>
      <div id="right">right 100px</div>
      <div id="main">main 自适应</div>
    </div>
  </body>
</html>

使用float浮动

二、使用绝对定位absolute

绝对定位法原理是将左右两边使用absolute定位，因为absolute绝对定位使其脱离文档流，后面的center会自然流动到他们上面，然后center使用margin属性left和right，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 方法二 ：使用绝对定位absolute
绝对定位法原理是将左右两边使用absolute定位，
因为绝对定位使其脱离文档流，后面的center会自然流动到他们上面，
然后使用margin属性，留出左右元素的宽度，既可以使中间元素自适应屏幕宽度 -->
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #container {
        width: 100%;
        margin: 0 auto;
      }
      #left {
        width: 200px;
        height: 600px;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fffc00;
      }
      #right {
        width: 100px;
        height: 600px;
        position: absolute;
        top: 0;
        right:  0;
        background-color: orange;
      }
      #main {
        height: 600px;
        position: absolute;
        left: 200px;
        right: 100px;
        top:0;        
        background-color: aqua;
      }
    </style>
    <div id="container">
      <div id="left">left 200px</div>
      <div id="right">right 100px</div>
      <div id="main">main 自适应</div>
    </div>
  </body>
</html>

在这里插入图片描述

三、使用负margin（圣杯布局）

圣杯布局是什么：
圣杯布局是两边固定宽度，中间自适应的三栏布局。
中间栏放到文档流前面，先行渲染。
目的是为了解决三栏布局。

使用圣杯布局首先需要在center元素外部包含一个div，包含div需要设float属性使其形成一个BFC (Block formatting context)直译为**“块级格式化上下文”**，它是一个独立的渲染区域。并设置宽度，并且这个宽度要和left块的margin负值margin-left: -100% 进行配合。
圣杯布局是利用父容器的左、右内边距+两个列的相对定位;

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #wrap {
        width: 100%;
        float: left;
      }
      #main {
        height: 600px;
        margin: 0 100px 0 200px;
        background-color: #03c;
      }
      #left {
        width: 200px;
        height: 600px;
        float: left;
        margin-left: -100%;
        background-color: #fffc00;
      }
      #right {
        width: 100px;
        height: 600px;
        float: left;
        margin-left: -100px;
        right: -100px;
        background-color: orange;
      }
    </style>
    <div id="wrap">
      <div id="main">main 自适应</div>
    </div>
    <div id="left">left 200px</div>
    <div id="right">right 100px</div>
  </body>
</html>

四、使用flex

container中的left、center、right依次排布即可；
给container设置弹性布局 display: flex；
left和right区域定宽，center设置 flex: 1; 即可。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      #container {
        width: 100%;
        display: flex;
      }
      #left {
        width: 200px;
        height: 600px;
        background-color: #fffc00;
      }
      #right {
        width: 100px;
        height: 600px;
        background-color: orange;
      }
      #main {
        height: 600px;
        width: auto;
        background-color: aqua;
        flex: 1;
      }
    </style>
    <div id="container">
      <div id="left">left 200px</div>
      <div id="main">main 自适应</div>
      <div id="right">right 100px</div>
    </div>
  </body>
</html>