ホームページ >ウェブフロントエンド >htmlチュートリアル >CSS3-06 スタイル 5_html/css_WEB-ITnose
CSS3-06 スタイル 5_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:16:45966ブラウズ
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 开发工作，处于小妖修炼阶段，很希望与大家交流，共同进步。