1. 什么是三栏布局
常见的一种页面布局方式,将页面分为左栏、中栏和右栏
左右两侧的盒子宽度固定,中间的盒子会随屏幕自适应
一般中间放主体内容,左右两边放辅助内容
2. 如何实现三栏布局
2.1 弹性布局
将最外层盒子设为弹性布局,左右两边的盒子固定宽度200px
将中间的盒子flex
设为1
这样中间盒子的宽度就能一直得到全部宽度减去左右盒子的宽度,这个宽度会随着窗口的大小而变化
<style> *{ margin: 0; padding: 0; } p{ height: 200px; } .container{ display: flex; } .left,.right{ width: 200px; background: #66a4bd; } .middle{ flex: 1; background: gray; } </style> <p class="9f9d-35f3-0bc8-ea68 container"> <p class="35f3-0bc8-ea68-7412 left">left</p> <p class="0bc8-ea68-7412-6b48 middle">middle</p> <p class="ea68-7412-6b48-8e8c right">right</p> </p>
缺点:先加载左边容器的,左右两边往往是辅助内容,这样用户体验不好
为了优化这个问题,就出现了经典的 圣杯 和 双飞翼 布局,它们的目的就是为了在HTML结构上,中间栏在最前面保证了最先渲染中间提升性能
2.2 grid布局
左右两边的宽度固定,将剩余的空间给中间的主体部分
要用到grid-template-columns
:定义网格的列大小和数量
<style> .wrap { height: 200px; display: grid; grid-template-columns: 200px 1fr 200px; } .left { width: 200px; height: 100%; background-color: aqua; } .content { width: 100%; height: 100%; background-color: cadetblue; flex: 1; } .right { width: 200px; height: 100%; background-color: bisque; } </style> <p class="b0cc-f61c-5275-d323 wrap"> <p class="f61c-5275-d323-4665 left">left</p> <p class="5275-d323-4665-c656 content">content</p> <p class="0750-7c5b-e40f-6204 right">right</p> </p>
2.3 圣杯布局
先加载主体内容,增加用户体验
实现原理: float
+ margin
负值 + position: relative
要保证中间栏最先加载,那就要把middle容器写在前面
<body> <p class="f2d0-9f9d-35f3-0bc8 container"> <p class="9f9d-35f3-0bc8-ea68 middle">middle</p> <p class="35f3-0bc8-ea68-7412 left">left</p> <p class="0bc8-ea68-7412-6b48 right">right</p> </p> </body>
给父容器添加`padding:0 200px,腾开位置
middle中间容器设置width:100%
,此时的宽度继承了父容器的100%
并给三个子容器都设置float: left
,都向左浮动,去到同一行
页面效果:第一行位置放不下,左右两个容器被挤到了第二行,按道理来说它们应该是在第一行两块红色区域位置的
给左右容器相对定位,让它们相对自己原本文档流的位置进行定位
.left{ width: 200px; background: #76d1ea; position: relative; margin-left: -100%; //向左挪动父容器宽度的100% left: -200px; //再向左挪动自身的200宽度 }
此时right
接替了left
原本的位置,同理,这时候只需要给right
设置:margin-right: -200px;
,就可以实现三栏布局了
有一个问题就是:
- 有一个最小宽度,当页面小于最小宽度时布局就会乱掉
- 由于设置了相对定位,所以当left原来的位置和right的位置产生重叠时,由于浮动的原因一行放不下就会换行
- 所以布局就被打乱了,使用双飞翼布局就可以避免这个问题
<style> *{ margin: 0; padding: 0; } .container{ height: 100px; padding: 0 200px; } .middle, .left, .right{ height: 100%; float: left; } .middle{ width: 100%; background: gray; } .left{ width: 200px; background: #76d1ea; position: relative; margin-left: -100%; left: -200px; } .right{ width: 200px; background: #76d1ea; position: relative; margin-right: -200px; } </style> <p class="f61c-5275-d323-4665 container"> <p class="5275-d323-4665-c656 middle">middle</p> <p class="0750-7c5b-e40f-6204 left">left</p> <p class="7c5b-e40f-6204-f2d0 right">right</p> </p>
2.4 双飞翼布局
先把HTML结构稍微改造一下,在middle容器里面多用了个inner
容器
<p class="f2d0-9f9d-35f3-0bc8 container"> <p class="9f9d-35f3-0bc8-ea68 middle"> <p class="35f3-0bc8-ea68-7412 inner">middle</p> </p> <p class="0bc8-ea68-7412-6b48 left">left</p> <p class="ea68-7412-6b48-8e8c right">right</p> </p>
已经设置了middle的width:100%
,这时候我们只需要设置inner
容器为padding:0 200px
,我们要的效果同样是把左右两个容器摆放到对应的红框位置
left、middle、right
同样使用浮动
left设置margin-left:-100%
(父容器的整个宽度)
right设置margin-left:-200px
这样便实现了三栏布局的效果,连定位都不使用,且当页面过小时,布局不会乱
<style> *{ margin: 0; padding: 0; } .container{ height: 100px; } .middle, .left, .right{ float: left; height: 100%; } .middle{ width: 100%; background: gray; } .inner{ height: 100%; padding: 0 200px; } .left{ width: 200px; background: pink; margin-left: -100%; } .right{ width: 200px; background: pink; margin-left: -200px; } </style> <p class="8e8c-b0cc-f61c-5275 container"> <p class="b0cc-f61c-5275-d323 middle"> <p class="f61c-5275-d323-4665 inner">middle</p> </p> <p class="5275-d323-4665-c656 left">left</p> <p class="0750-7c5b-e40f-6204 right">right</p> </p>
两个布局结构上不同:
相同:让三列浮动,通过负外边距形成三列布局
不同:在于如何处理中间主列的位置
圣杯布局:利用父容器的左、右内边距 + 两个列的相对定位
双飞翼布局:把主列嵌套在一个新的父级块中,并利用主列的左、右外边距进行布局调整
以上就是CSS实现三栏布局的四种方法的详细内容,更多关于CSS三栏布局的资料请关注酷瑞百科其它相关文章!