流式布局、圣杯布局、双飞翼布局你必须知道的知识!

2021-01-07 11:32发布

前言:

搞前端必须知道的布局,工作中必会用到,面试必会考到!

  

 

 

实现步骤:

 

编写DOM代码:

 

<body>
        <header>header</header>
        <div id="container">
            <div id="center">center</div>
            <div id="left">left</div>
            <div id="right">right</div>
        </div>
        <footer>footer</footer>
    </body>

 

  • 为了保证中间区域优先显示,所以将 id 为center的div优先放到前边,优先加载

  • 其中 container 容器中 包裹着 center 、 left 、right 容器

 

样式代码:

 

  • 将 center、left、right 全部浮动

  • 同时设置container宽度为100%,设置左右padding值,为了给 left 和 right 留出位置

  • 因为container浮动会导致 footer 位置异常,所以需要清除浮动

 

#container,#left,#right{
   float:left;
}
#container{
   width:100%;
 padding:0,200px;
}
footer{
   clear:both;
}

 

  • 开始调整 left 的位置,首先将其 设置 负边距 调整到和 center 相同的位置

  • 然后 通过 设置 position:relative ,在设置 right 属性,使其 到达屏幕左侧位置

  • 设置margin-left 为 负值 可以将元素往前拖动,达到 center的位置!

  • margin-left :-100%, 移动的距离 根据 父级元素的宽度计算,移动的宽度就是父级元素的宽度

 

#left{
   width:200px;
   margin-left:-100%;
   position:relative;
   right:200px;
}

 

  • 给 right 元素进行位置的赋值

  • margin-right:-200px

  • 这里 大家不要搞混,其实 left 、right、center 在一条线上,因为 container宽度 不够所有的元素都在一条直线上,因此left 和right 会被挤下来

  • 所以,想让 right 跑到屏幕右侧,只需要将其拉扯到 屏幕右侧即可,就是 margin-right:-200px对其进行位置的设置即可

 

 

#right {
    margin-right:-200px;
}

 

 

最终代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        header,
        footer {
            width: 100%;
            background-color: aqua;
        }
 
        #container {
            padding: 0 200px;
        }
 
        #center {
            height: 300px;
            width: 100%;
            float: left;
            background-color: green;
        }
 
        #left {
            height: 300px;
            width: 200px;
            float: left;
            position: relative;
            margin-left: -100%;
            right: 200px;
            background-color: yellow;
        }
 
        #right {
            height: 300px;
            width: 200px;
            float: left;
            margin-right: -200px;
            background-color: blue;
        }
 
        footer {
            clear: both;
        }
    </style>
    <body>
        <header>header</header>
        <div id="container">
            <div id="center">center</div>
            <div id="left">left</div>
            <div id="right">right</div>
        </div>
        <footer>footer</footer>
    </body>
</html>

 

双飞翼布局

 

两侧宽度固定,中间宽度自适应的“三栏布局”

 

实现步骤:

 

编写DOM代码:

 

  • 和圣杯布局不同的是,container 容器只是包裹 center 元素,且 container 容器进行浮动

  • left 和 right 都在 container 容器外部浮动

 

<body>
        <header>header</header>
        <div id="container">
            <div id="center">center</div>
        </div>
        <div id="left">left</div>
        <div id="right">right</div>
        <footer>footer</footer>
    </body>

 

样式代码:

 

  • container 、 left 、righ 都进行浮动

  • container 容器内的 center 设置 margin-left 和 margin-right 预留 左右 的空隙

  • left 元素 设置 margin-left : -100% ,将其移动到 屏幕最左侧

  • right 元素 设置 margin-left:-200px 将其移动到屏幕最右侧

<style>
        header,
        footer {
            width: 100%;
            background-color: aqua;
        }
 
        #container {
            float: left;
            width: 100%;
        }
 
        #center {
            height: 300px;
            margin: 0 200px 0;
            background-color: red;
        }
 
        #left {
            height: 300px;
            width: 200px;
            float: left;
            margin-left: -100%;
            background-color: blue;
        }
 
        #right {
            height: 300px;
            width: 200px;
            float: left;
            margin-left: -200px;
            background-color: yellow;
        }
 
        footer {
            clear: both;
        }
    </style>

最终代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        header,
        footer {
            width: 100%;
            background-color: aqua;
        }
 
        #container {
            float: left;
            width: 100%;
        }
 
        #center {
            height: 300px;
            margin: 0 200px 0;
            background-color: red;
        }
 
        #left {
            height: 300px;
            width: 200px;
            float: left;
            margin-left: -100%;
            background-color: blue;
        }
 
        #right {
            height: 300px;
            width: 200px;
            float: left;
            margin-left: -200px;
            background-color: yellow;
        }
 
        footer {
            clear: both;
        }
    </style>
    <body>
        <header>header</header>
        <div id="container">
            <div id="center">center</div>
        </div>
        <div id="left">left</div>
        <div id="right">right</div>
        <footer>footer</footer>
    </body>
</html>

flex 实现 三栏布局

 

实现结构和圣杯布局相似,但是更加简单

 

最终代码:

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <style>
        header,
        footer {
            width: 100%;
            background-color: aqua;
        }
 
        #container {
            display: flex;
        }
        #center {
            /* 默认占满整个空间 */
            flex:1; 
            height: 300px;
            background-color: red;
        }
        #left{
      /*不放大,不缩小,宽度为200px*/
            flex:0 0 200px;
      /*越小的项目越靠前*/
            order: -1;
            height: 300px;
            background-color: blue;
        }
        #right{
      /*不放大,不缩小,宽度为200px*/
            flex:0 0 200px;
            height: 300px;
            background-color: yellow;
        }
    </style>
    <body>
        <header>header</header>
        <div id="container">
            <div id="center">center</div>
            <div id="left">left</div>
            <div id="right">right</div>
        </div>
        <footer>footer</footer>
    </body>
</html>