css进阶使用

CSS进阶使用

常见的有三种布局:

一、相对布局

二、绝对布局

三、固定布局

一、相对布局:

想要把的布局开启, 那就需要用到position属性。
开启相对布局:

css 复制代码 
position: relative;

相对布局的特点:
1.是元素在移动位置的时候, 他是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
2.原来的位置继续占有, 后面的盒子仍然保留在原来的位置。

我们上代码, 来看看效果:

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 200px;
				height: 200px;
				background-color: skyblue;
				/* 相对定位 */
				/* position 开启定位 relative 开启相对定位 */
				position: relative;
				top: 100px;
				/* 超出了浏览器屏幕范围, 而不是方块变小了 */
				/* right: 100px; */
				left: 0px;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<!-- 1.是元素在移动位置的时候, 他是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置) -->
		<!-- 2.原来的位置继续占有, 后面的盒子仍然保留在原来的位置。 -->
		<div class="box1"></div>
		<div class="box2"></div>
	</body>
</html>

运行结果:

我们可以看到上面淡蓝色的框, 把下面的深蓝色的框, 给覆盖掉了。这个就是遵循相对布局特点的第二条。

相对布局，是相对于自己原来的位置来移动的。参照物是自己, 不是浏览器。（相对布局的第一条特性）所以如果css里面设置right: 100px;的话, 则浅蓝色的方框会超出浏览器的范围, 因为它是按照自己的原来的位置来移动的。

二、 绝对布局:

绝对布局特点:
1.如果没有祖先元素或者祖先元素没有定位, 则以浏览器为准定位
2.当爷爷开启定位的时候, 儿子以爷爷作为参考点
3.当爸爸开启定位的时候, 儿子以爸爸作为参考点

第一种情况:

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 400px;
				height: 400px;
				/* 爸爸现在没有开定位 */
				background-color: green;
			}
			.box2{
				width: 200px;
				height: 200px;
				background-color: red;
				/* 开启绝对定位 */
				/* 爸爸没有开启定位 那儿子就以浏览器为参考点 */
				position: absolute;
				bottom: 100px;
				right: 500px;
			}
		</style>
	</head>
	<body>
		<!-- 如果没有祖先元素或者祖先元素没有定位, 则以浏览器为准定位 -->
		<div class="box1">
			<div class="box2"></div>
		</div>
	</body>
</html>

我们可以看到祖先元素或者祖先元素没有定位, 则儿子元素以浏览器为准定位。

结果如图:

红色方框的位置以浏览器为准定位。

