從CSS中position屬性談起
一、定位基本原理
對(duì)于前端開(kāi)發(fā)工程師來(lái)說(shuō)，編寫(xiě)CSS是前端開(kāi)發(fā)工作中必不可少的一個(gè)內(nèi)容，在CSS中的position屬性又是非常重要的一個(gè)方面。顧名思義，所謂position，即是對(duì)HTML元素定位方式的一種設(shè)置。它是CSS定位技術(shù)的基石，看似很容易學(xué)習(xí)，很多的前端工程師也會(huì)說(shuō)自己掌握得很好，但事實(shí)上是這樣嗎？作為一個(gè)在前端開(kāi)發(fā)的道路上慢慢前行的新人，我不敢這么說(shuō)，那么就通過(guò)這篇文章與大家一起，了解position的奧秘。
首先，既然是CSS中的屬性之一，那么我們就有必要研究一下W3C的CSS文檔，畢竟這才是對(duì)此屬性說(shuō)明最為詳細(xì)的地方。在這里要插一句，目前市面上充斥著大量的教學(xué)書(shū)籍，網(wǎng)絡(luò)上也有很多相關(guān)的學(xué)習(xí)資源，其中固然不乏精品，但是會(huì)花點(diǎn)時(shí)間，認(rèn)真閱讀官方文檔的又有多少人呢，有的時(shí)候，最乏味的往往是最準(zhǔn)確的。
好了，話不多說(shuō)，官方文檔中關(guān)于position屬性的內(nèi)容大致是這樣的：
In CSS 2.1, a box may be laid out according to three positioning schemes:
- Normal flow
- Floats
- Absolute positioning
1. 常規(guī)文檔流。包括塊級(jí)元素排版，行內(nèi)元素排版以及對(duì)塊級(jí)元素和行內(nèi)元素相對(duì)位置的排版。
2. 浮動(dòng)。在浮動(dòng)模型中，元素先按照正常文檔流定位，然后從文檔流中移出，根據(jù)設(shè)置向左或者向右盡可能地移動(dòng)。
3. 絕對(duì)定位。元素會(huì)完全從文檔流中移出，再根據(jù)父元素進(jìn)行定位。
一個(gè)元素如果是根元素，或者有浮動(dòng)或絕對(duì)定位的話，那它就是在常規(guī)文檔流之外的，其他情況都是在文檔流之內(nèi)。文檔中有這么一句：The flow of an element A is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A. 有些繞，以我并不深厚的英語(yǔ)能力來(lái)翻譯的話，應(yīng)該是：元素A的flow是由元素A本身以及所有最近的文檔流之外的父元素是A的流內(nèi)元素所組成的。（翻譯得太慘不忍睹了，求大神指點(diǎn)o(>﹏<)o）。
二、position屬性詳解
在CSS 2.1中，元素的定位方式是由position和display屬性共同作用所決定的，我們先來(lái)看position屬性
position屬性的可取值：static | relative | absolute | fixed | inherit
默認(rèn)值：static
每個(gè)值的意義：
static: 常規(guī)方式定位box，此時(shí)設(shè)置top, right, bottom, left屬性是無(wú)效的。
relative: 元素本身的的位置的定位方式和static是一樣的，但是實(shí)際位置會(huì)相對(duì)于原位置有所偏移，是通過(guò)top, right, bottom, left的設(shè)置實(shí)現(xiàn)的。注意：display設(shè)置為table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell和table-caption的元素是無(wú)法應(yīng)用position: relative的，這也很好理解，這些表格類元素如果會(huì)相對(duì)于正常位置偏移的話不是很奇怪么！
absolute: 元素脫離文檔流，“幾乎”獨(dú)立了。位置通過(guò)top, right, bottom, left來(lái)設(shè)置，當(dāng)然，參照基點(diǎn)是包含元素的父元素~絕對(duì)定位的元素對(duì)相鄰元素的定位沒(méi)有任何影響，相互之間的層疊關(guān)系是通過(guò)z-index來(lái)設(shè)置的，同時(shí)，絕對(duì)定位元素的margin之間也不會(huì)發(fā)生折疊。
fixed: 這是個(gè)比較有趣的值。它的定位計(jì)算方式和絕對(duì)定位是一樣的，但是也有不同。元素的位置一旦確定了，在屏幕顯示器上，它會(huì)保持固定不動(dòng)，在印刷媒體類型上，它會(huì)在每頁(yè)出現(xiàn)在固定位置，在其他的媒體類型上，表現(xiàn)方式則沒(méi)有定義。不過(guò)，如果希望一個(gè)box在屏幕和印刷媒體上的表現(xiàn)不同的話，可以使用@media rule的方式，例如：
@media screen { h1#first { position: fixed; } } @media print { h1#first { position: static; } }
還有一個(gè)inherit值，不用多說(shuō)，就是從父元素繼承position值了。
三、定位方式：top, right, bottom, left
這四個(gè)屬性其實(shí)可以放在一塊兒說(shuō)，其實(shí)是差不多的，只是定位的相對(duì)基線變了而已。文檔上的說(shuō)明有些啰嗦了，不過(guò)that's what official document is對(duì)吧？
可設(shè)定的值為：length, percentage, auto, inherit
不論設(shè)定的值為什么，意義都是元素的上右下左距離父元素的上右下左的邊距。
這里要提一下auto值，對(duì)于非替換元素(non-replaced elements)和替換元素(replaced elements)auto的表現(xiàn)是不一樣的，非替換元素指的是瀏覽器根據(jù)標(biāo)簽的元素和屬性來(lái)判斷具體顯示的內(nèi)容，如：
<input type="text" />
這是一個(gè)文本輸入框，換成其他的屬性的話，瀏覽器的顯示就會(huì)不一樣。
替換元素的例子：
<p>I'm classicemi</p>
(X)HTML的大多數(shù)元素都是非替換元素，他們將內(nèi)容直接告訴瀏覽器，瀏覽器再顯示出來(lái)。
下面回到auto上來(lái)，對(duì)于非替換元素，auto值的效果取決于哪些相關(guān)的屬性同樣具有auto值，比較難理解是嗎，好的，我們給出下面的例子：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>A frame document with CSS 2.1</title> 5 <style type="text/css" media="screen"> 6 body { height: 8.5in } 7 #header { 8 position: fixed; 9 width: 100%; 10 height: 15%; 11 top: 0; 12 right: 0; 13 bottom: auto; 14 left: 0; 15 } 16 #sidebar { 17 position: fixed; 18 width: 10em; 19 height: auto; 20 top: 15%; 21 right: auto; 22 bottom: 100px; 23 left: 0; 24 } 25 #main { 26 position: fixed; 27 width: auto; 28 height: auto; 29 top: 15%; 30 right: 0; 31 bottom: 100px; 32 left: 10em; 33 } 34 #footer { 35 position: fixed; 36 width: 100%; 37 height: 100px; 38 top: auto; 39 right: 0; 40 bottom: 0; 41 left: 0; 42 } 43 </style> 44 </head> 45 <body> 46 <div id="header"> ... </div> 47 <div id="sidebar"> ... </div> 48 <div id="main"> ... </div> 49 <div id="footer"> ... </div> 50 </body> 51 </html>
在瀏覽器中顯示的布局大致是：
代碼中，使用了auto的屬性有: #header bottom, #sidebar right, #footer top. 而對(duì)于#main呢，它的height和width都是auto，也就是說(shuō)main的長(zhǎng)寬是自適應(yīng)的，自動(dòng)填充可用空間，這也就好理解了，所謂的auto，也就是使元素的上右下左距離能夠根據(jù)相關(guān)聯(lián)的，或者說(shuō)共同父元素的子元素之間的關(guān)系自動(dòng)調(diào)整。
四、Normal Flow
前面提到了很多次“常規(guī)文檔流”，實(shí)際上也就是W3C文檔中的Normal Flow，也可稱為常規(guī)流。常規(guī)流的理解，主要圍繞著兩個(gè)方面，分別是格式化上下文(Formatting Context)和相對(duì)定位(Relative Positioning)。
格式化上下文，按照W3C文檔的解釋，分為Block Formatting Contexts(BFC)和Inline Farmatting Contexts(IFC)，這里我覺(jué)得沒(méi)有什么翻譯成中文的必要了，因?yàn)槿绻艺f(shuō)“塊級(jí)格式化上下文”的話，諸位能理解是什么意思嗎，所以，叫BFC和IFC就挺好。
所謂BFC，文檔上解釋得挺啰嗦，簡(jiǎn)單來(lái)說(shuō)，就是塊級(jí)box順次垂直排列。當(dāng)然也不能這么簡(jiǎn)單，原因是塊級(jí)box的內(nèi)部還會(huì)產(chǎn)生BFC，也就是說(shuō)可以嵌套。
<!DOCTYPE html> <html> <head> <title>BFC</title> <meta charset="utf-8" /> </head> <body> <div style="width: 400px; height: 300px; background: blue;"> <div style="width: 200px; height: 100px; background: red;"></div> <div style="width: 100px; height: 150px; background: green;"></div> </div> </body> </html>
但是，當(dāng)塊級(jí)box內(nèi)部都是行內(nèi)box的時(shí)候，就不會(huì)產(chǎn)生BFC，而是產(chǎn)生IFC，但只要子元素中有一個(gè)塊級(jí)box，就會(huì)產(chǎn)生BFC。Attention! 文檔中指出，如果外層塊級(jí)box的overflow: visible; 的話，不會(huì)產(chǎn)生BFC甚至IFC。
下面來(lái)看看IFC，IFC中包括文字以及行內(nèi)元素，對(duì)于文字來(lái)說(shuō)，排版實(shí)際上有很多名堂，尤其是對(duì)于英文字符，或者說(shuō)字母類文本，如果各位對(duì)文字排版有興趣的話，推薦各位一部視頻教程，由美國(guó)著名IT教學(xué)網(wǎng)站lynda.com出品的網(wǎng)頁(yè)設(shè)計(jì)排版視頻教程《Typography.for.Web.Designers》，至于下載方法，這里就不多說(shuō)了，相信大家各顯神通都有辦法。
如果在行內(nèi)元素中同時(shí)包含文字的話，情況會(huì)比較復(fù)雜：
<!DOCTYPE html> <html> <head> <title>IFC</title> <meta charset="utf-8" /> </head> <body> <div style="width: 400px; height: 300px; background: blue; overflow: visible;"> <span style="font-size: 20px;">Something</span> <div style="display: inline-block; width: 200px; height: 100px; background: red;"></div> </div> </body> </html>
注意觀察span和div的底部對(duì)齊差異。
行內(nèi)框在行框垂直方向的對(duì)齊：
行框高度總是足夠包含其容納的所有框，它可能會(huì)高于它包含的最高的框。在這里會(huì)跟vertical-align屬性相關(guān)：
vertical-align可能的取值：
- baseline
- sub
- super
- top
- text-top
- middle
- bottom
- text-bottom
- length
- %
- inherit
舉一個(gè)例子：
<!DOCTYPE html> <html> <head> <title>Vertical-align</title> <meta charset="utf-8" /> </head> <body> <p style="background: grey; width: 600px;"> <span style="font-size: 50px; border: 1px solid red;">hello</span> <span style="font-size: 30px; border: 1px solid green; vertical-align: top;">world</span> </p> </body> </html>
在水平方向上的對(duì)齊：
行內(nèi)框?qū)挾瓤偤托∮诎虻膶挄r(shí)，水平方向的對(duì)齊取決于text-align屬性。
關(guān)于相對(duì)定位，以及其他與定位相關(guān)的比如margin collapse等內(nèi)容，將會(huì)在后續(xù)的文章中介紹。
參考資料：
1. http://www.w3.org/TR/CSS2/visuren.html#positioning-scheme
浙公網(wǎng)安備 33010602011771號(hào)