CSS简单实现圣杯布局和双飞翼布局
程序员文章站
2022-04-28 08:04:17
...
一、你能学到什么?
①如何使用css变量 ②实现圣杯布局和双飞翼的简单思路 ③了解浮动和margin的特性
css变量设置(两个布局都有的部分)
:root{
/* 左边栏宽度 */
--lw:300px;
/*负左边栏宽度*/
--lwf:-300px;
/* 右边栏宽度 */
--rw:400px;
/*负左边栏宽度*/
--rwf:-400px;
/* 高度 */
--height:300px;
}
二、圣杯布局的html和css代码
- html部分
<div class="holyGrail">
<div class="hg_main">main</div>
<div class="hg_left">left</div>
<div class="hg_right">right</div>
</div>
- css 实现对应的四个class
.holyGrail {
height: var(--height);
/* 留出左右两栏的布局 为了字体不被覆盖*/
padding-left: var(--lw);
padding-right: var(--rw);
}
.hg_main{
width:100%;
float: left;
height: var(--height);
background-color: blanchedalmond;
}
.hg_left{
position: relative;
left: var(--lwf);
float: left;
margin-left: -100%;
width:var(--lw);
height: var(--height);
background-color: blueviolet;
}
.hg_right{
float: left;
margin-right: var(--rwf);
width:var(--rw);
height: var(--height);
background-color: brown;
}
三、双飞翼布局的html和css代码
- html部分
<div class="doubleWing">
<div class="dw_main">
<div class="dw_con">main</div>
</div>
<div class="dw_left">left</div>
<div class="dw_right">right</div>
</div>
- css 实现对应的五个class
.doubleWing{
padding-right: var(--rw);
}
.dw_left{
float: left;
margin-left: -100%;
width:var(--lw);
height: var(--height);
background-color: blueviolet;
}
.dw_main{
width:100%;
float: left;
height: var(--height);
background-color: blanchedalmond;
}
.dw_con {
margin-left: var(--lw);
}
.dw_right{
float: left;
margin-right: var(--rwf);
width:var(--rw);
background-color: brown;
height: var(--height);
}
四、学会两个布局的注意点
圣杯布局
- 在最外边的类(holyGrail)左右要留出左栏和右栏的宽度(使用padding-left,padding-right)
- 中间的div.hg_main放在最上面,优先渲染,中间div自适应,width为100%
- 左中右栏的div都设置浮动,左栏通过margin-left:-100%移动到和中间的div同一起点,然后通过position: relative;
left: -(左栏的宽度);会移动到最外层div的左内边距的区域(中间div的左边) - 右栏可以通过margin-right:-(右栏的宽度);移动到最外层div的右内边距的区域(中间div的右边)
双飞翼布局
- 在中栏的div再加一个div,设置margin-left:左栏的宽度,这样可以省略左栏的div使用postion和left的属性移动
- 最外层的div可以不用预留左栏的位置了
五、两个布局的对比的优缺点
布局 | 优点 | 缺点 |
---|---|---|
圣杯 | 无多余dom | 当中间的宽度小于左右的宽度时,结构混乱 |
双飞翼 | 可以支持各种宽度,通用性强较强 | 需要多加一层dom |
代码下载地址
记得一定要自己去实现一下
感谢
如果感觉对您的学习工作有帮助,请将它分享给需要的人,或者点赞鼓励一下,感谢支持
你可以加个收藏,我还会不断更新。。。
上一篇: vue.js自学(D6)