Float
关于浮动，要说的可能就是：一个设置了浮动的元素会尽量向左移动或向右移动，且会对其后的元素造成影响，其后的元素会排列在其围绕在其左下或右下部。似乎就这么简单，但是在实际开发中，它应用这的是非常的多。在此，我会浅析浮动的基本原理，然后通过实例的方式尽量让大家对浮动有更加深刻的理解
要素の float を設定するのは非常に簡単です
// 只能设置一个元素左浮动或又浮动float: left/right;
float はドキュメント内の要素にのみ作用することに注意することが重要です流れ。つまり、4 つの配置方法では、デフォルトの配置 (静的) と相対配置 (相対) の要素に対してのみ機能します。
例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> #red-div { background-color: red; width: 100px; height: 100px; } #blue-div { background-color: blue; width: 100px; height: 100px; float: right; } </style></head><body> <div id="red-div"></div> <p id="before">This is a paragraph. This is a paragraph. This is a paragraph. </p> <div id="blue-div"></div> <p id="after">This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph.</p></body></html>
例
// 设置 blue 的透明度#blue-div { background-color: rgba(0, 0, 255, 0.3); width: 100px; height: 100px; float: right;}// 改变 after 的内容长度<p id="after">This is another paragraph.</p>
after は通常のドキュメント フロー レイアウトに従って配置されていることが観察されます
// 设置 after 的背景色#after { background-color: orange;}
After が画面幅全体を占めることが観察されます
例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body { background-color: lightgray; } div { margin-right: 10px; } #red-div { background-color: red; width: 100px; height: 100px; float: right; } #blue-div { background-color: blue; width: 100px; height: 100px; float: right; } #green-div { background-color: green; width: 100px; height: 100px; float: right; } </style></head><body> <div id="red-div"></div> <div id="blue-div"></div> <div id="green-div"></div></html>
十分なスペースがあれば、フローティング要素の後のフローティング要素が左下または右下の隣に表示されることがわかります（フローティング方向から始めて、逆方向に配置することもできます）。次に容量不足の状況を見てみましょう。
// 设置 blue 的款的为 400px#blue-div { background-color: blue; width: 400px; height: 100px; float: right;}
スペースが足りない場合は、以下の要素を次の行に配置し、浮動方向から逆方向に配置します。次に、さまざまなフローティング方向を設定します。
// 设置 green 左浮动#green-div { background-color: green; width: 100px; height: 100px; float: left;}
緑色の左フロートを設定した後、ドキュメントフロー内の現在の高さから開始して左右にフロートします(その前の要素には影響しません)
ご存知のとおり、浮動要素は後続の要素に影響を与えます。まあ、これらのエフェクトを嫌うときは常にあるので、フローティングエフェクトをクリアする必要があります。
clear: both/left/right;
例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body { background-color: lightgray; } div { margin-right: 10px; } #red-div { background-color: red; width: 100px; height: 100px; float: right; } #blue-div { background-color: blue; width: 400px; height: 100px; float: right; } #green-div { background-color: green; width: 100px; height: 100px; } </style></head><body> <div id="red-div"></div> <div id="blue-div"></div> <div id="green-div"></div></html>
図からわかるように、green-div は red-div の左側に表示されており、主に red-div の右側のフローティングの影響を受けます。 blue-div ではなく red-div の影響を受けていることはどのようにしてわかりますか?
// 改变 green-div 的宽度#green-div { background-color: green; width: 30px; height: 100px;}
観察の結果、green-div が blue-div の左側に表示されていないことがわかりました (blue-div の左側は、green-div を収容するのに十分です)。次に、フロートをクリアする効果を見てみましょう。
// 清楚 green-div 的浮动#green-div { background-color: green; width: 30px; height: 100px; clear: both;}
green-div のフローティングをクリアした後、green-div はドキュメント フローのデフォルトの流体レイアウトに従って再配置されます。
例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body { background-color: lightgray; } #container { background-color: yellow; } #red-div { background-color: red; float: left; } #green-div { background-color: green; float: right; } </style></head><body> <div id="container"> <div id="red-div"></div> <div id="green-div"></div> </div></html>まずページの構造を構築しますが、インターフェイスには何も表示されません。明らかに、div の場合、そのデフォルトのサイズはそのコンテンツのサイズです。幅と高さを設定しないと、当然表示されません。
// 设置 red-div 和 blue-div 的尺寸#red-div { background-color: red; width: 150px; height: 180px; float: left;}#green-div { background-color: green; width: 330px; height: 300px; float: right;}
写真のように、red-divとblue-divを設定すると、確かに表示されます。ただし、設定した親を含むブロックの背景色は表示されません。これは明らかに、上記の「div のデフォルト サイズはそのコンテンツのサイズです。何が起こっているのか?」という文と矛盾しています。何が起こっても、まずは問題を解決しましょう。
// 设置 container 的 overflow 属性为 hidden#container { background-color: yellow; overflow: hidden;}
写真のように、背景画像が表示されていることが分かりました。しかし、その理由は何でしょうか？その理由は、親を含むブロック内の子要素が float に設定されていても、float コンディショナーが設定されていない場合、その子要素自体の高さを拡張できない (子要素の高さに合わせてその高さを変更できない) ためです。 2 列レイアウトとこの問題の解決方法については、他の解決策もありますが、ここでは説明しません。興味のある友達は私と話し合ってください。
我们知道，一个元素至少有两种显示状态：显示 / 隐藏。而 HTML 元素又分为块级元素和内联元素，我们通常需要改变一个 HTML 元素的具体的显示状态，来满足实际的需求。在此，我们就来看看如何通过 display 属性来控制一个 HTML 元素的显示状态。
非表示または表示を制御します
// 隐藏一个元素，元素默认显示display: none;
要素を非表示にするには、表示を使用します。非表示の要素はドキュメント フローのスペースを占有しなくなります
// 使用 visibility 属性隐藏一个元素visibility: hidden;
非表示にするには、visibility 属性を使用します要素は非表示になります 要素は元のドキュメント フロー スペースを占有します
デフォルトでは
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body { background-color: lightgray; } #red-div { background-color: red; width: 100px; height: 100px; } </style></head><body> <p>This is a paragraph.</p> <div id="red-div">This is a div.</div> <span>This is another paragraph.</span></html>
ブロックレベル要素をインライン要素として表示します
// 使 red-div 显示为内联元素#red-div { background-color: red; width: 100px; height: 100px; display: inline;}
観察 red-div と span は 1 行で表示されており (ブロックレベルの要素はデフォルトで前後に改行を追加します)、red-div で設定された幅と高さは影響を与えないことがわかります。 、これは避けられません (ブロックのみが次元を持ちます)。 red-div を現在の位置に、設定可能な幅と高さで表示したい場合は、インラインのブロックレベル要素として表示させます。
#red-div { background-color: red; width: 100px; height: 100px; display: inline-block;}
インライン要素をブロックレベルの要素として表示する
// span 本身是一个内敛元素，设置它显示为块级元素span { display: block;}
图示为设置 span 为块级元素后的效果，但是我们会发现，没有在其前边增加换行。
通常情况下，我们需要设置一个元素或元素内容的对齐方式，来美化我们的界面。对齐主要在两个方向上：水平和垂直
使用 Absolute 定位实现左右对齐
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body { background-color: lightgray; } #red-div { background-color: red; width: 100px; height: 100px; /*设置右对齐*/ position: absolute; right: 0px; } </style></head><body> <div id="red-div">This is a div.</div></html>
使用 float 设置左右对齐
#red-div { background-color: red; width: 100px; height: 100px; /*设置右对齐*/ float: right;}
中心对齐
#red-div { background-color: red; width: 100px; height: 100px; /*设置居中对齐*/ margin: 0px auto;}需要注意的是，在使用 margin 来设置一个元素的居中对齐时，这个元素必须设置有宽度设置垂直对齐
vertical-align: top/middle/bottom;
默认情况（顶部对齐）
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body { background-color: lightgray; } #red-div { background-color: red; width: 100px; height: 100px; display: inline-block; } </style></head><body> <div id="red-div">This is a div.</div> <span>This is a paragraph.</span></html>
设置垂直居中对齐
#red-div { background-color: red; width: 100px; height: 100px; display: inline-block; vertical-align: middle;}
使用 text-align 来设置文本内容的对齐方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> body { background-color: lightgray; } #red-div { background-color: red; width: 100px; height: 100px; text-align: center; } #content { background-color: yellow; width: 50px; height: 50px; } </style></head><body> <div id="red-div"><div id="content">div</div></div></html>
我们发现，设置 text-align 后，red-div 的子孙元素的文本内容水平居中对齐了，其子元素 content 并没有居中对齐。我们再试没有办法像控制元素一样控制内容的垂直方向上的对齐方式。但是可以采用其他方案，如：边距、填充等
实在是枯燥无味，不知你是否能坚持看到这里。关于 HTML 和 CSS 基础的介绍，到此就告一段落了。有关更多细节的东西，会在后续的博客中少有涉及。接下来，会介绍 JavaScript 的基础。本目前在从事 iOS 和 web 开发工作，处于小妖修炼阶段，很希望与大家交流，共同进步。
HTML：構造、CSS：スタイル、JavaScript：動作Apr 18, 2025 am 12:09 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。
HTMLの未来：ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AMHTMLの将来は、無限の可能性に満ちています。 1）新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2）Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3）パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。
HTML対CSS対JavaScript：比較概要Apr 16, 2025 am 12:04 AMWeb開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。
HTML：それはプログラミング言語か何か他のものですか？Apr 15, 2025 am 12:13 AMhtmlisnotaprogramminglanguage; itisamarkuplanguage.1）htmlStructuresandformatswebcontentusingtags.2）ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。
HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AMHTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。
テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AMHTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。
HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AMwebdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AMHTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。
ドリームウィーバー CS6
ビジュアル Web 開発ツール
WebStorm Mac版
便利なJavaScript開発ツール
ZendStudio 13.5.1 Mac
強力な PHP 統合開発環境
メモ帳++7.3.1
使いやすく無料のコードエディター
