CSS常见布局方式_css布局的几种方式

作者：笔触狂放9 | 2024-07-07 15:59:39

踩

css布局的几种方式

1、盒子布局

在这里插入图片描述
border------边框
margin------外边距
padding------内边距

边框的定义：
例如：border: 1px solid black;

除了solid还有以下形式：
1
2
3
4

在这里插入图片描述

2、浮动布局

通过float属性去设置浮动布局
取值：left none(不浮动) right
注意：如果浮动取值是Left的话（左浮），会对后面的元素产生一定的影响
如果要消除这种影响（消除浮动）通过clear属性
none:默认 允许两边都可以浮动
left：不允许左边的浮动
right：不允许右边的浮动
both：不允许两侧有浮动
1
2
3
4
5
6
7
8

<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>
		.box1{
			width: 200px;
			height: 200px;
			background-color: red;
			float: left;
			clear: left;
		}
		.box2{
			width: 200px;
			height: 200px;
			background-color: blue;
		}
		.box3{
			width: 200px;
			height: 200px;
			background-color:green;
			float: left;
		}
	</style>
</head>
<body>
	<div class="box1">这是第一个div</div>
	<div class="box2">这是第二个div</div>
	<div class="box3">这是第三个div</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

3、定位布局

属性：position ------ 设置对象的定位方式
static ----- 静态定位（没有设置位置）默认

absolute ------- 绝对定位 ：将对象从文档流中分离出来，设置left top right bottom这四个方向去设
置相较于父级对象的相对定位，如果不存在这样的父级对象，那么父级是body

relative ------ 相对定位：对象不从文档流中分离出来，设置left top right bottom这四个方向去设置
相较于自身的相对定位
1
2
3
4
5
6
7
8

<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{
			width: 300px;
			height: 300px;
			border: 1px solid black;
			margin: 200px;
			position: relative;
		}
		.box1{
			width: 100px;
			height: 100px;
			background-color: red;
			position:absolute;
			top: 100px;
			left: 200px;
		}
		.box2{
			width: 100px;
			height: 100px;
			background-color: blue;
		}
		.box3{
			width: 100px;
			height: 100px;
			background-color:green;
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="box1">这是第一个div</div>
		<div class="box2">这是第二个div</div>
		<div class="box3">这是第三个div</div>
	</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

4、弹性盒子

弹性盒子是由弹性容器（Flexible或者Flexbox）和弹性元素(Flex-item)组成
设置弹性容器是通过display属性进行设置，---------- display:flex或则inline-flex
注意：一个弹性容器可以包含多个弹性元素

常见的属性：
	flex-direction ------- 指的是弹性容器中子元素的排列方式
	flex-wrap ------ 指的是弹性容器中子元素超出父容器时是否换行
	flex-flow ------ flex-direction 和flex-wrap 的简写
	align-items ------ 设置的弹性容器中元素在侧轴(纵轴）的对齐方式
	justify-content ------ 设置的弹性容器中元素在主轴（横轴）的对齐方式
	align-content------ 修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线
1
2
3
4
5
6
7
8
9
10
11

4.1、flex-direction

row ----- 左对齐（横向的从左到右排列），默认
row- reverse ------ 反向的横向排列（右对齐），从后往前排，最后一项排在最前面
column ----- 纵向排列
column-reverse ----- 反向纵向排列
1
2
3
4

4.2、flex-wrap

nowrap ---- 默认值，规定弹性元素不会换行
wrap ---- 弹性元素在需要的时候会换行
wrap-reverse ------ 会换行，但是是反方向
1
2
3

4.3、flex-flow

例如：
display: inline-flex;
flex-flow: column-reverse wrap; 
1
2
3

4.4、align-items

align-items --- 设置的弹性容器中元素在侧轴(纵轴）的对齐方式
1

在这里插入图片描述

<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>
		.flex-contain{
			width: 400px;
			height: 350px;
			background-color: orange;
			display: flex;
			align-items: baseline;
		}
		.flex-item{
			width: 100px;
			height: 100px;
			background-color: red;
		}
	</style>
</head>
<body>
	<div class="flex-contain">
		<div class="flex-item">flex item1</div>
		<div class="flex-item">flex item2</div>
		<div class="flex-item">flex item3</div>
	</div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

4.5、 justify-content

justify-content ------ 设置的弹性容器中元素在主轴（横轴）的对齐方式
1

在这里插入图片描述

4.6、align-content

align-content-------修改了flex-flow 的行为，类似于align-items，它是对齐的弹性线
1

在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/笔触狂放9/article/detail/796190