検索

CSSフローティング記述方法

Sep 22, 2017 am 09:50 AM
css書き方

この章では、主に位置決めとフローティングの一般的に使用される機能を記録します。

1. フローティング

フローティングと言えば、まず標準フローとフローティングフローについて話さなければなりません。

1. 標準ストリーム

標準ストリームは非常に一般的であり、ブラウザのデフォルトの方法は標準ストリームです。
標準ストリームを理解するには?
実装するには、CSS の 3 つの要素の分類を知る必要があります。 Inline要素、ブロックレベルの要素、インラインブロックレベルの要素

インライン要素ブロックレベル要素デフォルトはコンテンツと同じ幅ですデフォルトは親要素と同じ幅です幅と高さを設定できますおおよそ 3つの要素の区別が出てきます。 ここに別の知識ポイントを挿入します: HTML では、要素 (タグ) は通常 2 つのカテゴリに分類されます: テキストレベルのタグ
1行を排他的に占有します 排他的ではありません 行
デフォルトはコンテンツです 幅と高さは設定できません
幅と高さを設定できます
コンテナレベルのタグ



p h ul ol li dt などspan/p/em/ins など ネストできるのはテキスト/画像/ハイパーリンクのみです 次に、標準的なフローについて説明します。標準的なフローには 2 つのレイアウト方法があります。ブロックレベル要素は垂直方向にレイアウトされ、インライン要素とインラインブロックレベルのレイアウトは水平方向に配置されます。2. フローティング属性: フロート
他のすべてのタグをネストできます
クリア
フロート

左/右

フローティングは許可されません左/右なしフローティングはありませんフローティングの際に注意すべき点がいくつかあります:
フロート左/右 両方/なし neどちらか/なし
フローティングとは、フロートを設定した後に要素がその周囲でどのように浮動するかを指します。 ! !
例えば、右とは、次の要素が左に配置されることを意味します。 ! ! フローティングフローは要素を区別せず、中央揃え(中央)なしで水平方向にのみ入力でき、マージン:0自動は使用できません。幅と高さの両方を設定できます。
特徴

前のものがフロートし、後続のものがフロートしない場合、前のものが後者のものをカバーします(テキストはカバーしませんが、回り込みます)。それらすべてを浮かんだアレンジシーンを考えてみてください。

先に浮くものは前、後から浮くものは後ろになります

浮いた後の位置は浮く前の標準フローでの位置によって決まります これは主にどのような要素であるかでわかります。フローティング後に影響を受けます親要素の幅がすべてのフロートを表示できる場合、それらは並べて表示されますサイドフロートの固着とは、主に親要素の幅が足りない場合に前傾してしまう現象のことを指します。ウィンドウを閉じてウィンドウの幅を減らすと、写真は自動的に下に配置されます
左のフロートは左のフロートを探し、右のフロートは右のフロートに従います

以上がCSSフローティング記述方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

最近の会議の講演で(申し訳ありませんが、どちらを忘れてしまいます)、サードパーティのウィジェットの形でWebパフォーマンスが低いという簡単な例がありました。例

WebPagetestでのパフォーマンステストのシングルページアプリケーションのレシピWebPagetestでのパフォーマンステストのシングルページアプリケーションのレシピApr 15, 2025 am 09:42 AM

WebPageTestは、開発者がWebサイトのパフォーマンスを監査するのに役立つオンラインツールであり、オープンソースプロジェクトです。のウェブパフォーマンスエバンジェリストとして

ウィンドウのサイズ変更中にアニメーションを停止しますウィンドウのサイズ変更中にアニメーションを停止しますApr 15, 2025 am 09:40 AM

あらゆる種類の要素に関するトランジションとアニメーションが多数あるページがあるとします。それらのいくつかは、ウィンドウがサイズ変更されたときにトリガーされます

1つの要素を別の要素の上と下に織ります1つの要素を別の要素の上と下に織りますApr 15, 2025 am 09:38 AM

この投稿では、CSS超大国を使用して、2つの要素が重複して織り込む視覚効果を作成します。このデザインのエピファニーが来ました

CSSに乱数はありますか?CSSに乱数はありますか?Apr 15, 2025 am 09:37 AM

CSSを使用すると、Web上に動的なレイアウトとインターフェイスを作成できますが、言語としては静的です。値が設定されると、変更できません。のアイデア

段落の中央にフロート要素段落の中央にフロート要素Apr 15, 2025 am 09:36 AM

画像(またはその他の要素)が視覚的に浮かんで、テキストの段落に視覚的に浮かんでいるとします。しかし、ように...段落の途中で、

'は、派手ではあるが、複雑でないページローダーを作りましょう'は、派手ではあるが、複雑でないページローダーを作りましょうApr 15, 2025 am 09:33 AM

特にプログレッシブWebアプリやリアクティブサイトが増加しているため、最近のサイトでロード状態を見るのはかなり一般的です。それは一つの方法です

クロスプラットフォームアプリ開発のランドスケープクロスプラットフォームアプリ開発のランドスケープApr 15, 2025 am 09:29 AM

私はこのようなものをあまりうまく追跡しませんが、私はそれを手に入れます。 AndroidとiOS用のネイティブアプリが必要な場合は、むしろ1回だけ書く必要があると思います

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール