CSS有三種基本的定位機(jī)制：普通流（文檔流）施逾，定位和浮動(dòng)
- <strong>普通流</strong>：普通流中元素框的位置由元素在 XHTML 中的位置決定敷矫。塊級(jí)元素從上到下依次排列例获，框之間的垂直距離由框的垂直 margin 計(jì)算得到。行內(nèi)元素在一行中水平布置曹仗。
- <strong>定位</strong>：
① <strong>無定位（position:static）</strong>：默認(rèn)值榨汤。沒有定位，元素出現(xiàn)在正常的流中（忽略 top,bottom,left,right 或者 z-index 的聲明）
② <strong>相對(duì)定位（position:relative）</strong>：定位元素的位置相對(duì)于它在普通流中的位置進(jìn)行移動(dòng)怎茫。使用相對(duì)定位的元素<u>不管它是否進(jìn)行移動(dòng)收壕，元素仍占據(jù)它原來的位置（空間）</u>，但移動(dòng)元素會(huì)使該元素覆蓋其他的框轨蛤。如"left:20px”會(huì)向元素的 LEFT 位置添加 20 像素蜜宪。
下面我給了一個(gè)例子，可以發(fā)現(xiàn)在定位前后祥山，粉框所占據(jù)的空間并沒有改變圃验，但是粉框覆蓋到了黃框上。
③ <strong>絕對(duì)定位（position:absolute）</strong>：絕對(duì)定位的元素位置是相對(duì)于距離他最近的那個(gè)<u>已經(jīng)定位的父級(jí)元素（相對(duì)/絕對(duì)）來決定的</u>枪蘑。如果自身父級(jí)元素沒有定位损谦，則往更上級(jí)的有定位的父級(jí)元素岖免，如果元素沒有已定位的祖先元素岳颇，那么他的位置就相對(duì)于初始包含塊兒（body 或html 類似的）元素。以此類推颅湘。<u>絕對(duì)定位使元素與文檔流無關(guān)话侧， 因此不占據(jù)空間</u>。
普通文檔流中其他的元素的布局不受絕對(duì)定位元素的影響闯参。就等同于絕對(duì)定位的元素不存在一樣瞻鹏。
ps: 由于絕對(duì)定位的元素脫離普通流，所以它可以覆蓋頁面上的其他元素鹿寨，可以通過設(shè)置 z-Iindex 屬性來控制這些框的堆放次序新博。
下面我舉了一個(gè)例子，我們可以看到對(duì)粉框定位后脚草，它下面的黃框上移占據(jù)了粉框原本的位置赫悄， 仿佛粉框不存在一般。
④ <strong>固定定位（position:fixed）</strong>：固定定位是絕對(duì)定位的一種馏慨，相對(duì)于瀏覽器窗口進(jìn)行定位埂淮。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。固定定位的元素也不包含在普通文檔流中写隶，差異是固定元素的包含塊兒是視口（viewport）倔撞。
- <strong>浮動(dòng)</strong>：浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?<u>由于浮動(dòng)框不在文檔的普通流中慕趴，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣</u>痪蝇。
如果包含塊太窄鄙陡，無法容納水平排列的浮動(dòng)元素，那么其他浮動(dòng)元素向下移動(dòng)躏啰，直到有足夠多的空間柔吼。如果浮動(dòng)元素的高度不同，那么當(dāng)它們向下移動(dòng)時(shí)可能會(huì)被其他浮動(dòng)元素卡住丙唧。
行內(nèi)元素會(huì)圍繞著浮動(dòng)框排列愈魏。例子如下圖：
1.文檔流的概念指什么培漏？有哪種方式可以讓元素脫離文檔流?
- 文檔流中的元素的位置由元素在 (X)HTML 中的位置決定。
- 通過定位與浮動(dòng)的方法可以讓元素脫離文檔流胡本。
2.有幾種定位方式牌柄，分別是如何實(shí)現(xiàn)定位的，使用場(chǎng)景如何侧甫？
<strong>共有四種定位方式</strong>：普通流珊佣，相對(duì)定位，絕對(duì)定位和固定定位披粟。
- 相對(duì)定位（position:relative）：定位元素的位置相對(duì)于它在普通流中的位置進(jìn)行移動(dòng)咒锻。用于
- 絕對(duì)定位（position:absolute）：絕對(duì)定位的元素位置是相對(duì)于距離他最近的那個(gè)已經(jīng)定位的父級(jí)元素（相對(duì)/絕對(duì)）來決定的。用于九宮格效果守屉，整體布局等惑艇。
- 固定定位（position:fixed）：固定定位是絕對(duì)定位的一種，相對(duì)于瀏覽器窗口進(jìn)行定位拇泛。用于廣告欄之類的固定位置使用滨巴。
3.absolute, relative, fixed 偏移的參考點(diǎn)分別是什么
- absolute 參考點(diǎn)是相對(duì)于 static 定位以外的第一個(gè)已經(jīng)定位的父級(jí)元素（相對(duì)/絕對(duì)）來決定的。
- relative 參考點(diǎn)是相對(duì)于其正常位置進(jìn)行定位俺叭。
- fixed 參考點(diǎn)是相對(duì)于瀏覽器窗口進(jìn)行定位恭取。
4. z-index 有什么作用? 如何使用?
z-index：針對(duì)網(wǎng)頁顯示中的一個(gè)特殊屬性，為了表示三維立體的概念如元素的上下層的疊加順序引入了 z-index 屬性來表示 Z 軸熄守。<strong>但其只對(duì)定位元素有效蜈垮。</strong>下面是不同場(chǎng)景下的顯示順序：
① z-index 值：值較大的元素將疊加在 z-index 值較小的元素之上，正數(shù)值將疊加在負(fù)數(shù)值得對(duì)象上柠横。
②相同 z-index 的疊加順序：
- 如果兩個(gè)元素都沒有定位發(fā)生位置重合現(xiàn)象或者兩個(gè)都已定位元素且z-index 相同發(fā)生位置重合現(xiàn)象窃款，那么按文檔流順序，后面的覆蓋前面的牍氛。
- 如果兩個(gè)元素都沒有設(shè)置z-index晨继，使用默認(rèn)值，一個(gè)定位一個(gè)沒有定位搬俊，那么定位元素覆蓋未定位元素紊扬。
③父子關(guān)系處理：
- 如果父元素z-index有效蜒茄，那么子元素?zé)o論是否設(shè)置z-index都和父元素一致，會(huì)在父元素上方餐屎，即使是子元素的 z-index 值比父元素小檀葛，也會(huì)出現(xiàn)在父元素上方。
- 如果父元素z-index 失效（未定位或者使用默認(rèn)值）腹缩，那么定位子元素的 z-index 設(shè)置生效屿聋。
④兄弟之間子元素疊加順序：由其父元素決定，父元素值高的疊加低的藏鹊，不管子元素 z-index 值得大小润讥。
5.position:relative 和負(fù) margin 都可以使元素位置發(fā)生偏移?二者有什么區(qū)別
position:relative 和負(fù) margin 都可以使元素位置發(fā)生偏移。
- position:relative 的偏移所產(chǎn)生的結(jié)果是該元素仍占據(jù)它原來的位置（空間）盘寡，但移動(dòng)元素會(huì)使該元素覆蓋其他的框楚殿，也就是說不會(huì)影響整體的布局。
- 負(fù) margin 的偏移所產(chǎn)生的結(jié)果是帶動(dòng)該元素周圍的元素一起移動(dòng)竿痰，也就是該元素不占據(jù)原來的位置脆粥，而是真的發(fā)生了偏移改變了布局。
下面我給出了兩個(gè)例子：
<!DOCTYPE html>
<html lang="en">
<head>
<title>text10</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.text1,
.text3 {
background-color: yellow;
width: 150px;
height: 100px;
margin: 0;
}
.text2 {
background-color: pink;
margin-top: 3px;
width: 150px;
height: 100px;
display: inline-block;
}
</style>
</head>
<body>
<div class="text1"></div>
<div class="text2"></div>
<a href="#">這是一個(gè)鏈接</a>
<div class="text3"></div>
</body>
</html>
在該代碼的基礎(chǔ)上我添加了 position:relative 命令影涉，使其在左方與下方分別增加了-30px变隔。結(jié)果如下圖，我們可以發(fā)現(xiàn) position:relative 命令所帶來的結(jié)果并不會(huì)改變 a 鏈接的位置發(fā)生任何變化常潮。
在初始代碼的基礎(chǔ)上我又添加了負(fù) margin 的命令弟胀，使其在左方與下方分別移動(dòng)了 -30px。結(jié)果如下圖喊式，我們可以發(fā)現(xiàn)負(fù) margin 命令所帶來的結(jié)果不僅讓
a 元素的位置發(fā)生的變化，使得下方的 div 黃框也上移了萧朝。
<strong>總結(jié)</strong>：position:relative 的偏移不會(huì)帶動(dòng)周圍元素的偏移岔留，因?yàn)槠湓厝哉紦?jù)該元素本來的位置。而負(fù) margin 的偏移會(huì)帶來周圍元素的偏移检柬。
6.如何讓一個(gè)固定寬高的元素在頁面上垂直水平居中?
利用 position:absolute 與負(fù) margin 來實(shí)現(xiàn)献联。具體如下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>text10</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.ct{
position: relative;
height: 500px;
background-color: #eee;
}
.box{
position: absolute;
top: 50%;
left: 50%;
margin: -50px;
width: 100px;
height: 100px;
background: pink;
}
</style>
</head>
<body>
<div class="ct">
<div class="box"></div>
</div>
</body>
</html>
所以我們得到如下圖的結(jié)果，有寬高的 div 垂直水平居中了何址。
7.浮動(dòng)元素有什么特征里逆？對(duì)其他浮動(dòng)元素、普通元素用爪、文字分別有什么影響?
浮動(dòng)模型也是一種可視化格式模型原押，浮動(dòng)的框可以左右移動(dòng)（根據(jù)float屬性值而定），直到它的外邊緣碰到包含框或者另一個(gè)浮動(dòng)元素的框的邊緣偎血。浮動(dòng)元素不在文檔的普通流中诸衔，文檔的普通流中的元素表現(xiàn)的就像浮動(dòng)元素不存在一樣盯漂。
對(duì)于不同的情況我舉了幾個(gè)例子：
- 正常形況下不浮動(dòng)如下圖。
- 第一個(gè)框向右浮動(dòng)笨农，第二個(gè)框會(huì)頂上它的位置就缆，效果如圖。
- 第一個(gè)框向左浮動(dòng)谒亦，因?yàn)?box1 脫離文檔流竭宰，z-index值高，所以覆蓋 box2份招。效果如圖羞延。
- 三個(gè)框均向左浮動(dòng)，在包含快空間足夠的情況下依次排列脾还，否則包含塊太窄無法容納水平排列三個(gè)浮動(dòng)元素伴箩，那么其他浮動(dòng)塊向下移動(dòng)。兩個(gè)效果如下圖鄙漏。
- 若浮動(dòng)元素的高度不同嗤谚，那么向下移動(dòng)的時(shí)候可能會(huì)被卡住。效果如圖怔蚌。
- 浮動(dòng)會(huì)讓元素脫離文檔流,不影響不浮動(dòng)元素巩步。效果如圖。
- 如果浮動(dòng)的元素后面有一個(gè)文檔流中元素,那么這個(gè)元素的框會(huì)表現(xiàn)的像浮動(dòng)元素不存在,但是框的文本內(nèi)容會(huì)受到浮動(dòng)元素的影響,會(huì)移動(dòng)以留出空間桦踊，也就是常見的文字環(huán)繞椅野。效果如圖。
參考：課件-浮動(dòng)
8.清除浮動(dòng)指什么? 如何清除浮動(dòng)?
浮動(dòng)元素引起的問題：
- 父元素的高度無法被撐開籍胯，影響與父元素同級(jí)的元素
- 與浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后
- 若非第一個(gè)元素浮動(dòng)竟闪，則該元素之前的元素也需要浮動(dòng)，否則會(huì)影響頁面顯示的結(jié)構(gòu)
清楚浮動(dòng)實(shí)際上為前面的浮動(dòng)元素留出了垂直空間杖狼，也可以解決上面問題中的第二個(gè)問題與第三個(gè)問題炼蛤。
語法：clear : none | left | right | both
- none：默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象
- left：不允許左邊有浮動(dòng)對(duì)象
- right：不允許右邊有浮動(dòng)對(duì)象
- both：不允許有浮動(dòng)對(duì)象
清除浮動(dòng)的應(yīng)用我們可以直接從上個(gè)問題中的文字環(huán)繞來解答蝶涩。在我們沒有清楚浮動(dòng)時(shí)理朋，我們的文字是圍繞著浮動(dòng)元素，那么我們添加了去除浮動(dòng)（代碼如下）绿聘，可以得到如下圖結(jié)果嗽上。
<!DOCTYPE html>
<html lang="en">
<head>
<title>text10</title>
<meta charset="UTF-8">
<link href="css/style.css" rel="stylesheet">
<style>
.ct {
width: 300px;
height: 300px;
border: 2px solid #eee;
}
.box1 {
float: left;
height: 50px;
width: 100px;
background-color: pink;
}
.box2 {
clear: both;
height: 100px;
width: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="ct">
<div class="box1"></div>
<div class="box2">
如果浮動(dòng)的元素后面有一個(gè)文檔流中元素,那么這個(gè)元素的框會(huì)表現(xiàn)的像浮動(dòng)元素不存在
</div>
</div>
</body>
</html>
<strong>本文版權(quán)歸作者和饑人谷所有，轉(zhuǎn)載請(qǐng)注明出處
