技術標籤：html+csshtml

文章目錄

• 一 標準流(Normal Flow)
• 二 position 定位
• • 2.1 static 靜態定位
  • 2.2 relative 相對定位

一 標準流(Normal Flow)

預設情況下，元素都是按照 normal flow (標準流、常規流、正常流、文件流[document flow])進行排布的
從左到右，從上到下按順序進行排布
預設情況下，元素互相之間不存在層疊現象

margin、padding 定位

• 在標準流中，可以使用 margin、padding 對元素進行定位
• 其中 margin 還可以設定負數

缺點

• 設定一個元素的 margin 或者 padding，通常會影響標準流中其他元素的定位效果
• 不便於實現元素的層疊效果

解決方案：就使用定位來實現，啥是定位？下個章節中講解

二 position 定位

利用 position 可以對元素進行定位，常用取值有 4 個

1. static：靜態定位，預設值
2. relative：相對定位
3. absolute：絕對定位
4. fixed：固定定位

2.1 static 靜態定位

• position 屬性的預設值
• 元素按照 normal flow 佈局
• top、right、bottom、left 沒有任何作用

2.2 relative 相對定位

• 元素按照 normal flow 佈局
• 可以通過 top、right、bottom、left 進行定位
• 定位參照物件是元素自己原來的位置

練習

方法一：定位實現

<div class="box">
	<img src="../img/mhxy.jpg" alt="">
</div>

.box {
	overflow: hidden;
}
.box img {
	position: relative;
	left: -960px;
	margin-left: 50%;
}

方法二：背景圖片實現

<div class="box"></div>

.box {
	height: 420px;
	background-image: url('1.jpg');
	background-position: center -82px;
}
 

方法三：transform 實現

<div class="box">
	<img src="../img/mhxy.jpg" alt="">
</div>

.box {
	overflow: hidden;
}
.box img {
	transform: translate(-50%);
	margin-left: 50%;
}

圖片路徑