下面主要是针对三栏布局进行介绍:常见的三栏布局有,流体布局、圣杯布局、双飞翼布局、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>
使用起来极其方便

技术
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信