inline-block_html/css_WEB-ITnose に関する簡単な説明

1. block、inline、inline-blockを区別する

1. block

block要素は独自の行を占有し、複数のblock要素はそれぞれ新しい行になります。デフォルトでは、ブロック要素の幅がその親要素の幅に自動的に収まります。

block要素では幅と高さの属性を設定できます。ブロックレベル要素の幅が設定されている場合でも、依然として排他的な行を占有します。

block要素ではmarginとpadding属性を設定できます。

2. inline

inline 要素は 1 行を占めません。 1 行に収まらないまで、その幅は 1 行に追加されます。要素。

インライン要素のwidth属性とheight属性の設定は無効です。

インライン要素の margin 属性と padding 属性、水平方向の padding-left、padding-right、margin-left、および margin-right はすべてマージン効果を生成しますが、垂直方向の padding-top 、padding-bottom 、および margin-top は、 margin-bottom はマージン効果を生成しません。

3.inline-block

inline-block以降の要素は、行レベルのブロックコンテナを作成し、要素の内部（コンテンツ）はブロック要素としてフォーマットされ、要素自体はインライン要素としてフォーマットされます。

端的に言うと、inline-block要素は、ブロック要素で幅と高さを設定できるという特徴だけでなく、デフォルトではinline要素が折り返さないという特徴も持っています。もちろん、これらの機能だけではありません。たとえば、inline-block 要素でもvertical-align 属性を設定できます。つまり:

2. 互換性

携帯電話の高バージョン Webkit-kernel ブラウザの流動的なレイアウト メソッド flex() および box() ボックス モデルと比較して、inline-block の互換性は許容範囲であると言えます。重要ですが、インターネット上では依然として、ie6 と ie7 はインラインブロックをサポートしていないという話があります。これは実際に当てはまるのでしょうか。

msdn Microsoft Developer Community で、IE が 5.5 以降で inline-block をサポートしているという証拠を見つけました:

inline-block 値は Internet Explorer 5.5 以降でサポートされています。この値を使用してオブジェクトにレイアウトを与えることができます。オブジェクトの高さや幅を指定せずに。

この場合、なぜ ie6 と ie7 に適合したこのようなコードのセットが表示されるのでしょうか。

その理由は、IE では、display:inline-block が要素のレイアウトのみをトリガーすることがわかります。たとえば、display:inline-block が div に与えられた場合、div がブロック要素の特性 (幅と高さを設定できる) を持つことのみを保証できますが、それでも行レイアウト (改行が生成されます) であることは変わりません。 ）。次に、display:inline を設定して、この div のレイアウトをインライン レイアウト (改行なし) に変更します。

三、

さて、皆さんに基礎知識を付け加えたところで、今日は本題です

1. 魔法の水平ギャップ

要素がインラインブロックされた後、可変サイズのギャップが生成されます横方向に

写真に示すように、5 つの里の間のギャップは、インラインブロックによって引き起こされる不思議な現象です。

HTML 構造が 25edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb25edfb22a4f469ecb59f1190150159c6< と書かれていない限り、デフォルトでは inline-block 要素間に改行（スペースなどの空白文字）が生成されることが分かりました。 ;/li> これは奇妙に見えますが、このように書くと可読性が非常に低くなります。もちろん、文字なので、font-size:0 では不十分です。 、ただしすべてのブラウザが font-size:0 をサポートしているわけではありません。どうすればよいですか?現時点では、letter-spacing 属性を使用する必要があります。ほとんどの場合、ギャップは 4px であるため、letter-spacing:-4px を設定するだけで済みます (ギャップのサイズは、フォント サイズとフォントの変更に応じて変わります)。同じブラウザと Opera ブラウザの互換性の問題については、Zhang Xinxu の記事 http://www.zhangxinxu.com/wordpress/2010/11/%E6%8B%9C%E6%8B%9C%E4%BA% を参照してください。 86%E6% B5%AE%E5%8A%A8%E5%B8%83%E5%B1%80-%E5%9F%BA%E4%BA%8Edisplayinline-block%E7%9A%84%E5%88 %97%E8 %A1%A8%E5%B8%83%E5%B1%80/")

2. リストの両端にアダプティブレイアウトを実装する (float を放棄する)

なぜ float を放棄するのでしょうか?

まず、フロートについては、フロートのクリアや高さの崩れなどの一般的な問題に直面し、最も重要なことは、再描画やリフローなどの効率の問題を引き起こすことです。これが、私がそれを放棄した最も重要な理由でもあります。代わりに inline-block を使用できる場合は、float を使用する必要がありますか? 次に、別の hero-text-align:justify を導入してください。子要素の高さが不一致の場合は、verticle-align を使用して垂直位置を調整できます。

覚えておいてください: リスト (またはテキスト) の両端を揃えるための前提条件は、コンテンツが複数行であることです

ほら、これはとても簡単ですが、誰もが の配置の問題にも気づくでしょう。最後の行、心配しないで、一つ一つ解決していきます

(1)最後の行も両側に配置します:

.justify_fix{display:inline-block; width:100%; height:0; overflow:hidden;}

htmlにclass="justify_fix"の要素を追加するだけです

　　（2）最后一行左对齐排列：

.left_fix{height:0; padding:0; overflow:hidden;}

　　　　html中补上n个class="left_fix"元素

　　　　n的个数就是每行元素的列表个数啦

　　好啦，问题解决了，怎么样，inline-block简单好用吧，只要记住和它搭配的这些个属性处理一般的布局应该不成问题。

　　第一篇文，各路大神请指教~