前言
这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战”
自我总结,仅供参考,求点赞,谢谢
!
面试常问的四种布局:两栏布局、三栏布局、圣杯布局、双飞翼布局。
两栏布局
一侧固定,一侧自适应
思路
- 浮动(float) + 外边距(margin)
- 绝对定位(float)+ 外边距(margin)
- 弹性布局(flex)
代码实现
1. 浮动或定位
<body>
<div class="left"> Left </div>
<div class="right" >Right </div>
</body>
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 500px
}
.left {
// float: left; // 1. 浮动
position:absolute; // 2. 绝对定位,父级没有定位元素,则以body定位
width: 100px;
height: 200px;
background-color: pink;
}
.right {
margin-left: 100px;
background-color: skyblue;
min-height: 200px;
}
</style>
2. 弹性布局
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 500px
display: flex; //父级元素设置 display:flex
}
.left {
width: 100px;
height: 200px;
background-color: pink;
}
.right {
flex: 1; //即 flex: grow shrink basis = 1 1 auto
background-color: skyblue;
min-height: 200px;
}
</style>
三栏布局
两边固定,中间自适应
思路
- 左右给定宽高,使用
绝对定位
,中间只给高度,用margin
隔离左右元素的宽度。 HTML结构(左右中)
,左边给定宽高左浮动
,右边给定宽高右浮动
,中间只给高度,用margin
隔离左右元素的宽度。
代码实现
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 500px
}
.box {
position: relative;
}
.left {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
background-color: pink;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 200px;
height: 200px;
background-color: pink;
}
.center {
height: 200px;
margin-left: 200px;
margin-right: 200px;
background-color: skyblue;
}
</style>
<body>
<div class="box">
<div class="left">Left</div>
<div class="right">Right</div>
<div class="center">Center</div> //中间元素写在最后面
</div>
</body>
圣杯布局
思路
-
给中左右类名 col 设置.col{float:left}
-
.footer{clear:both} 清除footer浮动
-
留出左右宽度 #content { padding-left: 200px; padding-right: 200px; } 移动到center的左端 相对定位左移200px
-
.left:{margin-left:-100%,position:relative,right:300px}
-
.right:{margin-right:-200px} 左移200px
代码实现
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 500px
}
#header {
background-color: #f1f1f1;
height: 50px;
}
#content {
height: 200px;
// 留出左右宽度 #content { padding-left: 200px; padding-right: 200px; }
// 移动到center的左端 相对定位左移200px
padding-left: 200px;
padding-right: 200px;
}
#content .center {
background-color: skyblue;
height: 100%;
width: 100%;
}
#content .left {
position: relative;
margin-left: -100%;
width: 200px;
height: 100%; //.left:{margin-left:-100%,position:relative,right:300px}
right: 200px;
background-color: pink;
}
#content .right {
margin-right: -200px; //.right:{margin-right:-200px} 左移200px
width: 200px;
height: 100%;
background-color: pink;
}
#content .col {
float: left; //设置.col{float:left}
}
#footer {
clear: both; // 清除footer浮动
height: 50px;
background-color: #f1f1f1;
}
</style>
<body>
<div id="header">Header</div>
<div id="content">
<div class="center col">Center</div> // 1. 给中左右类名 col
<div class="left col">Left</div> // 1. 给中左右类名 col
<div class="right col">Right</div> // 1. 给中左右类名 col
</div>
<div id="footer">Footer</div>
</body>
双飞翼布局
思路
以圣杯布局
为思路实现,但是center的内容被left和right覆盖了,除了要设置外围content的padding之外,
还可以考虑用margin把center拉过来; 在center中加一个内部元素center-top,设置其margin:0 200px;
代码实现
<style>
* {
margin: 0;
padding: 0;
}
body {
min-width: 500px
}
#header, #footer{
height: 50px;
width: 100%;
background-color: #f1f1f1;
}
#left, #right{
width: 200px;
height: 200px;
background-color:pink;
}
#center{
background-color: skyblue;
width: 100%;
float: left;
}
#content{
overflow: hidden;
}
#left{
float: left;
margin-left: -100%;
}
#right{
float: left;
margin-left: -200px;
}
.center-top{
margin: 0 200px;
}
</style>
<body>
<div id="header">header</div>
<div id="content">
<div id="center">
<div class="center-top">
Center
</div>
</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>