css_html/css_WEB-ITnose のインライン、ブロック、インラインブロックの違い

http://www.cnblogs.com/fxair/archive/2012/07/05/2577280.html

display:inline は、要素をブロックレベルの要素として表示します。

block 要素特徴は次のとおりです:
常に新しい行から始まります;
高さ、行の高さ、上下の余白はすべて制御可能です
幅が設定されていない限り、デフォルトの幅はコンテナの 100% です

、< p>、

、

、

、および
• はブロック要素の例です。
  
  display:inline は要素をインライン要素として表示します

  インライン要素の特徴は次のとおりです:
  と他の要素は同じ行にあります。
  高さ、行の高さ、上下の余白は変更できません。 ;
  幅はそれです テキストまたは画像の幅は変更できません。
  、、、、、、および はインライン要素の例です。

  inline と block は要素の線の幅と高さを制御できます。 切り替える必要がある状況は次のとおりです。

  inline 要素を新しい行で開始します。
  block 要素と他の要素を同じ位置に保ちます。 line;
  インライン要素の幅を制御します (特にナビゲーション バーに便利です);
  インライン要素の高さを制御します
  幅を設定せずに、ブロック要素のテキストと同じ幅の背景色を設定できます。

  display:inline-block はオブジェクトをインライン オブジェクトとしてレンダリングしますが、オブジェクトのコンテンツはブロック オブジェクトとしてレンダリングされます。隣接するインライン オブジェクトは同じ行にレンダリングされ、スペースを入れることができます。

  inline-block 要素の機能:

  オブジェクトをインライン オブジェクトとして表示しますが、オブジェクトのコンテンツはブロック オブジェクトとして表示されます。隣接するインライン オブジェクトは同じ行にレンダリングされ、スペースを入れることができます。 (正確には、この属性が適用される要素はインライン オブジェクトとしてレンダリングされ、周囲の要素は同じ行上に残りますが、プロット要素の幅と高さの属性は設定できます)

  すべてのブラウザがこれをサポートしているわけではありませんOpera と Safari は、IE のインライン要素に display:inline-block を使用します。IE では認識されませんが、display:inline-block を使用すると、IE でレイアウトがトリガーされ、インライン要素に表示が表示されます。インラインブロック属性。上記の分析から、IE ではブロック要素に display:inline-block 属性を設定しても inline-block の効果が得られない理由を理解するのは難しくありません。現時点では、ブロック要素のレイアウトは display:inline-block によってのみトリガーされ、元々は行レイアウトであるため、トリガー後もブロック要素は行レイアウトのままであり、インラインとしてレンダリングされません。 Opera のブロック要素のようなオブジェクト。

  IE下のブロック要素でdisplay:inline-blockの効果を実現するにはどうすればよいですか?

  2 つの方法があります:
  1. まず、display:inline-block 属性を使用してブロック要素をトリガーし、次に、display:inline を定義してブロック要素をインライン オブジェクトとしてレンダリングします (2 つのディスプレイを 2 つに配置する必要があります) CSS ステートメントが次々と表示される これは、IE の典型的なバグです。最初に display:inline-block を定義し、その後表示を inline または block に戻すと、レイアウトは消えません。コードは次のとおりです (...他の属性は省略されています):

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

  
  2. ブロック要素を直接インラインに設定します。 object Render (属性 display:inline を設定) を実行し、ブロック要素のレイアウト (zoom:1 など) をトリガーします。コードは次のとおりです:

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

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。