刀狂劍癡葉小釵
 
   
  
  
  
    

  
 
 
 

   
  
  
  
 
   
  
  
  
    刀狂劍癡葉小釵
 
  
 
 
 

 
 
 
 

  
  
  
  
 
  
  
  
  
     
  
  
  
  
        刀狂劍癡葉小釵
 
  
  
  
  

 
 
 
 

  
  
  
  
 
  
  
  
  
     
  
  
  
  
        刀狂劍癡葉小釵
 
  
  
  
  

 
 
 
 

  
  
  
  
 
  
  
  
  
  
  
  
  
  
      
  
  
  
  
      
  
  
  
  
         body { background: #ECECEC; } 
  
  
  
  
         .outer { background: white; border: 1px solid #CCCCCC; width: 300px; } 
  
  
  
  
         .inner { margin: 10px; padding: 8px; background: none repeat scroll 0 0 #1C87D5; color: white;} 
  
  
  
  
      
  
  
  
  
  
  
  
  
  
  
  
  
  
  
      
  
  
  
  
          
  
  
  
  
             來個(gè)測試走 
  
  
  
  
     

 
 
 
 

  
  
  
  
 
  
  
  
  
     
  
  
  
  
        刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵 
  
  
  
  
     
  
  
  
  

 
 
 
 

  
  
  
  
匿名文本： 
  
  
  
  
未被包含在行內(nèi)元素的字符串 
  
  
  
  
 
  
  
  
  
em框： 
  
  
  
  
em框在字體中定義，也被稱為字符狂 
  
  
  
  
 
  
  
  
  
內(nèi)容區(qū)： 
  
  
  
  
內(nèi)容區(qū)可以是元素中各個(gè)字符的em框串在一起構(gòu)成的框，也可以由元素中字符字形描述的框。 
  
  
  
  
 
  
  
  
  
行間距： 
  
  
  
  
font-size與line-height之差/2便是行間距 
  
  
  
  
 
  
  
  
  
行內(nèi)框： 
  
  
  
  
通過向內(nèi)容區(qū)增加行間距來描述，對(duì)于非替換元素行內(nèi)框剛好等于line-height 
  
  
  
  
 
  
  
  
  
行框： 
  
  
  
  
這是包含該行中出現(xiàn)的行內(nèi)框的***點(diǎn)和***點(diǎn)的最小框，意思是行框上邊界要高于***行內(nèi)框，***也要大于***的行內(nèi)框 
 
 
 
 

 
 
 
 

  
  
  
  
 
  
  
  
  
    刀狂劍癡葉小釵刀狂劍癡葉小釵刀狂劍癡葉小釵 
  
  
  
  

對(duì)于匿名文本來說，內(nèi)容高度沒有變化，半間距為0，但是對(duì)于span來說，line-height減去font-size后我們得到的半間距為-6，所以其行內(nèi)框依舊是12px，內(nèi)容區(qū)卻大了出來。

vertical-align

margin的方式不能垂直對(duì)齊，行內(nèi)元素便提供了vertical-align屬性：

 
 
 
 

  
  
  
  
top 
  
  
  
  
將元素行內(nèi)框的頂端與包含該元素的行框的頂端對(duì)齊 
  
  
  
  
 
  
  
  
  
bottom 
  
  
  
  
將元素行內(nèi)框的低端與包含該元素的行框的底端對(duì)齊 
  
  
  
  
 
  
  
  
  
text-top 
  
  
  
  
將元素行內(nèi)框的頂端與父元素內(nèi)容區(qū)的頂端對(duì)齊 
  
  
  
  
 
  
  
  
  
text-bottom 
  
  
  
  
將元素行內(nèi)框的底端與父元素內(nèi)容區(qū)的底端對(duì)齊 
  
  
  
  
 
  
  
  
  
middle 
  
  
  
  
將元素行內(nèi)框的垂直中點(diǎn)與父元素基線上0.5ex處一點(diǎn)對(duì)齊 
 
 
 
 

補(bǔ)充知識(shí)（http://www.zhangxinxu.com）

浮動(dòng)和定位

參考：http://www.zhangxinxu.com/

經(jīng)過以上的知識(shí)，我們知道了，所有文檔元素都有一個(gè)框！被稱為元素框，它描述了一個(gè)元素在文檔布局中所占空間大小，所以框與框之間是會(huì)互相影響的。

接下來我們進(jìn)入本文重點(diǎn)，浮動(dòng)與定位，以現(xiàn)在的布局來說，說白了就是浮動(dòng)和定位，所以掌握了他們就是掌握了布局。

浮動(dòng)float

float是個(gè)奇怪的東東，他最開始的提出是用作讓圖片浮動(dòng)，以便文字能圍繞著圖片書寫，僅此而已！

所以我們來看看float這個(gè)讓人又愛又恨的家伙都干了些什么？？？

浮動(dòng)元素會(huì)以莫種方式從文檔的正常流中刪除，他是他還是對(duì)文檔布局有一定影響

我們使用float浮動(dòng)做了很多其本職工作以外的事情，于是我們會(huì)混淆，我們會(huì)回看不清float真正的面目。
浮動(dòng)真正的意義在哪里呢？要知道這個(gè)問題的答案很簡單，假設(shè)現(xiàn)在CSS中沒有浮動(dòng)(float)屬性，那么會(huì)變成一個(gè)什么樣子。
我們會(huì)發(fā)現(xiàn)，目前流行采用浮動(dòng)方法實(shí)現(xiàn)的無論是分欄布局，還是列表排列我們都可以用其他一些CSS屬性（不考慮table）代替實(shí)現(xiàn)，
唯一一個(gè)實(shí)現(xiàn)不了的就是“文字環(huán)繞圖片”，我是想不出來能有什么方法可以讓文字環(huán)繞圖片顯示。好，這個(gè)替代不了的作用才是float真正的意義所在
——張鑫旭

看看以上說法，他這個(gè)是非常有意義的，我們回過頭來一看，好像確實(shí)是這么回事的，float真的干了很多不該干的事情呢，所以我們的布局才有那么多莫名其妙的BUG。

float的內(nèi)幕

在詳細(xì)了解他之前，我們看一看包含塊（containing block），浮動(dòng)元素的包含塊是最接近的塊級(jí)祖先元素：

 
 
 
 

  
  
  
  
dssd 
  
  
  
  
 
  
  
  
  
ssd
 
 
 
 
 

img的包含塊就是最近的p標(biāo)簽，然后浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框（inline元素也會(huì)），其實(shí)我們可以認(rèn)為float就是不帶方向性的inline-block（事實(shí)上這是非常錯(cuò)誤的認(rèn)識(shí)）。

浮動(dòng)元素的擺放有許多規(guī)則

① 浮動(dòng)元素不能超過包含塊的邊距
② 浮動(dòng)元素的左右外邊距必須是源文檔中之前出現(xiàn)的左浮動(dòng)元素的右外邊距（這句話我不太理解，我們下來看看）
③ 左浮動(dòng)元素不會(huì)出現(xiàn)在右浮動(dòng)元素的右邊
④ 浮動(dòng)元素的頂端不能比其父元素的內(nèi)頂端還高
⑤ 浮動(dòng)元素的頂端不能比之前所有浮動(dòng)元素或者塊級(jí)元素的頂端更高
⑥ 源文檔中一個(gè)浮動(dòng)元素之前出現(xiàn)另一個(gè)元素，浮動(dòng)元素的頂端不能比包含塊元素所生成框的任何行高還高
⑦ .......

后面還有幾個(gè)規(guī)則呢，我這里都不想寫了，說實(shí)話我看著這么多規(guī)則***映像就不想用這個(gè)屬性了。。。

float我們都“比較”熟悉，所以對(duì)他的表現(xiàn)一般還是抓得準(zhǔn)的，因?yàn)槲覀冋J(rèn)為其實(shí)帶方向的inline-block，于是我們來看看浮動(dòng)的破壞性。

inline boxes

行內(nèi)元素會(huì)生成一個(gè)叫行內(nèi)框的東西，前面我們已經(jīng)知道了

在containing boxes中，一個(gè)個(gè)inline boxes組成了line boxs(行框)，這是浮動(dòng)影響布局的關(guān)鍵box類型

content area 內(nèi)容區(qū)是一種圍繞文字看不見的box，大小就是font-size

在張鑫旭大哥的博客中有兩張很有意思的圖，我這里拿來主義搞來看看

按照此圖的研究，得出了以下結(jié)果：

圖片為一個(gè)inline boxes，文字也是inline boxes，行高（line boxes）是由其內(nèi)部***的inline boxes高度決定的所以行高這里便是圖片的高度
此時(shí)圖片與文字是同一box類型的元素，在同一行上，所以這里他們是對(duì)齊的

但是，float圖片后會(huì)有意想不到的變化
我們看到第二張圖，float破壞了圖片的inline boxes，圖片的inline boxes米有了！
當(dāng)圖片失去inline boxes特性時(shí)就無法與inline boxes文字在一起了，他們已經(jīng)不是一個(gè)家庭的人了。。
圖片于是靠邊站了（float帶給元素的是降級(jí)啊）
在CSS中所有高度都是由CSS模型產(chǎn)生的：box盒模型，line box 模型（line-height），inline boxes直接受控于line-height
真正的高度則是由每行的inline boxes組成的line boxes，而每行的line boxes高度垂直堆疊形成了containing box的高度
所以，沒了inline boxes的意思就是沒了高度，就跟男人沒有鳥是一個(gè)道理的。float就恰恰干了這種事情。。。。直接把人家的inline boxes給搞了，讓別人沒了高度

所以，float可以讓文字圍繞著圖片，因?yàn)閳D片沒有了高度，但是他是有寬度的喲，元素沒有了高度就會(huì)造成另一個(gè)事實(shí)：父級(jí)塊級(jí)元素高度塌陷！我們想想塊級(jí)元素里面都沒有高度了，他塌陷是非常合理的?。∷晕覀冇謺?huì)搞很多事情來清除浮動(dòng)帶來的高度塌陷。所以我們一伙布局可以盡量的少使用float，讓他干他本質(zhì)的事情吧，因?yàn)橄胱鎏O(jiān)的人也不多。。。

Position登場

***，標(biāo)題的主角終于登場了，寫到這里我其實(shí)都沒什么想說了，也不太說得出來了。。。。這就是舍本逐末吧！

首先position有幾個(gè)屬性呢？這個(gè)問題我承認(rèn)有一點(diǎn)白癡。

static
relative
absolute
fixed

其實(shí)對(duì)于position來說，他的東西是很簡單的，用來用去就那么幾個(gè)場景，操作的是塊級(jí)元素，很單一的。所以我們來看看本篇開始提出的問題

① relative與absolute的定位原點(diǎn)，無圖無真相，為了解決這個(gè)問題，我們寫個(gè)例子

 
 
 
 

  
  
  
  
 
  
  
  
  
 
  
  
  
  
 
  
  
  
  
     
  
  
  
  
     
  
  
  
  
 
  
  
  
  
 
  
  
  
  
    
 
  
  
  
  
        塊級(jí)元素 
  
  
  
  
      
  
  
  
        position: relative;"> 
  
  
  
  
         
  
  
  
  
            刀狂劍癡葉小釵