面试常见 CSS 布局方式
2019-11-09 本文已影响0人
CondorHero
前几天面试去做面试题的时候，遇见几次让手写三栏布局（两边固定，中间自适应），其中一家还让给出不止一种，在加上我对圣杯布局和双飞翼布局一直傻傻分不清楚。索性来梳理一下，下次去面试就能侃侃而谈~
开始：
一、单列布局
1. 单列等宽布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单列布局</title>
<style>
.container{
max-width: 980px;
margin: 0 auto;
}
.header{
height: 50px;
background-color: #493;
}
.main{
height: 500px;
background-color: #438;
}
.footer{
height: 30px;
background-color: #5e3;
}
</style>
</head>
<body>
<h3>单列等宽布局</h3>
<div class="container">
<div class="header">头部</div>
<div class="main">主体</div>
<div class="footer">底部</div>
</div>
</body>
</html>
2. 单列固定布局（常见的版心布局）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单列固定布局</title>
<style>
.inner{
max-width: 980px;
margin: 0 auto;
}
.header{
height: 50px;
background-color: #493;
}
.main{
height: 500px;
background-color: #438;
}
.footer{
height: 30px;
background-color: #5e3;
}
</style>
</head>
<body>
<h3>单列固定布局</h3>
<div class="header">
<div class="inner">头部</div>
</div>
<div class="main">
<div class="inner">主体</div>
</div>
<div class="footer">
<div class="inner">底部</div>
</div>
</body>
</html>
二、两列布局
两列布局采用浮动的方式一定的注意两点：
- 浮动元素要在主体内容之前
-
margin-left或margin-right的值一定要大于固定盒子宽。
1. 两列布局左侧固定右侧自适应
两列布局_左侧固定_右侧自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列布局_左侧固定_右侧自适应</title>
<style>
.left{
float: left;
width: 200px;
height: 500px;
background-color: #493;
}
.main{
height: 500px;
margin-left: 210px;
background-color: #438;
}
</style>
</head>
<body>
<h3>两列布局_左侧固定_右侧自适应</h3>
<div class="left">左侧</div><!--注意左侧一定的在主体之前-->
<div class="main">右侧主体</div>
</body>
</html>
2. 两列布局右侧固定左侧自适应
两列布局_右侧固定_左侧自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>两列布局_右侧固定_左侧自适应</title>
<style>
.right{
float: right;
width: 200px;
height: 500px;
background-color: #963;
}
.main{
height: 500px;
margin-right: 210px;
background-color: skyblue;
}
</style>
</head>
<body>
<h3>两列布局_右侧固定_左侧自适应</h3>
<div class="right">右侧</div><!--注意右侧一定的在主体之前-->
<div class="main">主体左侧</div>
</body>
</html>
两列布局的方式除了采用 float 的方式，很显然你也可以改成 position 定位的方式。
三、三列布局
最常见的三列布局要求就是左右固定中间自适应。例如下图：
三列布局_左右固定_中间自适应
具体实现方法：
1. 三栏式浮动布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局_左右固定_中间自适应</title>
<style>
.left{
float: left;
width: 300px;
height: 500px;
background-color: #971199;
}
.right{
float: right;
width: 300px;
height: 500px;
background-color: #2bbc8d;
}
.main{
margin: 0 310px;
height: 500px;
background-color: #d4f960;
}
</style>
</head>
<body>
<h3>三列布局_左右固定_中间自适应</h3>
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="main">主体</div>
</body>
</html>
上面是 float 版，下面给出 position 版：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局_左右固定_中间自适应_定位版</title>
<style>
.left{
position: absolute;
left: 0;
width: 300px;
height: 500px;
background-color: #971199;
}
.right{
position: absolute;
right: 0;
width: 300px;
height: 500px;
background-color: #2bbc8d;
}
.main{
margin: 0 310px;
height: 500px;
background-color: #d4f960;
}
</style>
</head>
<body>
<h3>三列布局_左右固定_中间自适应_定位版</h3>
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="main">主体</div>
</body>
</html>
2. 双飞翼布局
双飞翼布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
div{
height: 300px;
}
.left{
float: left;
width: 200px;
background-color: green;
margin-left: -100%;
}
.right{
float: left;
width: 200px;
background-color: blue;
margin-left: -200px;
}
.center{
float: left;
width: 100%;
background-color: yellow;
}
.center div{
background-color: #4dc7ec;
height: 100%;
margin: 0 220px;
}
</style>
</head>
<body>
<h3>双飞翼布局</h3>
<div class="center"><div></div></div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
对于上面的代码你可能会看不懂 margin-left:-100%; 和 margin-right:-200px; 的真正含义。当 center left right同时进行左浮动的时候，没有使用 margin 进行拉伸的效果是：
因为 center 盒子会撑满第一行，所以 left 和 right 盒子会在第二行排列。现在我们的目的是怎么让 left 和 right 盒子，挂在两边。当然的使用 margin 来进行拉伸了，这时候上图可以等价图下：
这时候明白 margin-left:-100%; 和 margin-right:-200px; 的意思了吧。
3. 圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style>
.wrap{
padding: 0 250px 0 200px;
}
.wrap>div{
height: 300px;
}
.left{
float: left;
width: 200px;
background-color: green;
margin-left: -100%;
position: relative;
left:-200px;
}
.right{
float: left;
width: 250px;
background-color: blue;
margin-left: -250px;
position: relative;
right: -250px;
}
.center{
float: left;
width: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<h3>双飞翼布局</h3>
<div class="wrap">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
