1. float
1.1 圣杯布局和双飞翼布局
1.1.1 作用
-
实现pc端三栏布局,中间一栏最先渲染
-
实现两边宽度固定,中间自适应
-
效果图
1.1.2 圣杯布局
-
为了让中间盒子最先渲染,所以中间盒子放在三个盒子的第一个位置
-
左中右盒子全部浮动
-
防止中间内容被两侧覆盖,一个用padding
-
两侧使用margin负值,分别放置左右两边
-
左边margin-left: 100%
-
左边平移padding宽度
-
右边盒子margin-right : -200px (设置成自身宽度,且是负值,平移到上一行)
代码分析
-
<!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>
.container {
background-color: #ddd;
padding: 0 200px;
font-size: 40px;
/* overflow: hidden; */
}
.left {
position: relative;
width: 200px;
height: 200px;
margin-left: -100%;
right: 200px;
background-color: tomato;
}
.right {
width: 200px;
height: 200px;
margin-right: -200px;
background-color: thistle;
}
.center {
width: 100%;
height: 200px;
background-color: turquoise;
}
.fl {
float: left;
}
.clearfix::after {
content: '';
display: table;
clear: both;
}
/* 兼容IE低版本 */
.clearfix {
*zoom: 1;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="center fl" >中间盒子</div>
<div class="left fl" >左</div>
<div class="right fl" >右</div>
</div>
</body>
</html>
1.1.3 双飞翼布局
-
中间盒子最先渲染
-
全部浮动
-
为了不让左右盒子覆盖中间盒子内部,中间盒子内部设置margin
-
左边盒子设置margin-left: -100%;
-
右边盒子设置 margin-left: -200px ;和圣杯布局设置不一样原因是圣杯布局的margin是放在同一个外层盒子中,而双飞翼布局是三个独立的盒子,右盒子是被挤下去的
代码分析:
<!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>
.fl {
float: left;
}
body {
font-size: 40px;
min-width: 500px;
background-color: #ddd;
}
.left {
width: 200px;
height: 200px;
background-color: tomato;
margin-left: -100%;
}
.right {
width: 200px;
height: 200px;
background-color: thistle;
margin-left: -200px;
}
.center {
width: 100%;
height: 200px;
background-color: turquoise;
}
.c-inner {
margin: 0 200px;
}
</style>
</head>
<body>
<div class="fl center" >
<div class="c-inner">中间盒子</div>
</div>
<div class="fl left" >左</div>
<div class="fl right" >右</div>
</body>
</html>