CSS进阶使用2

2.center居中排列方式

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* center居中排列方式 */
				justify-content: center;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

justify-content: center; 通过这行代码,我们可以看到四个inner-box都在最中间。

3.flex-end末尾排列方式

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
        /* flex-end末尾排列方式 */
				justify-content: flex-end;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

justify-content: flex-end; 通过这行代码,我们可以看到四个inner-box都在最右边。

4.space-between均匀排列方式, 首个元素放置于起点, 末尾元素放

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* space-between均匀排列方式, 首个元素放置于起点, 末尾元素放置于终点 */
				justify-content: space-between;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

justify-content: space-between; 通过这行代码,我们可以看到四个inner-box的中间间隔的距离一样, 而且第一个inner-box贴在浏览器的最左边, 第四个inner-box贴在浏览器的最右边。

5.space-evenly均匀排列方式, 每个元素之间的间隔相等

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* space-evenly均匀排列方式, 每个元素之间的间隔相等 */
				justify-content: space-evenly;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

justify-content: space-evenly; 通过这行代码,我们可以看到四个inner-box的中间间隔的距离一样, 而且第一个inner-box贴在浏览器的最左边, 第四个inner-box贴在浏览器的最右边, 但和justify-content: space-between; 的区别是, justify-content: space-evenly; 结果出来第一个和最后一个box-inner没有贴在浏览器旁边, 而是在浏览器中间。

6.space-around均匀排列方式, 每个元素周围分配相同的空间

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* space-around均匀排列方式, 每个元素周围分配相同的空间 */
				justify-content: space-around;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

justify-content: space-around; 的效果, 在图中, 已用红色线条展示出来了。均匀排列方式, 每个元素周围分配相同的空间!

y轴的排列方式用到的属性:
align-items: 属性值;

以y轴为排列方式, 通常的属性值有:
1.start(或flex-start)默认排列方式, 元素位于容器的起始位置
2.center中间排列方式, 元素位于容器的中心
3.end(或flex-end)末尾排列方式, 元素位于容器的末尾位置

1.start(或flex-start)默认排列方式, 元素位于容器的起始位置

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* center居中排列方式 */
				justify-content: center;
				/* y轴的排列方式 */
				/* start(或flex-start)默认排列方式, 元素位于容器的起始位置 */
				align-items: flex-start;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

align-items: flex-start; 这个属性的设置让四个inner-box在浏览器的最上方。

2.center中间排列方式, 元素位于容器的中心

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* center居中排列方式 */
				justify-content: center;
				/* y轴的排列方式 */
				/* center中间排列方式, 元素位于容器的中心 */

				align-items: center;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

align-items: center;这个属性的设置让四个inner-box在浏览器的正中间。

3.end(或flex-end)末尾排列方式, 元素位于容器的末尾位置

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.box{
				width: 100%;
				/* vh是视口高度 */
				height: 100vh;
				background-color: skyblue;
				display: flex;
				/* x轴的排列方式 */
				/* flex-end末尾排列方式 */
				justify-content: center;
				/* y轴的排列方式 */
				/* end(或flex-end)末尾排列方式, 元素位于容器的末尾位置 */
				align-items: flex-end;
			}
			.inner-box{
				width: 50px;
				height: 30px;
				border: 1px red solid;
			}
			/* 鼠标移入效果hover */
			.inner-box:hover{
				color: red;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box">1</div>
			<div class="inner-box">2</div>
			<div class="inner-box">3</div>
			<div class="inner-box">4</div>
		</div>
	</body>
</html>

结果:

align-items: flex-end; 这个属性的设置让四个inner-box在浏览器的最下方。

display属性的其他用法

常见的有:
1.block(块级元素)
2.inline(行内元素)

1.block(块级元素)

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 50px;
				background-color: red;
				/* 块级元素(默认), 占一整行空间 */
				display: block;
			}
		</style>
	</head>
	<body>
		<!-- span, 一左一右(行内元素), 都是在一行里面排列的(左右排列), 但不能调整大小 -->
		<span>我是文字</span>
		<span>我是文字</span>
		<!-- div一般默认都是块级元素, 块级元素, 都是占用一整行空间的, 但是可以挑战大小 -->
		<div>我是div</div>
		<div>我是div</div>
	</body>
</html>

结果:

我们可以看到有两个红色的方框, 以上下排列, 因为div的display属性默认值是block, 块级元素, 是占用一整行空间的, 所以第二个div会跟在第一个div下面

2.inline(行内元素)

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			div{
				height: 50px;
				background-color: red;
				/* 行内元素, 左右排列, 都在同一行 */
				display: inline;
			}
		</style>
	</head>
	<body>
		<!-- span, 一左一右(行内元素), 都是在一行里面排列的(左右排列), 但不能调整大小 -->
		<span>我是文字</span>
		<span>我是文字</span>
		<!-- div一般默认都是块级元素, 块级元素, 都是占用一整行空间的, 但是可以挑战大小, 不过我们在这里把div设置成了inline(行内元素) -->
		<div>我是div</div>
		<div>我是div</div>
	</body>
</html>

结果:

我们可以看到有两个红色的方框, 以左右排列, 因为div的display属性默认值是inline, 行内元素, 所有的元素都在一行空间里面, 所以第二个div会跟在第一个div右边(左右排列)

css中hover的用法

比如:

css 复制代码

/* 鼠标移入效果hover */
.inner-box:hover{
	color: red;
}

当我鼠标指在方框上面的时候, 方框里面的文字, 会变色
当我们鼠标离开方框的时候, 方框里面的文字, 又会变为原来的颜色。

实战:

实现以下界面:

先尝试着自己做下, 只要吧网站里面的界面效果做出来就行哦, 不一定要和图片里面的一模一样哦。

由于字数的原因, 答案这里写不下了, 给大家带来了不便, 敬请谅解！！！

上一个

css进阶使用

下一个

css进阶使用实战题答案

最近修改: 2024-08-31Powered by

所有分类