CSS常见布局
文章目录[*]
[*]双栏布局
[*]三栏布局
[*]
[*]1、方法1 推荐使用-flex
[*]2、方法2
[*]3、方法3
[*]4、方法4
[*]5、方法5 推荐使用-grid
[*]圣杯布局
[*]双飞翼布局
[*]瀑布流布局
双栏布局
https://img-blog.csdnimg.cn/49792e0d654946e0a9dd2b6c7d7774c1.png
实现思路：
[*]使用float左浮动左边栏
[*]右边模块使用margin-left撑出内容块作展示
[*]父级元素添加BFC，防止下方元素飞到上方内容
一般思路–直接写
<!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>
</head>
<body>
</body>
</html> 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>flex弹性布局实现双栏</title>
</head>
<body>
zuo
you
</body>
</html> 三栏布局
方法汇总：
[*]左右两边使用float浮动，中间使用magin设置
[*]两边使用absolute，中间使用margin
[*]两边使用float和负margin
[*]display：table实现
[*]flex实现
[*]grid网络布局
1、方法1 推荐使用-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>
</head>
<body>
左侧
中间
右侧
</body>
</html> 2、方法2
[*]使用方法：左右两边使用float浮动，中间使用margin来设置
[*]注意：html中center在左右盒子的下面
原理：
[*]两边固定宽度中间自适应
[*]中间元素主要是通过设置margin的值来控制两边的边距
[*]宽度小于左右部分宽度之和时，右侧部分会被挤下去
[*]缺点：当是响应式设计时不能实现简单的换行（center部分是最后加载的）
<!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>
</head>
<body>
left
right
center
</body>
</html> 3、方法3
[*]使用方法：两边使用absolute，中间使用margin
原理：
[*]左右两边使用绝对定位，脱离文本流固定在两边
[*]中间占满一行，通过margin与左右两边留出10px的间距
<!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>
</head>
<body>
左边固定宽度
右边固定宽度
中间自适应
</body>
</html> 4、方法4
[*]使用方法：两边使用float和负margin
原理：
[*]中间是以哦那个双层标签，外层浮动，以便于左中右可以在一行展示
[*]左边通过使用负margin：-100%向上偏移到左侧
[*]右边通过使用margin-left：-100px；相对于自身的宽度，向上偏移到最右侧
[*]缺点：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>
</head>
<body>
中间自适应
左边固定宽度
右边固定宽度
</body>
</html> 5、方法5 推荐使用-grid
[*]使用方法：grid网格布局
[*]grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高
<!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>
</head>
<body>
左侧
中间
右侧
</body>
</html> 圣杯布局
圣杯布局的特点：
[*]上下为通栏，下通栏清浮动
[*]中间为三栏布局，子元素按中左右的顺序浮动float:left
宽度
[*]左边栏宽度固定 = 父元素的左内边距padding-left
[*]右边栏宽度固定 = 父元素的右内边距padding-right
[*]中间内容宽度 = 100%
位置
[*]左右边栏相对定位position:relative
[*]左边栏左外边距margin-left: -100%，right:宽度
[*]右边栏左外边距margin-left:-宽度，right:-宽度
注意
[*]需设置最小宽度min-width，避免视窗宽度过小，浮动错位
https://img-blog.csdnimg.cn/9f1155596881405ab2ff85c23ae1dd27.png
<!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>
</head>
<body>
header
center
left
right
footer
</body>
</html> 双飞翼布局
双飞翼布局由淘宝UED发扬，是通过浮动和定位实现三栏布局的一种方案之一
双飞翼布局的特点：
[*]上下为通栏，下通栏清浮动
[*]中间为三栏布局，子元素按中左右的顺序浮动float:left
宽度
[*]左边栏宽度固定 = 中间内容子元素左外边距margin-left
[*]右边栏宽度固定 = 中间内容子元素右外边距margin-right
[*]中间内容宽度 = 100%
位置
[*]左边栏左外边距margin-left: -100%
[*]右边栏左外边距margin-left:-宽度
https://img-blog.csdnimg.cn/3d900cd3089747b0abf4bfde6f17acd8.png
header
center-inner
left
right
footer 瀑布流布局
[*]瀑布流布局的特点：等宽分栏，每一栏的宽度肯不同
[*]css部分实现为外观布局，js辅助来实现数据加载顺序
实现方法：
[*]多列布局（分栏布局）
[*]弹性布局
多列布局：
[*]通过column-count设置栏数，column-gap设置间距
[*]设置break-inside: avoid避免元素在分栏时中断
1
2
3
4
5
6
7
8
9 弹性布局：
[*]水平：栏目间弹性布局，通过margin设置间距
[*]垂直：栏目内弹性布局，通过flex-direction: column沿垂直轴
1
2
3
4
5
6
7
8
9
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]