第二种情况:
当爷爷开启定位的时候, 儿子以爷爷作为参考点

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.yeye{
				width: 600px;
				height: 600px;
				background-color: palegreen;
				/* 给爷爷开启相对定位 */
				/* 当爷爷开启定位的时候, 儿子以爷爷作为参考点 */
				position: relative;
			}
			.baba{
				width: 400px;
				height: 400px;
				background-color: red;
			}
			.erzi{
				width: 200px;
				height: 200px;
				background-color: pink;
				/* 给儿子开启绝对定位 */
				position: absolute;
				/* 为儿子加偏移量 */
				top: 100px;
				right: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 如果祖先元素有定位(相对、绝对、固定定位), 则以最近一级的有定位的祖先元素为参考点移动位置 -->
		<div class="yeye">
			<div class="baba">
				<div class="erzi"></div>
			</div>
		</div>
	</body>
</html>

结果:

第三种情况:

3.当爸爸开启定位的时候, 儿子以爸爸作为参考点

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.yeye{
				width: 600px;
				height: 600px;
				background-color: palegreen;
				/* 给爷爷开启相对定位 */
				/* 当爷爷开启定位的时候, 儿子以爷爷作为参考点 */
				position: relative;
			}
			.baba{
				width: 400px;
				height: 400px;
				background-color: red;
				/* 为爸爸开启相对定位 */
				/* 当爸爸开启定位的时候, 儿子以爸爸作为参考点 */
				/* 当爷爷和爸爸开启定位的时候, 儿子以爸爸作为参考点(就近原则法) */
				/* 当爷爷没有开启定位并且爸爸开启定位的时候, 儿子以爸爸作为参考点 */
				position: relative;
			}
			.erzi{
				width: 200px;
				height: 200px;
				background-color: pink;
				/* 给儿子开启绝对定位 */
				position: absolute;
				/* 为儿子加偏移量 */
				top: 100px;
				right: 100px;
			}
		</style>
	</head>
	<body>
		<!-- 如果祖先元素有定位(相对、绝对、固定定位), 则以最近一级的有定位的祖先元素为参考点移动位置 -->
		<div class="yeye">
			<div class="baba">
				<div class="erzi"></div>
			</div>
		</div>
	</body>
</html>

我们把爸爸的那个元素, 打开相对定位
结果:

子绝父相

儿子元素是绝对布局, 爸爸元素是相对布局

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 400px;
				height: 400px;
				background-color: red;
				/* 给爸爸开相对定位 */
				position: relative;
			}
			.box2{
				width: 150px;
				height: 150px;
				background-color: yellow;
				/* 给儿子1开绝对定位 */
				position: absolute;
			}
			.box3{
				width: 150px;
				background-color: green;
				/* 原来的为位置不再占有, 后面的盒子会占用位置 */
        /* 我们这里把高度设置为200px, 这样看上去更直观一点, 是被覆盖了。 如果只设置150px的话, 就看不到box3方框了, 其实它是被覆盖了, 而不是消失了。 */
				height: 200px;
			}
			.box11{
				width: 500px;
				height: 500px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">我是黄色的盒子</div>
			<div class="box3">我是绿色的盒子</div>
		</div>
		<div class="box11"></div>
	</body>
</html>

结果:

子绝父绝的情况比较少, 但不代表没有。
下面是子绝父绝的情况:

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box1{
				width: 400px;
				height: 400px;
				background-color: red;
				/* 给爸爸开绝对定位 */
				position: absolute;
			}
			.box2{
				width: 150px;
				height: 150px;
				background-color: yellow;
				/* 给儿子1开绝对定位 */
				position: absolute;
			}
			.box3{
				width: 150px;
				background-color: green;
				/* 原来的为位置不再占有, 后面的盒子会占用位置 */
				height: 200px;
			}
			.box11{
				width: 500px;
				height: 500px;
				background-color: purple;
			}
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2">我是黄色的盒子</div>
			<div class="box3">我是绿色的盒子</div>
		</div>
		<div class="box11"></div>
	</body>
</html>

结果:

固定布局

特点:
1.无论窗口怎么滑动, 元素的位置始终固定
我们举个例子:

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Document</title>
		<style>
			.box{
				width: 100%;
				height: 100px;
				background-color: red;
				/* 给红色盒子加上固定布局fixed */
				position: fixed;
				/* 固定到 距离下面的距离为0 */
				/* 无论窗口怎么滑动, 红色盒子的位置始终固定 */
				bottom: 0px;
			}
			.box1{
        /* 让box1的盒子足够高, 以至于可以用上下滚动条来滑动, 通过上下滚动条滑动的实验来验证固定布局的特性  */
				height: 3000px;
				background-color: blue;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<div class="box1">我是一个盒子</div>
	</body>
</html>

结果:

我们可以从两张图片看的出来, 无论滚动条怎么上下滑动, 红色的方框始终在最下方, 这就是固定布局的作用。

flex布局

flex布局, 称之为弹性布局, 我们来学习下flex布局, 到底有哪些属性, 已经它的用法。

首先, 我们在css里面用到弹性布局, 需要用到display: flex;这句话。

css 复制代码 
display: flex;

我们简单举个列子, 上代码:

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				/* 弹性布局 */
				display: flex;
			}
			.inner-box{
				/* width: 200px; */
				height: 200px;
				border: 3px red solid;
				/* 每个盒子占一份空间 */
				flex: 1;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box"></div>
			<div class="inner-box"></div>
		</div>
	</body>
</html>

结果:

我们可以从结果的图中发现, 有两个方框, 而且占用的宽度都是平均分, 这里面就和弹性布局有关了, 我们首先在box盒子里面设置了弹性布局, 然后再inner-box盒子里面设置了一个flex: 1;这个属性, 这个属性代表着两个inner-box,它们两占领的空间都是一份, 所以一个inner-box就占用了总共大小的二分之一。当然这里我要提醒下, 如果把flex值设置为2的话, 结果也是一样的, 因为第一个inner-box占比2, 第二个inner-box占比也是2, 那这样的话, 它们两占比大小, 还是一样不变的, 相当于都是4份里面占其中2份, 也就是说四分之二同时又等于二分之一。

那我们试着想一下, 如果第一个盒子的flex值设置为2, 第二个盒子的flex值设置为1, 那么呈现出来的效果又会是如何呢?

我们举个例子, 就一目了然了。

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				/* 弹性布局 */
				display: flex;
			}
			.inner-box1{
				/* width: 200px; */
				height: 200px;
				border: 3px red solid;
				/* inner-box1盒子占一份空间 */
				flex: 1;
			}
			.inner-box2{
				/* width: 200px; */
				height: 200px;
				border: 3px red solid;
				/* inner-box2盒子占两份空间 */
				flex: 2;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<div class="inner-box1"></div>
			<div class="inner-box2"></div>
		</div>
	</body>
</html>

结果:

我们不难看到, 第一个盒子宽度短些, 第二个盒子宽度长些。原因也很简单, 因为我们把第一个盒子的flex的值设置成了1, 而第一个盒子的flex的值设置成了2, 那么第一个盒子占比整个盒子的三分之一, 而第二个盒子占比整个盒子的三分之二。

flex布局里面的常见属性配置:

x轴的排列方式用到的属性:
justify-content: 属性值;

以x轴为排列方式, 通常的属性值有:
1.flex-start默认排列方式
2.center居中排列方式
3.flex-end末尾排列方式
4.space-between均匀排列方式, 首个元素放置于起点, 末尾元素放置于终点
5.space-evenly均匀排列方式, 每个元素之间的间隔相等
6.space-around均匀排列方式, 每个元素周围分配相同的空间

这里需要注意下:
运行出来蓝色背景, 背景大小为全屏, height: 100vh;的意思是占比视口高度为100, 相当于占满全屏。

1.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轴的排列方式 */
				/* flex-start默认排列方式 */
				/* center居中排列方式 */
				/* flex-end末尾排列方式 */
				/* space-between均匀排列方式, 首个元素放置于起点, 末尾元素放置于终点 */
				/* space-evenly均匀排列方式, 每个元素之间的间隔相等 */
				/* space-around均匀排列方式, 每个元素周围分配相同的空间 */
				justify-content: 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>

结果:

justify-content: flex-start; 通过这行代码,我们可以看到四个inner-box都在最左上方, 当然上下也有个参数叫做align-items属性, 这个一会儿我们会讲到，这里的关键是四个盒子都在最左边。

2.center居中排列方式

由于博客字数不能超过10000字, 这里字数已经差不多到10000字了, 咱们得下一个博客接着写, 可能会带来不便, 敬请谅解！！！

上一个
css基本使用
下一个
CSS进阶使用2
最近修改: 2024-08-31Powered by
所有分类