CSS3 インラインブロックの落とし穴について-CSSチュートリアル-php.cn

CSS3 インラインブロックの落とし穴について

小云云

リリース： 2018-02-02 14:08:43

オリジナル

4144 人が閲覧しました

レイアウトに関しては、flex や float を使用する人が多いかもしれません。 flex は非常に強力であることは間違いありませんが、float は互換性があまり高くないように感じます。フローティングは非常に面倒なので、segmentfault などの一部の大きな Web サイトのホームページのナビゲーション表示のレイアウトとして inline-block を使用していましたが、あることに気づきました。いくつかの小さな問題もあります。まず最初にコードを公開します

<p style="background-color:green">
      <p style="width:40px;height:30px;background-color:red;">

      </p>
      <p style="width:40px;height:30px;background-color:red;">

      </p>
      <p style="width:40px;height:30px;background-color:red;">

      </p>
</p>

ログイン後にコピー

CSS3 インラインブロックの落とし穴について
この時点でレイアウトに inline-block を使用すると、何か魔法のことが起こります

<p style="background-color:green;">
      <p style="width:40px;height:30px;background-color:red;display:inline-block;">

        </p>
      <p style="width:40px;height:30px;background-color:red;display:inline-block;">

        </p>
      <p style="width:40px;height:30px;background-color:red;display:inline-block;">

        </p>
    </p>

ログイン後にコピー

CSS3 インラインブロックの落とし穴について

元の 3 つの P が並んでいます。インライン要素があるので横に並べる必要がありますが...
ここで 2 つの問題があります:

の間にギャップがあります子 p と親 p の間の 4px 間隔

ここでこの問題が発生する理由は、改行またはスペースで区切って表示される場合、インラインブロックで水平方向に表示される要素間に間隔があるためです

p 間の間隔の解決策

ここで試した 1 つの方法は、margin-right を負の値に設定することです。

<p style="background-color:green">
      <p style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px">

      </p>
      <p style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px">

      </p>
      <p style="width:40px;height:30px;background-color:red;display:inline-block;margin-bottom:-4px;margin-right:-4px">

      </p>
    </p>

ログイン後にコピー

CSS3 インラインブロックの落とし穴について

ここでは、最初の p と 2 番目の p がまだ 1px であることがわかります。ギャップ、そして 2 番目の p 1 番目と 3 番目の p の間に距離はなく、子 p と親 p の間にも距離はありません。これは、問題がここにないことを示しています

マスターのブログを参照しましたZhang Xuxin と私は、この方法が最高であることに深く感銘を受けました:

これを親 p に追加します。 CSS 属性

font-size:0
-webkit-text-size-adjust:none;

ログイン後にコピー

po コード

<p style="background-color:green;font-size:0;-webkit-text-size-adjust:none;">

        <p style="width:40px;height:30px;background-color:red;display:inline-block;">

        </p>

        <p style="width:40px;height:30px;background-color:red;display:inline-block;">

        </p>

        <p style="width:40px;height:30px;background-color:red;display:inline-block;">

        </p>

ログイン後にコピー

CSS3 インラインブロックの落とし穴について

それから、別の質問があります。-webkit-text とは何ですか-size-adjust????

Webkit カーネルを搭載したブラウザ (Chrome) では、CSS で定義された中国語のフォントサイズが 12px 未満の場合でも、ブラウザは -webkit- を使用できます。 text-size-adjust:none;

はは、このようにして問題は解決されました

最後に、inline-block の互換性について話しましょう: この記事を参照してください
-->
IE6 と IE7 は認識しませんinline-block ですが、ブロック要素をトリガーできます。他の主流ブラウザはインラインブロックをサポートしています。これで十分です。IE6 と 7 は考慮されません。理由はわかります...