文章目录
前言
双飞翼布局与圣杯布局是PC端常见的布局方式,也是前端面试常考的题目。本文按照所写代码一步步运行,叫你看清楚其中的细节,从而更好记住他们。
提示:以下是本篇文章正文内容,下面案例可供参考
双飞翼布局手撕代码
基础布局
1、中间部分外部使用一层div进行包裹(注意这是双飞翼布局与圣杯布局在html布局上面的区别)
2、左边与右边都设置宽度,中间部分设置宽度为100%,之后可以根据页面进行响应式变化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.center{
width: 100%;
background-color: yellow;
}
.left{
width: 100px;
background-color: red;
}
.right{
width: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="center float">
<div style="margin-left: 100px;margin-right: 200px;">中间</div>
</div>
<div class="left float">左边</div>
<div class="right float">右边</div>
</body>
</html>
设置浮动
.float{
float: left;
}
由于此时中间width是100%,因此左边与右边不会浮动上去。
但是实际上是这种结构,只是中间宽度占满了:
设法让左边部分浮动上去。
聪明的你已经想到了,如果要把左边的放到屏幕左边,只需要设置margin-left,由于body的宽度是100%,margin-left相当于附近宽度,设置-100%就放到了左边。
.left{
width: 100px;
background-color: red;
margin-left: -100%;
}
设法让右边移动过去。
此时的页面结构,由于左边移过去了,右边部分顶替上来,但是由于黄色部分占据的整个部分,右边部分仍然不会出现在屏幕中。
.right{
width: 200px;
background-color: pink;
margin-left:-200px;
}
设置margin-left为宽度即可
圣杯布局手撕代码:
布局方式
<div >
<div class="center float">中间</div>
<div class="left float">左边</div>
<div class="right float">右边</div>
</div>
基础样式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.center{
width:100%;
background-color: yellow;
}
.left{
width:100px;
background-color: red;
}
.right{
width: 200px;
background-color: pink;
}
.float{
float: left;
}
</style>
</head>
<body >
<div >
<div class="center float">中间</div>
<div class="left float">左边</div>
<div class="right float">右边</div>
</div>
</body>
</html>
重要的一步!!设置父级元素的padding
.wrap{
padding-left: 100px;padding-right: 200px;min-width: 500px
}
让左边的盒子左移:
由于父级元素设置了padding,宽度相比较分别减少
在设置了margin-left,width此时已经100%之后:
.left{
width:100px;
background-color: red;
margin-left: -100%;
}
需要在left中设置一个定位,此处用relative,表示相对于元素本身:
.left{
width:100px;
background-color: red;
margin-left: -100%;
position: relative;
right: 100px;
}
让右边的盒子移过去:
此时盒子的布局:
其实此时已经是理想的布局,但是由于设置了padding-right,需要将元素“显现”出来:
.right{
width: 200px;
background-color: pink;
margin-right: -200px;
}
有的同学纳闷,为什么双飞翼布局设置margin-left,圣杯布局设置margin-right?
请看本人这篇文章。
面试常考!!!margin-left与margin-right设置负值的区别
简而言之呢,双飞翼布局由于center与right不在一个父元素下,是属于实打实的移动,需要移动到屏幕中,所以使用left。而圣杯布局是在一个父元素下,只是由于设置了padding-right,导致元素无法显现出来,此时需要将元素显现出来而已,就是上面文章所说的只是看起来移动了而已。
代码
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.center{
width: 100%;
background-color: yellow;
}
.left{
width: 100px;
background-color: red;
margin-left: -100%;
}
.right{
width: 200px;
background-color: pink;
margin-left:-200px;
}
.float{
float: left;
}
</style>
</head>
<body>
<div class="center float">
<div style="margin-left: 100px;margin-right: 200px;">中间</div>
</div>
<div class="left float">左边</div>
<div class="right float">右边</div>
</body>
</html>
圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.center{
width:100%;
background-color: yellow;
}
.left{
width:100px;
background-color: red;
margin-left: -100%;
position: relative;
right: 100px;
}
.right{
width: 200px;
background-color: pink;
margin-right: -200px;
}
.float{
float: left;
}
.wrap{
padding-left: 100px;padding-right: 200px;min-width: 500px
}
</style>
</head>
<body >
<div class="wrap">
<div class="center float">中间</div>
<div class="left float">左边</div>
<div class="right float">右边</div></div>
</body>
</html>