ウェブサイトデザインにおいて非常に重要な概念であるdiv+floatの分析

ウェブサイトデザインにおいて非常に重要な概念であるdiv+floatの分析
ウェブサイトの構築では、HTML と CSS に関するさまざまな問題に常に遭遇します。ウェブサイト https://www.jb51.net のホームページを開き、ソース コードを表示します。画面には HTML タグがいっぱいで、div が数十個以上あります。
HTML には、インライン要素 (インライン要素) とブロック要素の 2 種類の要素があります。これらをどのように理解していますか?

インライン要素は、折り返されず、サイズを調整できる要素です。たとえば、img フォント スパンなどです。Web サイトを構築する場合、内部のテキスト コンテンツはインライン要素になります。
ブロック要素は、div p li など、コンテンツ、幅、高さに関係なく次の行に折り返される要素であり、通常は Web サイトのレイアウトで使用されます。
インライン要素とブロック要素の切り替えには、2 つの CSS プロパティ display: inline block を使用します。
ブロック要素を含むインライン要素の場合は、display:inline-block; を使用します。
inline は、インライン要素が含まれている場合にのみ使用されます。
インライン要素にはインライン要素を含めることができますが、ブロック要素を含めないようにしてください。
インライン要素とブロック要素は、ブロック要素内にネストできます。
ウェブサイトでのフローティングとは、親要素の境界、または前のフローティング要素の境界にドリフトすることを意味します。フローティングは、ul li を使用してメニューを作成するときに非常に便利ですが、div を使用してメニューを作成するときにも使用できます。

フロート:右;
右フロートは、フローティング ボックスを元の位置から外すことができます。後続のフロートは密接に追従し、親要素の境界の右端にフロートして停止します。フロートを使用して Web サイトのメニューを作成するのが最適です。メニューのグループはすべてフロートするか、まったくフロートしないのが最適です。中央にフロートしないメニューが 1 つあると、奇妙な表示効果が現れます。スペースが十分に大きくない場合は、下方に適応できます。親要素は満たされるまでそのままにしておきます。

フロート:左;
float left と float right は、一方が左にフロートし、もう一方が右にフロートすることを除いて、実際には同じです。これらは、親の境界または前のフローティング ブロックにフロートします。Web サイトで、ペアの div の 1 つが他の div よりも高い高さになっている場合、十分なスペースができるまで、2 番目のフローティング div はその背後に固定されます。
インライン要素の場合、フロートするとスタイルがブロック要素に設定され、幅と高さを設定できます。それ以外の場合、この2つの属性は無効です。ただし、ブロック要素であるにもかかわらず、行の右側の位置を放棄し、他のコンテンツを表示できます。たとえば、多くのWebサイトのレイアウトのテキストパッケージ画像は、この原則に基づいています///

フロートをクリアします。つまり、フローティング効果をクリアします。フローティングの鍵は、スペースを確保し、前のフローティングにすばやく追従することです。

<<:  CSS ハート型読み込みアニメーションのソースコードの実装

>>:  MySQL の挿入およびバッチ ステートメントのいくつかの例の詳細な説明

推薦する

CSS 経由で JS にパラメータを渡す方法

1. CSSを通す必要がある背景CSS におけるメディアクエリの用途は、デバイスサイズの判別、マウス...

1 つの記事で Apache Avro データを解析する

概要: この記事では、Avro データをシリアル化して生成し、FlinkSQL を使用して解析する方...

Vueは虫眼鏡付きの検索ボックスを実装します

この記事では、Vueを使用して虫眼鏡付きの検索ボックスを実装する方法を紹介します。具体的な内容は次の...

Vue.jsの機能コンポーネントに関する包括的な理解

目次序文React 関数コンポーネントVue (2.x) の機能コンポーネント🌰 例: el-tab...

CentOS 7.9 の zabbix5.0.14 のインストールと設定プロセス

目次1. 基本的な環境設定2. データベースをインストールする3. zabbix関連コンポーネントを...

MySQL 5.7.20 Green Edition のインストールの詳細なグラフィックチュートリアル

まず、MySQL とは何かを理解しましょう。 MySQL は、スウェーデンの会社 MySQL AB ...

Tomcatが親の委任メカニズムを破壊する方法についての簡単な説明

目次JVM クラスローダーTomcat クラスローダークラスを検索ロードクラスクラスをロードしようと...

Nginx ロケーション設定(ロケーションのマッチング順序)の詳細な説明

ロケーションは「位置指定」を意味し、主にさまざまな位置指定のための URI に基づいています。これは...

MySQLのnull値に関する小さな問題

今日、null 値をテストしていたところ、小さな問題が見つかりました。ここに記録しました。以前にも遭...

CSS3はキングをマッチングさせるときにパーティクルアニメーション効果を実現します

コーディングをしていると、多くのことが同じ結末を迎えることに気づくでしょう。問題を解決する方法は何千...

MySQLプリコンパイル機能の詳細な説明

この記事では、MySQLのプリコンパイル機能について紹介します。具体的な内容は以下のとおりです。 1...

VueとFlask間の通信の実装

axiosをインストールして通信を実装するここでは、axios を使用して Vue フロントエンドと...

Vueは新しいウィンドウを開き、パラメータ転送のグラフィック例を実装します。

私が実現したい機能は、新しいウィンドウを開いて新しいページを表示することですが、パラメータを渡す必要...

Vue は PC カメラを呼び出してリアルタイムで写真を撮る機能を実装します

VueはPCカメラを呼び出してリアルタイムで写真を撮影します。参考までに、具体的な内容は次のとおりで...

dockerでopenGaussデータベースを構成する方法の詳細な説明

Windowsユーザー向けDocker で openGauss を使用するopenGaussイメージ...