1.流体布局
流体布局是网页缩小和放大时网页布局会随着浏览器的大小而改变。
两边的宽度是固定的,中间的宽度是可以根据屏幕的大小进行改变的
思路: 给左右两边的盒子设置固定的宽高并设置左右浮动,中间盒子通过设置margin-left和margin-right(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>流体布局</title>
<style>
.left{
width: 150px;
height: 50px;
float: left;
background: red;
}
.right{
width: 150px;
height: 50px;
float: right;
background: blue;
}
.center{
height: 50px;
margin-left:150px ;
margin-right:150px ;
background: green;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">1</div>
<div class="right">3</div>
<div class="center">2</div>
</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>圣杯布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.center{
padding: 0 200px;
}
.middle,.left,.right{
float: left;
height: 50px;
}
.middle{
width: 100%;
background: pink;
}
.left,.right{
width: 200px;
}
.left{
background: red;
margin-left: -100%;
position: relative;
left: 200px;
}
/*为什么要使用定位
因为center添加了padding,意味着盒子宽度增加了,原来设置左右盒子的位置也就发生了变化,设置相对定位,偏移padding左右的值就可以在视觉上实现相应的功能 */
.right{
background: green;
margin-left: -200px;
position: relative;
left: 200px;
}
</style>
</head>
<body>
<div class="center"><div class="middle">中间</div></div>
<div class="left">左边</div>
<div class="right">右边</div>
</body>
</html>
结果
双飞翼布局
双飞翼布局是淘宝提出的,是针对圣杯布局的一个优化方案(使用了定位).解决方法就是在center中在添加一个一个inner盒子,并为其设置margin-left和margin-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>双飞翼布局</title>
<style>
*{
margin: 0;
padding: 0;
}
.center{
width: 100%;
background: pink;
}
.center,.left,.right{
float: left;
height: 50px;
}
.left,.right{
width: 200px;
}
.left{
background: red;
margin-left: -100%;
}
.right{
background: green;
margin-left: -200px;
}
.middle{
margin-left: 200px;
margin-right: 200px;
}
body{
min-width: 900px;
}
</style>
</head>
<body>
<div class="center">
<div class="middle">中间</div>
</div>
<div class="left">左边</div>
<div class="right">右边</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>等分布局</title>
<style>
.item{
float: left;
width: 25%;
height: 400px;
}
</style>
</head>
<body>
<div class="box">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: green;">3</div>
<div class="item" style="background: pink;">4</div>
</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>等分布局</title>
<style>
.box{
font-size: 0;
}
.item{
display: inline-block;
width: 25%;
height: 400px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="box">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: green;">3</div>
<div class="item" style="background: pink;">4</div>
</div>
</body>
</html>
注意:display设置元素为行内元素和行内块元素时,元素之间存在间隙问题
原因:存在间隙是由于元素标签之间留有空白字符造成的。
解决方法有两种
(1)消除元素标签之间的空白字符,把标签连在一起。
(2)在这些行内元素的父元素上设置font-size设置为0,再在行内元素上设置正常的字体显示大小
3.flex布局
主要通过flex属性实现
<!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>等分布局</title>
<style>
.box{
/* 开启弹性盒子 */
display: flex;
}
.item{
height: 400px;
/* 平分空间 */
flex: 1;
}
</style>
</head>
<body>
<div class="box">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: green;">3</div>
<div class="item" style="background: pink;">4</div>
</div>
</body>
</html>
注意:flex元素在主轴中的缩放因子与宽度
语法 flex:放大因子(0/1),缩小因子(0/1),计算宽度
补充:
order属性元素在主轴上的顺序,值越小,越靠前。默认值是0,允许为负值
place-self控制元素在交叉轴上的对齐方式,有四个值stretch伸展,start交叉轴起始始,end交叉轴终止线,center交叉轴中心
4.grid布局
主要通过template属性实现
<!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>等分布局</title>
<style>
.box{
/* 开启网格布局 */
display: grid;
/* 平分空间 */
grid-template-columns: repeat(4,1fr);
}
.item{
height: 400px;
}
</style>
</head>
<body>
<div class="box">
<div class="item" style="background: red;">1</div>
<div class="item" style="background: blue;">2</div>
<div class="item" style="background: green;">3</div>
<div class="item" style="background: pink;">4</div>
</div>
</body>
</html>