focusin與display:inline

 HTML代碼：

<p><input type="text" /> <span>focusout fire</span></p>
<p><input type="password" /> <span>focusout fire</span></p>

jQuery代碼：

$("p").focusin(function() {
  $(this).find("span").css('display','inline').fadeOut(1000);
});

當鼠標點擊文本框時，後邊的文字褪去。再點擊時，再顯示再褪去。

不太清楚display:inline起什麼做用，去掉css('display','inline')後，

鼠標點擊文本框時，後邊的文字褪去。再次點擊時，再也不出現。

 

display:inline  它能夠讓行內顯示爲塊的元素，變爲行內顯示，例如

<div> DIV1 </div>
<div> DIV2 </div>

這裏DIV1和DIV2分別佔一行，可是你給他們加上屬性後變了

<div   style= "display:inline "> DIV1 </div>
<div   style= "display:inline "> DIV2 </div>

DIV1和DIV2顯示在同一行

和 display:inline   對應的是   display:block，block會讓應用了該   CSS屬性的HTML標記變成塊級別元素，例如SPAN是行內顯示的，可是你加了   display:block屬性就不同了

<span   style= "display:block "> SPAN1 </span>
<span   style= "display:block "> SPAN2 </span>

display:inline比較經典的用法是用在 <ul> 下的 <li> 中

內聯
block通常一個塊佔一行，除非float
inline是自動排爲一行，就象段內的文字同樣，可成爲多行。

display:inline   的做用是設置對象作爲行內元素顯示，
inline是內聯對象的默認值（ps:內聯對象就是不自動產生換行的元素，好比span）
而咱們通常用的div是塊級元素，默認display屬性是block,
但將div的display設置爲inline的話，則多個div能夠象span同樣顯示在一行了。

display:inline對應不顯示爲 display:none

display:block對應不顯示爲 hidden 樣式爲none的元素不佔位置,而樣式爲hidden的元素雖然不顯示但仍是佔地方。