css中常见的布局方式

article/2025/11/5 13:53:45

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>

在这里插入图片描述

等分布局

1.float+百分比布局

<!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>

在这里插入图片描述
2.行内块+百分比布局

<!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>