首頁 > 開發者 > JavaScript
後端碼農談前端（CSS篇）第七課：定位與浮動，後端css
一、定位： 1、定位的理解 （1）相對定位
相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素“相對於”它的起點進行移動。
如果將 top 設定為 20px，那麼框將在原位置頂部下面 20 像素的地方。如果 left 設定為 30 像素，那麼會在元素左邊建立 30 像素的空間，也就是將元素向右移動。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
如所示：
注意，在使用相對定位時，無論是否進行移動，元素仍然佔據原來的空間。因此，移動元素會導致它覆蓋其它框。
（2）絕對位置絕對位置使元素的位置與文檔流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
普通流中其它元素的布局就像絕對位置的元素不存在一樣：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}如所示：
絕對位置的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
對於定位的主要問題是要記住每種定位的意義。所以，現在讓我們複習一下學過的知識吧：相對定位是“相對於”元素在文檔中的初始位置，而絕對位置是“相對於”最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼“相對於”最初的包含塊。
注釋：根據使用者代理程式的不同，最初的包含塊可能是畫布或 HTML 元素。
提示：因為絕對位置的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設定 z-index 屬性來控制這些框的堆放次序。
CSS 定位屬性允許你對元素進行定位。
（1）position把元素放置到一個靜態、相對的、絕對的、或固定的位置中。
屬性值：
| 屬性 | 描述 |
| top | 定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的位移。 |
| right | 定義了定位元素右外邊距邊界與其包含塊右邊界之間的位移。 |
| bottom | 定義了定位元素下外邊距邊界與其包含塊下邊界之間的位移。 |
| left | 定義了定位元素左外邊距邊界與其包含塊左邊界之間的位移。 |
屬性值：
設定當元素的內容溢出其地區時發生的事情。
屬性值：
設定元素的形狀。元素被剪入這個形狀之中，然後顯示出來。
屬性值：
設定元素的垂直對齊。
屬性值：
屬性值：
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由於浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
請看，當把框 1 向右浮動時，它脫離文檔流並且向右移動，直到它的右邊緣碰到包含框的右邊緣：
再請看，當框 1 向左浮動時，它脫離文檔流並且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處於文檔流中，所以它不佔據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
如果把所有三個框都向左移動，那麼框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
如所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那麼其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那麼當它們向下移動時可能被其它浮動元素“卡住”：
2、CSS 浮動屬性float
屬性值：
執行個體（把映像向右浮動）：
img
{
float:right;
}3、來個實驗吧！樣本1：（認識float的兩種特性）
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
</head>
<body>
<div>
<div style='float:left'><img src="image/1.jpg" ></div>
<div><img src="image/2.jpg" ></div>
<div><img src="image/3.jpg" ></div>
<div><img src="image/4.jpg" ></div>
</div>
</body>
</html>
如是：
第一個<div>:
第二個<div>:
第一個<div>去掉'float:left':
我們對比這幾幅，可以得知以下幾點：
其實，如是解析仍感覺對float的“破壞性”描述的不太明白，好吧，再來個例子。看看float的本職工作。
樣本2：（我生來是做文字環繞效果的！）<!DOCTYPE html>
<html lang=“utf8”>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div>
<img src="image/1.jpg" style='float:left'>
哇哢哢，我生來是做文字文字環繞效果的！
</div>
</body>
</html>
去掉'float:left'的<img>元素：
帶有'float:left'的<img>元素：
<img>元素去掉'float:left'時的<div>元素：
<img>元素帶有'float:left'時的<div>元素：
其實 ，我一直想強調，但一直沒能說清楚的是：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
