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;...}
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
