Cssの2つの重要な概念:ブロック要素とインライン要素

一、display：block

display:blockは要素をブロックレベルの要素として表示し、一般的には他の要素の容器であり、インライン要素と他のブロック要素を収容することができ、ブロック要素は他の要素が同じ行に位置することを排斥し、幅(width)の高さ(height)が作用する.一般的なブロック要素はdivとpです.

   (block element)

address -   

blockquote -    

center -      

dir -     

div -       ，  CSS layout     

dl -     

fieldset - form   

form -     

h1 -    

h2 -    

h3 - 3   

h4 - 4   

h5 - 5   

h6 - 6   

hr -      

isindex - input prompt

menu -     

noframes - frames    ，（     frame           

noscript -       （     script         ）

ol -     

p -   

pre -      

table -   

ul -      

二、display：block

display:inlineは、要素をインライン要素として表示します.インライン要素はテキストまたは他のインライン要素しか収容できません.他のインライン要素は同じ行に配置できますが、幅(width)の高さ(height)は機能しません.一般的なインライン要素は「a」です.

    (inline element)

a -   

abbr -   

acronym -   

b -   (   )

bdo - bidi override

big -    

br -   

cite -   

code -      (          )

dfn -     

em -   

font -     (   )

i -   

img -   

input -    

kbd -       

label -     

q -    

s -    (   )

samp -          

select -     

small -      

span -       ，       

strike -    

strong -     

sub -   

sup -   

textarea -        

tt -     

u -    

var -     

三、display：inline-block

display:inline-blockはオブジェクトをインラインオブジェクトとして渡しますが、オブジェクトの内容はブロックオブジェクトとして渡します.隣のインラインオブジェクトは同じ行に渡され、スペースが許可されます.(正確には、このプロパティを適用する要素はインラインオブジェクトとして表示され、周囲の要素は同じ行に維持されますが、幅と高さのブロック要素のプロパティを設定できます)
inline-block互換性の問題:
この属性をサポートします.現在サポートされているブラウザはOpera、Safariです.
IEではインライン要素に対してdisplay:inline-blockを使用し、IEは認識されないが、display:inline-blockを使用するとIEの下でlayoutがトリガーされ、インライン要素にdisplay:inline-block属性の表症を持たせる.以上の分析から、IEの下で、ブロック要素にdisplayを設定しても、inline-block属性がinline-blockの効果を実現できない理由が理解できる.このとき、ブロック要素はdisplay:inline-blockによってlayoutがトリガーされただけで、もともと行レイアウトであるため、トリガーされた後もブロック要素は行レイアウトであり、Operaのようにブロック要素がインラインオブジェクトに渡されることはありません.
IEの下のブロック要素はどのようにdisplay:inline-blockの効果を実現しますか?
方法1:
まずdisplay:inline-block属性を使用してブロック要素をトリガーし、その後display:inlineを定義し、ブロック要素をインライン要素に呈示し、ブロック要素をインラインオブジェクトに呈示する(2つのdisplayは2つのCSS宣言に前後して配置しなければ効果がない.これはIEの古典的なバグであり、display:inline-blockを定義した後、displayをinlineまたはblockに戻し、layoutは消えない).コードは次のとおりです(...は省略された他の属性の内容です):

　　div {display:inline-block;...} 

　　div {display:inline;}

方法2:
ブロック要素をインラインオブジェクトに直接渡し(プロパティdisplay:inlineを設定)、ブロック要素のlayout(zoom:1など)をトリガーします.コードは次のとおりです.

div {display:inline; zoom:1;...}