《 css布局》

最新推荐文章于 2024-08-26 08:04:31 发布

弓长九日。。

最新推荐文章于 2024-08-26 08:04:31 发布

阅读量99

点赞数 2

本文链接：https://blog.csdn.net/weixin_51746436/article/details/117780603

版权

1table布局

利用表格来布局，可以内容自动居中。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
.a{
height: 100px;
width: 100px;
}
.b{
	background-color: red;
}
.c{
	background-color: blue;
}


	</style>

</head>
<body>
<table class="a">
<tr>
<td class="b">1</td>
<td class="c">2</td>
</tr>
</table>
	
</body>
</html>

代码运行结果如下

2盒子布局

2.1盒子模型介绍

css中，所以页面元素都在一个矩形盒子内，这个矩形被称为盒子。盒子描述了元素及属性在页面中布局中所占空间的大小，因此盒子可以影响其他元素的大小和位置。

2.2div

<div>标签定义HTML文档中的一个分割区块或者一个区域部分。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
.box{
	height: 200px;
	width: 200px;
	background-color: blue;
	}

	</style>

</head>
<body>
<div class="box">
这是一个div
</div>
	
</body>
</html>

代码运行结果如下

要注意div元素是块级元素，块级元素是在页面上独占一行。如下所示。

html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
.box{
	height: 200px;
	width: 200px;
	background-color: blue;
}
.box1{
height: 200px;
width: 200px;
background-color: pink;
}


	</style>

</head>
<body>
<div class="box">
这是一个div
</div>
<div class="box1">
这是第二个div
</div>
	
</body>
</html>

代码运行结果如下

行内元素是在页面上排在一行内。<a> <i>等都是行内元素。可以利用display的取值来实现行内和块级元素之间的相互装换。display: inline使块级元素转换成行内元素，display：block使行内元素转换成块级元素。

3浮动布局

通过float的取值来进行布局。

fl0at:none	默认值，不浮动。
float:left	左浮动。
float:right	右浮动。

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{

		width: 200px;
		height: 200px;
		/*float: left;*/
        float:right;
	}
	
.box{

	background-color: blue;

}
.box1{

background-color: pink;
}
	</style>

</head>
<body>
<div class="box">
这是一个div
</div>
<div class="box1">
这是第二个div
</div>
	
</body>
</html>

左浮动会使后面的元素混乱。如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{

		width: 200px;
		height: 200px;
		
	}
	
.box{

	background-color: blue;
	float: left;

}
.box1{

background-color: pink;
float: left;
}
.box2{

	background-color: green;
}

	</style>


</head>
<body>
<div class="box">
这是一个div
</div>
<div class="box1">
这是第二个div
</div>
<div class="box2">
这是第三个div
</div>
	
</body>
</html>

代码运行结果如下

由上可以看出左浮动使后面的第三个div的样式出了问题。我们用clear来清除上面左浮动带来的影响。

clear:none	默认值，允许浮动
clear:left	清除左浮动
clear:right	清除右浮动
clear:both	清除两边浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{

		width: 200px;
		height: 200px;
		
	}
	
.box{

	background-color: blue;
	float: left;

}
.box1{

background-color: pink;
float: left;
}
.box2{

	background-color: green;
	clear:left;
}

	</style>


</head>
<body>
<div class="box">
这是一个div
</div>
<div class="box1">
这是第二个div
</div>
<div class="box2">
这是第三个div
</div>
	
</body>
</html>

代码运行结果如下

4定位布局

定位布局包括相对定位和绝对定位等。相对定位对象不从文档流里面分离，通过设置top、left、right、bottom这四个方向的值进行定位（相较于自身的定位）。绝对定位将对象从文档流分离出来，通过设置top、left、right、bottom这四个方向的值进行定位（相较于父级的定位），如果没有这样的父级，默认的父级是body。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	div{

		width: 100px;
		height: 100px;
		
	}
	
.box{

	background-color: blue;


}
.box1{

background-color: pink;
position: absolute;
top: 100px;
left: 100px;
}
.box2{

	background-color: green;
	position: relative;
	top: 100px;
	left: 100px;
	
}

	</style>


</head>
<body>
<div class="box">
这是一个div
</div>
<div class="box1">
这是第二个div
</div>
<div class="box2">
这是第三个div
</div>
	
</body>
</html>

代码运行结果如下

5弹性盒子

元素表现为 flex 框时，它们沿着两个轴来布局：

**主轴（main axis）**是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
**交叉轴（cross axis）**是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
设置了 display: flex 的父元素被称之为 flex 容器（flex container）。.container
在 flex 容器中的弹性盒子元素被称之为 flex 项（flex item）。

flex-direction	指定了弹性盒子（弹性容器）中子元素的排列方式
flex-wrap	指定了弹性盒子（弹性容器）中子元素的换行方式
justify-content	修改了 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素的对齐，而是设置行对齐
align-items	设置了弹性盒子子元素在侧轴的（纵轴）的对齐方式
align-content	设置了弹性盒子子元素在主轴的（横轴）的对齐方式