本篇为学习网络资料后做的笔记。资料来源(原文第 6 点):https://juejin.im/post/6844903828278493197
目录:
1. flex 方式
2. 绝对定位方式
3. 浮动方式
4. 双飞翼布局、圣杯布局
实现方式:在父盒子中设置为伸缩布局,让行级标签 div 从左往右排列,主轴方向默认为从左往右,设置主轴对齐方式为居中对齐2。给左边栏跟右边栏设置宽度,给中间蓝设置属性 flex 值为1,那么,中间栏的宽度=整个页面的宽度-左边栏宽度-右边栏宽度 (flex 复合属性相关笔记:https://www.cnblogs.com/xiaoxuStudy/p/13410802.html)。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box{ display: flex; justify-content: center; height: 200px; } .left{ width: 200px; background-color: red; height: 100%; } .main{ background-color: yellow; flex: 1; } .right{ width: 200px; background-color: green; } </style> </head> <body> <div class="box"> <div class="left">左边栏</div> <div class="main">中间栏</div> <div class="right">右边栏</div> </div> </body> </html>
如果缩小浏览器窗口宽度到一定程度,会变成这样:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box{ position: relative; height: 200px; } .left{ width: 200px; height: 100%; background-color: red; left: 0; position: absolute; } .main{ background-color: yellow; height: 100%; left: 200px; right: 200px; position: absolute; } .right{ width: 200px; height: 100%; background-color: green; right: 0; position: absolute; } </style> </head> <body> <div class="box"> <div class="left">左边栏</div> <div class="main">中间栏</div> <div class="right">右边栏</div> </div> </body> </html>
如果缩小浏览器窗口宽度到一定程度,会变成这样:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .box{ height: 200px; } .left, .right{ width: 200px; height: 100%; background-color: red; } .left{ float: left; } .main{ background-color: yellow; height: 100%; } .right{ float: right; } </style> </head> <body> <div class="box"> <div class="left">左边栏</div> <div class="right">右边栏</div> <div class="main">中间栏</div> </div> </body> </html>
如果缩小浏览器窗口宽度到一定程度,会变成这样:
单独写在另一篇笔记中了。