圣杯布局和双飞翼布局的理解和区别
2020-06-30 本文已影响0人
OriX0
作用:
两种布局用于解决的问题是一样的：两边顶宽 中间自适应的三栏布局 中间栏要放在文档前面以优先渲染
区别:
让中间内容不被遮蔽的手法
- 圣杯布局：父亲元素padding腾位置
外层父元素设置padding-left & padding-right 让父元素增大
配合margin将元素定位到指定位置 再配合相对定位 和right和left属性
从而实现中间内容不被遮蔽 - 双飞翼布局:
元素margin 设置
中间内容使用margin 但是直接设置会导致布局混乱 从而让中间内容用一个元素进行包裹后再使用margin 则其不会扰乱元素
实现
圣杯布局
DOM
<body>
<main>
<header class="header">
Header
</header>
<section class="container">
<div class="center column">center</div>
<div class="left column">Left</div>
<div class="right column">Right</div>
</section>
<footer>
Footer
</footer>
</main>
</body>
样式
body {
min-width: 550px;
}
header,
footer {
height: 50px;
background-color: #666;
}
.container {
padding-left: 200px;
padding-right: 150px;
}
.column {
float: left;
height: 200px;
}
.center {
width: 100%;
background-color: skyblue;
}
.left {
width: 200px;
margin-left: -100%;
position: relative;
right: 200px;
background-color: orange;
}
.right {
width: 150px;
margin-right: -150px;
background-color: pink;
}
footer {
clear: both;
}
双飞翼布局
DOM
<body>
<main>
<header class="header">
Header
</header>
<section class="container">
<div class="wrapper column">
<div class="center ">center</div>
</div>
<div class="left column">Left</div>
<div class="right column">Right</div>
</section>
<footer>
Footer
</footer>
</main>
</body>
样式
header,
footer {
height: 100px;
background-color: #ccc;
text-align: center;
}
.wrapper {
width: 100%;
}
.column {
float: left;
height: 200px;
}
.center {
margin-left: 200px;
margin-right: 150px;
height: inherit;
background-color: skyblue;
}
.left {
width: 200px;
margin-left: -100%;
background-color: pink;
}
.right {
width: 150px;
margin-left: -150px;
background-color: orange;
}
footer {
clear: both;
}
