CSSのdisplay:inline-block属性の使用について-CSSチュートリアル-php.cn

この記事は主にCSSのdisplay:inline-block属性の使い方を紹介し、それを使用する際に生じるギャップ問題の解決に焦点を当てています。必要な友人はそれを参照してください

display:inline-blockの感覚とdisplay:table- cell は、内部要素のラップなど、いくぶん似ています。ただし、display:inline-block の最大の違いは、親要素の匿名ラッピング機能がないことです。これにより、display:inline-block 属性をテキストや画像と自由に組み合わせることができます。また、block 属性要素はインラインの水平要素内に埋め込むことができます。黒と白は両方の側面を持っていると言えます。
inline-block属性を持つ要素はインラインボックスモデルに適しているため、リスト要素の高さが異なってもズレることはありません。各行のすべてのインライン要素とインラインブロック要素が一緒になってラインボックスを形成します。このラインボックスの高さは、内部の最も高い要素によって決まります。そのため、inline-block属性のリスト要素の高さが異常であっても、行ボックス全体の高さが引き伸ばされるため、次の行のリスト要素とずれることはありません。以下の下手な図に示されているように:
2015119103615662.png (569×429)

一部の先輩によると、IE6/7 は display:inline-block 属性をサポートしていませんが、ラベルに inline-block に似た属性を持つことのみを許可します。このステートメントは、後で疑問を表明しましたが、最近、text-align:justify; を使用したテスト中の一部のスタイルのパフォーマンスが確認されました。実際、IE6/7 は、display:inline-block 属性をサポートしていません。そのパフォーマンスは inline-block と同じです。ブロック、特にインライン水平要素の場合、そのパフォーマンスは完璧であると言えます。
IE8 以降および最新のブラウザの場合は、あらゆるレベルの要素をサポートする

{display:inline-block;}

ログイン後にコピー

を使用してください。

IE6/7 ブラウザがサポートされていない場合はどうすればよいですか?インラインの水平要素 (タグ、span タグなど) の場合は、
{display:inline-block;}
というだけで、上記と同じです。これら 2 つのブラウザでは、その効果は同じです。 *zoom:1 と同じです。
li タグなどのブロックレベルの要素の場合。現在、私が知っている方法としては、次の 2 つがあります:

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

ログイン後にコピー

または:

CSS コードコンテンツをクリップボードにコピーする

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

ログイン後にコピー

間には違いがあります。プレゼンテーション層とインラインレベル。

インラインブロックの問題

上記の例を観察すると、注意深い学生であれば、各 li の間に小さなギャップがあり、私たちのコードがマージンやその他の関連属性を設定していないことがわかるでしょう。これはなぜでしょうか?

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

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

HTMLコード

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

ログイン後にコピー

CSSコード

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

ログイン後にコピー

レンダリング
2015119103638191.jpg (95×33)

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

空白文字を削除する

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

空白文字はブラウザの通常の動作ですが、通常、これらのギャップはデザイナーのデザインドラフトには表示されません。デザインドラフトを復元するときにこれらのギャップを削除するにはどうすればよいですか。

空白文字によって生じるギャップを削除するには、まず、空白文字も最終的には文字であることを理解しなければなりません。生成されるギャップのサイズは、font-size 属性を設定することで制御できます。
まず、フォントサイズを 50 ピクセルに設定してみます。CSS コードを次のように変更します。

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

ログイン後にコピー

ul のフォントサイズを 50 ピクセルに変更しますが、li のフォントサイズは 12 ピクセルで、元のフォントサイズを維持します。効果は以下の通りです:
2015119103659068.jpg (478×54)

メニュー間の隙間が大きくなっていることがわかります。

次に、font-site 属性を 0px に設定します。コードは次のとおりです

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

ログイン後にコピー

効果は次のとおりです:
2015119103723026.jpg (456×40)

互換性の問題

IE8+、FF、および Chrome ブラウザでは、インラインブロックは次のようになります。 IE6 や IE7 などの下位バージョンのブラウザの占有率と互換性を持たせる方法はありますが、この記事では詳しく説明しません。興味がある場合は、関連情報を参照してください。

インラインブロックアプリケーション

inline-block的应用什么场景有哪些呢？我们大家考虑一个技术的应用场景时，首先一定要思考的是技术的特性和需求是否符合。inline-block的特点是结合inline和block两种属性的特定，可以设置width和height，并且元素保持行内排列的特性，基于这一点，所有行内排列并且可以设置大小的场景都是我们可以考虑使用inline-block的应用场景。下面举例说明：

网页头部菜单

网页头部的菜单就是典型的横向排列并且需要设置大小的应用，在inline-block之前，实现菜单基本都是用float属性来实现，float属性会造成高度塌陷，需要清除浮动等问题，使用inline-block实现就不需要在意这样的问题。代码如下：

HTML代码

<p class="header">
    <ul>
        <li>
            <a href="javascript:;" target="_blank">服装城</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">美妆馆</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">超市</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">全球购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">闪购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">团购</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">拍卖</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">金融</a>
        </li>
        <li>
            <a href="javascript:;" target="_blank">智能</a>
        </li>
    </ul>
</p>

ログイン後にコピー

CSS代码：

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

ログイン後にコピー

效果图
2015119103743578.jpg (738×83)

这是模仿京东首页头部导航菜单的实现，使用inline-block可以很简单的实现横向菜单列表

内联块元素

除了菜单之外，一切需要行内排列并且可设置大小的需求就可以用inline-block来实现。

例如使用a标签做按钮时，需要设置按钮的大小，我们就可以使用inline-block来实现。

HTML代码

<p>
    点击右边的按钮直接购买   
    <a href="javascript:;" class="button">
        购买   
    </a>
</p>

ログイン後にコピー

CSS代码

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

ログイン後にコピー

效果图
2015119103804382.jpg (351×55)

布局

inline-block也可以用于常见的布局，使用它就不需要去注意float属性布局带来的问题。

举例说明，创建一个常见的3列布局。

HTML代码

<p class="wrap">
    <p class="header">
        网页头部   
    </p>
    <p class="content">
        <p class="left">
            左侧   
        </p>
        <p class="center">
            中间   
        </p>
        <p class="right">
            右侧   
        </p>
    </p>
    <p class="footer">
        网页底部   
    </p>
</p>

ログイン後にコピー

CSS代码

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

ログイン後にコピー

效果图
2015119103825348.jpg (1092×586)