ホームページ > 記事 > ウェブフロントエンド > 表示:なしと可視性:非表示の違い。

表示:なしと可視性:非表示の違い。

PHPzオリジナル: 2017-04-04 11:18:52992ブラウズ

当時の私の答えは、どちらも要素を非表示にできるが、要素を display:none; に設定すると、その要素によって以前に占められていたドキュメントフロースペースがキャンセルされますが、visibility:hidden; は要素を均等にするというものでした。要素が表示されない場合でも、スペースが占有されます。
電話インタビューでしたが、私が質問に答えた後、相手はディスプレイ関連の知識について質問を続けませんでした。
今思うと、ディスプレイ関連の知識を聞かれたら本当にラッキーです。絶対に戦えない。

数日前、ナビゲーションの書き方を練習していたとき、常にいくつかのインライン要素またはブロックレベルの要素をインラインブロックレベルの要素に設定する必要があったので、display:inline- を思い出しました。 block ただし、これはまだある程度の知識がある属性値であることがわかりました。この記事をお勧めします。 display:inline-block
但是，我发现这是个属性值还是有些学问的。推荐这篇文章。

IE5.5开始，就已经开始支持inline-block，但是要知道IE5.5是在2000年正式推出，但是W3C在2002年才开始将这个属性值加到css2.1草案中。

IE 5.5、6、7 、8（Q）中块级元素对 inline-block 支持不完整，如果要达到类似的效果，需要先设置为 display:inline，然后使用 zoom:1 等触发hasLayout（这个是引起IE浏览器出现bug的原因，我会再详细写的）。IE 5.5、6、7 、8（Q）中 inline 元素欲达到 inline-block 的效果只需直接设置此属性值或使用 zoom:1 等均可。

以下都是针对IE 5.5、6、7 、8（Q）浏览器而言

行内元素 display:inline-block
只需要对行内元素进行display:inline-block，或者zoom:1；就可以触发hasLayout，然后就可以设置该行内元素的宽高。
display:inline-block;
*zoom:1;
在zoom前面加上 *是为了让该属性只针对ie浏览器才被识别。还有其他方法。这里细说
块级元素 display:inline-block
块级元素通过display:inline-block触发hasLayout，并不能使得该块级元素具备不换行的特性。这也正是支持不完整的体现，弥补方法：
display:inline; zoom:1;
首先转化为行内元素，然后再使他拥有布局。

结合现代浏览器当我们想使得一个元素转换为行内块级元素时，需要做的就是：
```
 `display:inline-block;`/*兼容现代浏览器，IE6、7 行内元素*/
 `*display:inline;`/*兼容IE6、7块级元素*/
```
*zoom:1

以下は IE 5.5、6、7、8 (Q) ブラウザー用です

インライン要素の表示: inline -block inline 要素に対して display:inline-block またはzoom:1; を実行して hasLayout をトリガーするだけで、インライン要素の幅と高さを設定できます。 display:inline-block;
*zoom:1;
zoom の前に * を追加すると、この属性が IE ブラウザーでのみ認識されるようになります。他の方法もあります。ここで詳しく説明しましょう
ブロックレベル要素display:inline-blockブロックレベル要素はdisplay:inline-blockを通じてhasLayoutをトリガーしますが、これはブロックレベル要素を非改行にしません。これはサポートが不完全であることの表れでもあります。それを補う方法は次のとおりです: display:inline; zoom:1;
まず inline 要素に変換し、次にレイアウトを与えます。

最新のブラウザと組み合わせると、要素をインラインブロックレベルの要素に変換する場合、必要なのは次のとおりです。
```
       hello buddy
```
*zoom:1; [もう一つ] インライン要素によって引き起こされる問題は、インライン要素の間に一定のマージンが存在することです。前回のnoteを書いたときは理解できませんでしたが、先ほど紹介したブログを読んで理解できました。
ブラウザは、段落内の単語をレンダリングしているかのようにインライン要素をレンダリングします。改行
```
       hello
       buddy
```
通常、複数の連続する空白文字 (スペース、改行、復帰など) の場合、ブラウザはそれらを 1 つの空白文字に結合します。 🎜🎜🎜🎜インライン要素間の空白を削除する方法🎜🎜🎜🎜🎜🎜font-size🎜:0px;🎜
```
         font-size:0px;
```
🎜を使用します🎜IE6、7、safri5より前のバージョンを除き、このメソッドは次の親要素で使用できます。インライン要素インライン要素から空白を削除します。 🎜🎜🎜🎜 inline 要素の親要素に対して 🎜letter-spacing🎜🎜 を実行すると、safri5 より前のバージョンの inline 要素間の空白を削除できます。 🎜インライン要素間の空白はフォントサイズに関係しており、文字間隔の負の値の絶対値がギャップサイズよりも大きい場合、内部のインライン要素が重なり合います。 🎜
```
        letter-spacing:-2px;//这个2px等于元素之间的间隙
```
🎜🎜🎜 inline要素の親要素に🎜white-space🎜🎜
```
 font-size:0;/* 所有浏览器 */
letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器 */
`*letter-spacing:normal;`
word-spacing:-1px;/* IE6、7 */
```
🎜を行う上記の書き方は基本的にどのブラウザでも対応します。 🎜 IE6 および 7 での文字間隔と単語間隔の競合を回避するには、文字間隔をハッキングする必要があることに注意してください。 🎜

由于这些文本属性都会继承下去，造成行内元素内部的文字内容受到影响，所以需要为行内元素内部重新设置字体属性值。

      font-size: 12px; letter-spacing: normal; word-spacing: normal;

刚才推荐的那篇文章，总结了代码如下：
.dib-wrap修饰行内元素的父级元素，.dib修饰行内元素，另外需要注意由于 inline-block 具有 inline 元素的特性，在垂直方向上很多时候我们并不希望元素以「vertical-align:baseline」方式来呈现，所以在「.dib-wrap」中统一重置为「vertical-align:top」即可

      .dib-wrap {
      font-size:0;/* 所有浏览器 */
      *word-spacing:-1px;/* IE6、7 */
      }
      .dib-wrap .dib{
      font-size: 12px;
      letter-spacing: normal;
      word-spacing: normal;
      vertical-align:top;
      }
      @media screen and (-webkit-min-device-pixel-ratio:0){
      /* firefox 中 letter-spacing 会导致脱离普通流的元素水平位移 */
      .dib-wrap{
      letter-spacing:-5px;/* Safari 等不支持字体大小为 0 的浏览器, N 根据父级字体调节*/
      }
      }
      .dib {
      display: inline-block;
      `*display:inline;`
      `*zoom:1;`
      }

以上が表示:なしと可視性:非表示の違い。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：フロントエンドイメージの遅延読み込みの詳細説明次の記事：フロントエンドイメージの遅延読み込みの詳細説明

続きを見る