CSS布局基础——(三栏布局)
前言
大家总是听到双飞翼布局和圣杯布局...也不知道是谁取的名字,我就叫三栏布局吧。虽然他们有些细微的区别,但本质上都是实现一个三栏布局,即左右两栏固定,中间自适应。
实现方案
网上随便一搜,全是实现方案,少到两三种,多到七八种。各种方法都有优缺点,但我觉得比较实用的方法主要就那三四种,因为很多方法其实是被淘汰的或者说太麻烦(如表格布局)。
- 浮动方案
- 绝对定位方案
- flex布局方案
- 网格布局(本章不讲)
方案一:浮动方案
实现思路:
先将左右两栏进行浮动,左边栏向左浮动,右边栏向右浮动就能固定在两边。但是要注意一点,这种方法要将中间栏放在最后,因为如果将中间栏放在中间,并且没有对自身进行浮动的话,会占据文档中的位置,导致右边栏并不能完全和左边栏平齐。
HTML:
<!-- 三栏布局 浮动定位--> <div class="layout"> <header>头部</header> <main> <div class="left">左边栏</div> <div class="right">右边栏</div> <div class="center">中间栏</div> </main> <footer>底部</footer> </div> <!-- 三栏布局 浮动定位-->
SCSS:
//浮动布局 .layout { color:white; text-align: center; height: 100%; overflow: hidden; header,footer{ width: 100%; height: 70px; background: rgb(202,132,2); } footer { position: absolute; bottom: 0; } main { width: 100%; height: 100%; background: red; .left,.right { width: 300px; height: 100%; background: rgb(14, 214, 171); } .left { float:left; } .right{ float:right; } .center { height:100%; background: rgb(26, 26, 122); } } }
效果:
缺点:
浮动元素会脱离文档流,如果在<main>
的内部还有其他元素,有可能会因为父元素的高度塌陷而导致问题。所以要么给父元素设置高度,要么就要清除浮动了。
方案二:绝对定位方案
实现思路:
将左右两栏进行绝对定位,固定在左右两边,中间栏通过左右margin距离来适应宽度。同样,这种方法要注意中间栏在HTML结构中的位置,如果中间栏在中间,那么中间栏也要进行绝对定位,如果在最后面则不需要进行绝对定位。
HTML:
<!-- 三栏布局 绝对定位--> <div class="layout"> <header>绝对定位方案</header> <main> <div class="left">左边栏</div> <div class="right">右边栏</div> <div class="center">中间栏</div> </main> <footer>底部</footer> </div> <!-- 三栏布局 绝对定位-->
SCSS:
// 绝对定位布局 .layout { color:white; text-align: center; height: 100%; overflow: hidden; header,footer{ width: 100%; height: 60px; background: rgb(202,132,2); } footer { position: absolute; bottom: 0; } main { width: 100%; height: 100%; background: red; position: relative; .left,.right{ position: absolute; width: 300px; height: 100%; background: rgba(100, 96, 87,0.5); } .left { left:0 } .right { right:0; //top:0; } .center { height: 100%; margin:auto 300px; left:0; right:0; background: blue; } } }
效果:
缺点:
绝对定位同样会脱离文档流,如果其他元素位置有要求的话,需要继续设置定位。
方案三:Flex方案
实现思路:
弹性布局十分简单,给最外层的父级元素设置为弹性盒子,然后设置两端对齐,中间栏的宽度设为100%即可。
HTML:
<!-- 三栏布局 flex布局--> <div class="layout"> <header>flex方案</header> <main> <div class="left">左边栏</div> <div class="center">中间栏</div> <div class="right">右边栏</div> </main> <footer>底部</footer> </div> <!-- 三栏布局 flex布局-->
SCSS:
//flex布局 .layout { color:white; text-align: center; height: 100%; overflow: hidden; header,footer{ width: 100%; height: 60px; background: rgb(202,132,2); text-align: center; } footer { position: absolute; bottom: 0; } main { width: 100%; height: 100%; background: red; display:flex; justify-content: space-between; .left,.right { width: 300px; height: 100%; background: rgb(18, 157, 167); } .center { width: 100%; height:100%; background: blue; } } }
效果:
缺点:
flex是CSS3才有的,浏览器兼容性最低到IE8。
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18