CSS表示の応用の詳しい説明：inline-block_html/css_WEB-ITnose

この記事では、display:inline-block の基礎知識、問題と解決策、一般的なアプリケーション シナリオについて詳しく説明し、inline-block アプリケーションの理解をさらに深めます。

基礎知識

表示: インラインブロックとは何ですか?この属性は誰もがよく知っていると思いますが、inline-block という名前から、inline と block の特性を組み合わせたものであると推測できます。簡単に言うと、inline-block 属性が設定された要素には、block と block の両方のプロパティがあります。要素は、インライン要素の非破壊特性を維持しながら、幅と高さの特性を設定できます。

例: 水平メニュー リストを作成していたときは、li と float:left を使用して作成できましたが、現在は li と display:inline-block を使用して作成できます。

HTML コード:

1 <ul>2     <li>首页</li>3     <li>关于</li>4     <li>热点</li>5     <li>联系我们</li>6 </ul>

CSS code

1 ul, li { padding: 0; margin: 0; list-style-type: none; }2         li { display: inline-block; border: 1px solid #000; }

Rendering

inline-block 基本効果

li 要素を水平に配置でき、width 属性を設定できることがわかります。コードを自分でコピーできます。効果を確認するか、デモを確認してください

インラインブロック問題

上記の例を観察してください。慎重な生徒は、各 li の間に小さなギャップがあることに間違いなく気づくでしょう。そして、私たちのコードはマージンやその他の関連するものを設定していません。これはなぜですか？

デフォルトのインライン要素

まず、デフォルトのインライン要素のパフォーマンスを観察してみましょう:

HTML コード

1 <a>首页</a>2 <a>热点</a>

CSS コード

1 a { margin: 0; padding: 0; border: 1px solid #000; }

レンダリング

デフォルトの状況

デフォルトでは、 inline 要素間のギャップであるため、inline 属性と block 属性を組み合わせた inline-block 属性にも当然この機能があります。
それでは、これらの空白文字は何でしょうか?

空白文字を削除する

ブラウザでは空白文字は無視されず、ブラウザは自動的に複数の連続する空白文字を 1 つに結合します。コードを記述するとき、スペースと改行によって空白文字が生成されます。したがって、上記の例の a タグを 1 行で記述すると、当然、2 つの要素の間に空白が生じます。空白がなくなり、メニューがコンパクトになります。

空白文字はブラウザの通常の動作ですが、通常、これらのギャップはデザイナーのデザイン ドラフトには表示されません。デザイン ドラフトを復元するときにこれらのギャップを削除するにはどうすればよいですか。
空白文字によって生じるギャップを削除するには、まず、空白文字も最終的には文字であることを理解しなければなりません。生成されるギャップのサイズは、font-size 属性を設定することで制御できます。
まず、フォントサイズを 50px に設定してみましょう。CSS コードを次のように変更します。

1 ul, li { padding: 0; margin: 0; list-style-type: none; font-size:50px}2 li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }

元のフォントを維持するために、ul のフォントサイズを 50px に変更し、li のフォントサイズを 12px に変更します。効果は次のとおりです:

font-size:50px gap

メニュー間のギャップが大きくなっていることがわかります。
次に font-site 属性を 0px に設定します。コードは次のとおりです

1 ul, li { padding: 0; margin: 0; list-style-type: none; font-size:0px}2 li { display: inline-block; border: 1px solid #000; width: 100px; text-align: center;font-size:12px }

効果は次のとおりです:

font-size:0 のギャップ

間のギャップが確認できます。メニューは消えています。自分で確認できます。 デモ

互換性の問題

IE6 や IE7 などの下位バージョンのブラウザの占有率を考慮すると、インラインブロックは完全に互換性があります。互換性を保つ方法については、この記事は廃止されます。ご興味がございましたら、関連情報をご覧ください。

インラインブロックの応用

インラインブロックの応用シナリオは何ですか?テクノロジーの適用シナリオを検討するとき、最初に考慮しなければならないのは、テクノロジーの特性と要件が一致しているかどうかです。 inline-block の特徴は、inline と block の 2 つの属性を組み合わせて設定できることであり、要素はインライン配置の特性を維持します。このことから、インライン配置が必要なすべてのシナリオで inline の使用を検討できます。 -ブロックアプリケーションシナリオを設定できます。以下は例です:

Web ページのヘッダー メニュー

Web ページの先頭にあるメニューは、水平方向に配置され、サイズを設定する必要がある典型的なアプリケーションです。インライン ブロック以前は、メニューは基本的に を使用して実装されていました。 float 属性は、高度な崩壊、フローティングなどの問題を解決する必要がありますが、インラインブロックの実装を使用することで、そのような問題を心配する必要はありません。コードは次のとおりです:

HTML コード

 1 <div class="header"> 2     <ul> 3         <li> 4             <a href="javascript:;" target="_blank">服装城</a> 5         </li> 6         <li> 7             <a href="javascript:;" target="_blank">美妆馆</a> 8         </li> 9         <li>10             <a href="javascript:;" target="_blank">超市</a>11         </li>12         <li>13             <a href="javascript:;" target="_blank">全球购</a>14         </li>15         <li>16             <a href="javascript:;" target="_blank">闪购</a>17         </li>18         <li>19             <a href="javascript:;" target="_blank">团购</a>20         </li>21         <li>22             <a href="javascript:;" target="_blank">拍卖</a>23         </li>24         <li>25             <a href="javascript:;" target="_blank">金融</a>26         </li>27         <li>28             <a href="javascript:;" target="_blank">智能</a>29         </li>30     </ul>31 </div>

CSS コード:

1 a, ul, li { padding: 0; margin: 0; list-style-type: none; }2 a { text-decoration: none; color: #333; } 3 .header ul { font-size: 0; text-align: center; }4        .header li { display: inline-block; font-size: 16px; width: 80px; text-align: center; }

Rendering

JD ホームページのナビゲーション メニュー

これは、インラインを使用して JD ホームページのヘッダー ナビゲーション メニューを模倣する実装です。 -ブロックはとても便利です 水平メニューリストの簡単な実装

内联块元素

除了菜单之外，一切需要行内排列并且可设置大小的需求就可以用inline-block来实现。
例如使用a标签做按钮时，需要设置按钮的大小，我们就可以使用inline-block来实现。

HTML代码

1 <div>2     点击右边的按钮直接购买3     <a href="javascript:;" class="button">4         购买5     </a>6 </div>

CSS代码

1 .button { display: inline-block; width: 150px; height: 45px; background: #b61d1d; color: #fff; text-align: center; line-height: 45px; font-size: 20px; }

效果图

a标签菜单

布局

inline-block也可以用于常见的布局，使用它就不需要去注意float属性布局带来的问题。
举例说明，创建一个常见的3列布局。

HTML代码

 1 <div class="wrap"> 2     <div class="header"> 3         网页头部 4     </div> 5     <div class="content"> 6         <div class="left"> 7             左侧 8         </div> 9         <div class="center">10             中间11         </div>12         <div class="right">13             右侧14         </div>15     </div>16     <div class="footer">17         网页底部18     </div>19 </div>

CSS代码

1 body, div { margin: 0; padding: 0; }2 .header, .footer { width: 100%; background: #ccc; height: 120px; text-align: center; line-height: 120px; }3 .content { margin: 0 auto; background: #ff6a00; width: 1000px; font-size: 0; }4     .content .left, .content .center, .content .right { display: inline-block; font-size: 16px; height: 400px; }5     .content .left, .content .right { width: 200px; }6     .content .center { width: 600px; background: #00ffff; }

效果图

inline-block的三列布局

这个例子使用了inline-block做出了常见的网页布局。

关于inline-block的应用，只要是从左到右，从上到下，并且需要设置大小的列表都可以用它来实现，而这种需求是非常常见的，相比于float，我更推荐inline-block。inline-block的应用应该还有很多，大家可以多多挖掘出来。

总结

相比于使用float所带来的问题，使用inline-block所需要注意的点主要是空白符带来的问题，这一点也可以很方便的解决。
使用inline-block可以很方便的进行列表布局，更加符合我们的思维习惯，相信使用它的同学们也会越来越多，欢迎大家讨论。