©2020-2024 ioDraw All rights reserved,
Privacy Policy
下面主要是针对三栏布局进行介绍：常见的三栏布局有，流体布局、圣杯布局、双飞翼布局、flex布局、绝对定位布局、网格布局
流体布局
两边的宽度是固定的，中间的宽度是可以根据屏幕的大小进行改变的。实现的关键点是，左边还有右边的元素分别给他们设置浮动，即左边设置成左浮动，右边是右浮动，并且要设置成固定的宽高；中间的主要模块，使用margin-left还有margin-right进行设置（设置的值为到父元素两侧的距离，这里指的就是到container这个父元素边距的距离）
.left { float: left; width: 100px; height: 200px; background: red; } .right {
float: right; width: 200px; height: 200px; background: blue; } .main {
margin-left: 120px; margin-right: 220px; height: 200px; background: green; }
<div class="container"> <div class="left"></div> <div class="right"></div> <div
class="main"></div> </div>
圣杯布局
跟双飞翼布局很像，有一些细节上的区别，相对于双飞翼布局来说，HTML 结构相对简单，但是样式定义就稍微复杂，也是优先加载内容主体
实现的效果：两侧的宽度是固定的，中间Main的宽度会随着屏幕的宽度进行变化
实现步骤
*
把 left 放上去，由于浮动的关系，给 left 设置margin-left: -100%即可使左侧栏浮动到 center 上面，并位于 center
左侧之上。
*
同样为 right 设置margin-left: -200px，这里的长度等于 right 的长度
*
这时 center 的两侧被 left 和 right 覆盖了，因此给 container设置padding: 0 200px
*
由于 left 和 right 也同时往中间缩，因此给 left 和 right 分别设置left: -200px; right:
-200px，往两侧分别偏移自身的宽度去覆盖掉 contaniner 使用padding后的空白位置。
.container { /* 设置为bfc的标准 */ overflow: hidden; padding: 0 200px; } .container
> div { position: relative; /* 给div设置成浮动，这样它的子元素也就是浮动了 */ float: left; height:
100px; } .main { width: 100%; background-color: red; } .left { width: 200px;
background-color: green; /* 表示的意思是除了父元素的padding区域之外的所有的宽度 */ margin-left: -100%;
/* 因为之前设置了padding，所有left元素会往中间缩，所以要设置一个left的负值 */ left: -200px; } .right { width
: 200px; background-color: blue; /* 要是不设置-200这个值得话，就会跑到下面的一行去。因为之前设置了一个padding
200px的值，所以要设置 -200回去，然后它的属性是float：left*/ margin-left: -200px; /*
表示的意思是元素的最右边相对于父元素的除了padding的区域，距离的多少px（正值）， 超过那根padding的界限的多少px*/ right: -200px
; } <div class="container"> <div class="main"></div> <div class="left"></div>
<div class="right"></div> </div>
区分margin-left与left
一、在有定位声明的情况下：即position:absolute,relative,fixed这几种情况下
1>只有margin-left：这样子position的声明没有任何作用，因为即使声明了，也得靠left,top来调整位置，如果没有left等，则position失效，元素位置仍为其该在的位置，margin-left还是相对于其父元素的距离
2>只有left等：正常情况
3>同时有margin-left和left：这种情况下，定位是有作用的，在定位完成后margin-left再起作用，即margin-left和left是可以叠加的
二、在无定位声明或position:static的情况下
left等的定义无效，margin-left有效
双飞翼布局
利用的是浮动元素 margin 负值的应用。主体内容可以优先加载，HTML 代码结构稍微复杂点。
实现步骤
* 把 left 放上去，由于浮动的关系，给 left 设置margin-left: -100%即可使左侧栏浮动到 center 上面，并位于
center 左侧之上。
* 同样为 right 设置margin-left: -200px，这里的长度等于 right 的长度
* 给 main 设置margin: 0 200px，同时设置overflow: hidden使其成为一个BFC .container { overflow
: hidden; } .container > div { position: relative; float: left; height: 100px; }
.center { width: 100%; background-color: red; } .left { width: 200px;
background-color: green; margin-left: -100%; } .right { width: 200px;
background-color: blue; margin-left: -200px; } .main { height: 100%; margin: 0
200px; background-color: rosybrown; overflow: hidden; } <div class="container">
<!-- 优先渲染 --> <div class="center"> <div class="main"> center </div> </div> <div
class="left"> left </div> <div class="right"> right </div> </div>
flex布局
实现步骤
* 给 container 设置为一个 flex 容器display: flex
* center 的宽度设置为width: 100%，left 和 right 设置为width: 200px
* 为了不让 left 和 right 收缩，给它们设置flex-shrink: 0
* 使用order属性给三个部分的 DOM 结构进行排序：left：order: 1，center：order: 2，right：order: 3
.container { display: flex; } .center { background-color: red; width: 100%;
order: 2; } .left { background-color: green; width: 200px; flex-shrink: 0; order
: 1; } .right { background-color: blue; width: 200px; flex-shrink: 0; order: 3;
} <body> <div class="container"> <!-- 优先渲染 --> <div class="center"> center
</div> <div class="left"> left </div> <div class="right"> right </div> </div>
</body>
极其灵活
绝对定位布局
实现步骤
* 给 container 设置position: relative和overflow:
hidden，因为绝对定位的元素的参照物为第一个postion不为static的祖先元素。
* left 向左浮动，right 向右浮动。
* center 使用绝对定位，通过设置left和right并把两边撑开。
* center 设置top: 0和bottom: 0使其高度撑开。 .center { position: absolute; left: 200px;
right: 200px; top: 0; bottom: 0; } <body> <div class="container"> <!-- 优先渲染 -->
<div class="center"> center </div> <div class="left"> left </div> <div class=
"right"> right </div> </div> </body>
缺点是依赖于left 和 right 的高度，如果两边栏的高度不够，中间的内容区域的高度也会被压缩。
网格布局
实现步骤
* 给 container 设置为display: grid
* 设置三栏的高度：grid-template-rows: 100px
* 设置三栏的宽度，中间自适应，两边固定：grid-template-columns: 200px auto 200px; .container {
display: grid; width: 100%; grid-template-rows: 100px; grid-template-columns:
200px auto 200px; } <body> <div class="container"> <div class="left"> left
</div> <!-- 这时的center要放在中间 --> <div class="center"> center </div> <div class=
"right"> right </div> </div> </body>
使用起来极其方便