2020-2-18 seo达人
一、你能学到什么？
①如何使用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
代码下载地址
记得一定要自己去实现一下