haslaylout と bfc 解析の理解

haslaylout と bfc 解析の理解
1. haslayout と bfc は IE 固有の標準属性です。

2. BFC はページ上の分離された独立したコンテナーです。コンテナー内の子要素は外部の要素に影響を与えず、その逆も同様です。

3. BFC には 3 つの機能があります。

1. 浮動要素を含む、

2. 脚本の重複を防ぐ

3. 浮遊要素に隠れないようにする

4. トリガー条件:

None以外の浮動小数点値
表示以外のオーバーフロー値(非表示、自動、スクロール)
表示 (テーブルセル、テーブルキャプション、インラインブロック、フレックス、インラインフレックス)
位置値は(絶対、固定)
フィールドセット要素

bfc は独立したコンテナであり、他のレイアウトに影響を与えず、影響を受けることはないということを覚えておくことが重要です。その特性を利用することで、フロートのクリアや 2 列レイアウトなどの問題を解決できます。

例: 2列の適応レイアウト

1. フローティングマージンとマイナスマージンで解決する

2. bfcをトリガーし、フローティング要素によってカバーされなくなります

<<:  CSSテキストシャドウの徐々にぼやける効果の実装

>>:  HarborをベースにしたDocker専用倉庫の構築方法

推薦する

MySQL水平および垂直テーブル変換操作の実装方法

この記事では、例を使用して、MySQL の水平テーブルと垂直テーブル間の変換操作を実装する方法を説明...

Webサービスのリモートデバッグとタイムアウト動作原理の分析

Webサービスのリモートデバッグ.NET では、WEBSERVICE のリモート デバッグ機能はデフ...

Vueウォッチの監視方法の概要

目次1. Vueにおけるwatchの役割はその名の通り、監視の役割です。 2. このオブジェクトのプ...

MySQLインデックスを最適化する方法

1. MySQL のインデックスの使用方法インデックスは、特定の列の値を持つ行をすばやく見つけるため...

JavaScript はドラッグ可能なモーダルボックスを実装します

この記事では、ドラッグ可能なモーダルボックスを実装するためのJavaScriptの具体的なコードを参...

IDEA が MySQL ポート番号占有に接続できない問題の解決方法

コマンドラインでMYSQLに正常にログインでき、NavicatもMySQLに正常に接続できますが、I...

中央のテキストの両側に水平線を描くためのCSS

1. vertical-align プロパティは次の効果を実現します。 vertical-alig...

MySQL が uuid または snowflake id を主キーとして使用することを推奨しない理由の詳細な分析

前書き: MySQL でテーブルを設計する場合、MySQL では UUID や非連続かつ非繰り返しの...

CocosCreatorでシューティングゲームを作る詳しい解説

目次シーン設定ゲームリソース砲塔の回転動的に生成された弾丸衝突計算効果を高めるターゲットの動き弾薬庫...

nodejs + koa + typescript の統合と自動再起動に関する問題

目次バージョンノートプロジェクトを作成する依存関係をインストールするコンテンツの記入src/serv...

html2canvas を使用して HTML コードを画像に変換する方法

コードを画像に変換するにはhtml2canvas は、ブラウザから Web ページのスクリーンショッ...

MySQL マスタースレーブレプリケーションプロセスの詳細な説明

1. マスタースレーブレプリケーションとは何ですか?マスター データベースの DDL および DML...

JavaScript の新しい要素トラバーサルプロパティを使用して子要素をトラバースする方法を学びます

目次1. ChildNodes属性のトラバーサル2. 要素シリーズ属性のトラバーサル以前は、chil...

JS正規RegExpオブジェクトについての簡単な説明

目次1. RegExpオブジェクト2. 文法2.1 定義2.2 修飾子2.3 角括弧2.4 メタ文字...

Centos7.5 は mysql5.7.24 バイナリ パッケージの展開をインストールします

1. 環境整備:オペレーティング システム: CentOS Linux リリース 7.5.1804 ...