CSSのスキル型破りなコレクション操作

フロートフロート

BFCの形成に関連し、この場合の

  • フロートのnone以外のfloat値 

  • 絶対配置要素、絶対/固定として位置。

  • ディスプレイは、次の値インラインブロック、テーブル、テーブルセル、テーブル・キャプションの一つです。

  • 可視オーバーフロー値(隠された、自動車、スクロール)に加えて。

  • フィールドセット要素

表示:フロールート。 

フロー・ルート親表示プロパティに浮遊します。
または位置決めプロパティによって影響を受けることになります。 

// 清理浮动
.parent {
    overflow: scroll; // hidden;
    clear: both;
}

// 浮动兼容性处理
.wrapper{
    display: flow-root;
} 
@supports not (display:flow-root) {
    .wrapper::after {
        content: '';
        display: table;
        clear:both;
    }

}

 異例のプロパティを表示

 -  フロールート 

It always establishes a new block formatting context for its contents.
官方解释display设置为这个属性会得到一个BFC空间,空间内类似一个Block块。

-テーブルのキャプション 

テーブルショーのタイトルとして、異例の一般的に使用される、側をキャプションすることができます下のレイアウトの特殊な性質を定義!

-内容 

divのスタイルは、要素が任意のバウンディングボックスを生成しないルール 

ラベルの背景、パディング、マージン、境界部分がレンダリングされていない、フォントや色を基礎属性! 

インラインブロックのギャップの問題が表示されます

原因

インラインblcokブロック間の目に見えないシンボルは、親層空間の1/3フォントサイズを予約されています 

約5ソリューション:

  • 親フォント・サイズが0に設定されています
  • フロートフロート
  • 負のマージンを設定し-.3333em
  • ラベル表記は分岐しません
  • 文字間隔:負の値は-.3333em。

おすすめ

転載: www.cnblogs.com/the-last/p/11373301.html