App下載

網(wǎng)頁(yè)中怎么使用css進(jìn)行定位？定位有幾種方法？

猿友 2021-06-01 17:50:20 瀏覽數(shù) (3362)
反饋

在HTML中我們時(shí)常會(huì)遇到不同的問題，今天我們就來(lái)說(shuō)說(shuō)在”網(wǎng)頁(yè)中怎么使用 css 進(jìn)行定位”和“定位有幾種方法”，小編在網(wǎng)上進(jìn)行搜索中發(fā)現(xiàn)，用于 CSS 中有關(guān)于定位的方法有這么三種。

方法一：
絕對(duì)定位（absolute）：

在我們使用這個(gè)絕對(duì)定位中元素會(huì)脫離我們的文檔流，而且如果我們?cè)跇邮街性O(shè)置偏移量的話還會(huì)影響網(wǎng)頁(yè)中其他元素的位置，代碼和截圖如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>定位方法使用</title>
		<style>
			.po_one_box{
				width: 200px;
				height: 150px;background-color: greenyellow;
				top:90px; left:300px;
				position:absolute;padding-top:50px; padding-left:50px;font-size: 30px;}
		</style>
	</head>
	<body>
		<div class="po_one_box">我是絕對(duì)定位</div>
	</body>
</html>

絕對(duì)定位

方法二：
相對(duì)定位（relitive）：

相對(duì)定位是一個(gè)相對(duì)于原來(lái)的位置進(jìn)行一個(gè)移動(dòng)，而且當(dāng)我們?cè)谑褂玫臅r(shí)候設(shè)置這個(gè)元素屬性的話不會(huì)影響其他的元素布局。代碼截圖如下：

<html>
	<head>
		<meta charset="utf-8">
		<title>定位方法使用</title>
		<style>
			.po_one_box{
				width: 200px;
				height: 150px;background-color: greenyellow;
				top:90px; left:300px;
				position:absolute;padding-top:50px; padding-left:50px;font-size: 30px;
			}
			.po_two_box{
				width: 200px;
				height: 150px;background-color: cornflowerblue;
				top:180px; left:80px;  font-size: 30px;
				position:absolute;padding-top:50px; padding-left:50px;
			}			
		</style>
	</head>
	<body>
		<div class="po_one_box">我是絕對(duì)定位</div>
		<div class="po_two_box">我是相對(duì)定位</div>
	</body>
</html>

相對(duì)定位

方法三：
固定定位（fixed）：

固定定位這個(gè)方法是指當(dāng)我們一個(gè)元素被固定之后不會(huì)因?yàn)闈L動(dòng)條的一個(gè)改變而且發(fā)生改變位置，而且我們?cè)谑褂眠@個(gè)方法的時(shí)候使用

?position:fixed;?來(lái)實(shí)現(xiàn)的。代碼截圖如下： 

<html>
	<head>
		<meta charset="utf-8">
		<title>定位方法使用</title>
		<style>
			.po_one_box{
				width: 200px;
				height: 150px;background-color: greenyellow;
				top:90px; left:300px;
				position:absolute;padding-top:50px; padding-left:50px;font-size: 30px;
			}
			.po_two_box{
				width: 200px;
				height: 150px;background-color: cornflowerblue;
				top:180px; left:80px;  font-size: 30px;
				position:absolute;padding-top:50px; padding-left:50px;
			}
			.po_three_box{
				width: 200px;
				height: 150px;background-color: bisque;
				top:280px; left:280px; font-size: 30px;
				position:absolute;padding-top:50px; padding-left:50px;
			}
		</style>
	</head>
	<body>
		<div class="po_one_box">我是絕對(duì)定位</div>
		<div class="po_two_box">我是相對(duì)定位</div>
		<div class="po_three_box">我是固定定位</div>
	</body>
</html>

我是固定定位

總結(jié)：

當(dāng)我們?cè)谑褂枚ㄎ坏氖褂眯【庍@邊建議大家在使用絕對(duì)定位的時(shí)候盡量配合固定定位一起使用，最好不要單獨(dú)的使用絕對(duì)定位以免發(fā)生頁(yè)面布局錯(cuò)亂和其他的問題。以上就是小編的一個(gè)經(jīng)驗(yàn)分享，更多的html知識(shí)我們都可以在w3cschool這個(gè)平臺(tái)中進(jìn)行學(xué)習(xí)噢！


HTML CSS 編程基礎(chǔ)

0 人點(diǎn)贊