V
DIV+CSS レイアウト アプリケーション
、 、 、 、 2.1、最上位要素
1、不可欠であることはできません幅と高さを設定します。
2. ドキュメント フローの最上位にある必要があります。
共通要素
body
フレームセット2.2. ブロックレベルの要素 定義
ブロック内に表示される要素は、デフォルトでは、改行
を使用して表示されます。特徴
1. 各ブロックレベルの要素は常に新しい行で始まります。
2. 高さ、行の高さ、余白、パディングはすべて制御可能です
3.幅が設定されていない限り、コンテナー
4. インライン要素と他のブロック要素を収容できます
共通要素
address - アドレス
blockquote
center - ブロックを配置します (HTML5 はキャンセルします)。このタグ)
div - よく使用されるブロックレベル、CSS レイアウトのメインタグでもあります
dl - 定義リスト
fieldset - フォームコントロールグループ
form - インタラクティブフォーム
h1 - ビッグタイトル
h2 - サブタイトル
h3 - レベル 3 の見出し
h4 - レベル 4 の見出し
h5 - レベル 5 の見出し
h6 - レベル 6 の見出し
hr - 水平分割線
isindex - 入力プロンプト
menu - メニューリスト
noframes - フレームオプションのコンテンツ (このブロックのコンテンツはフレームをサポートしていないブラウザーに表示されます)
noscript - オプションのスクリプト コンテンツ (このコンテンツはスクリプトをサポートしていないブラウザーに表示されます)
ol - 並べ替えフォーム
p - 段落
pre - フォーマットされたテキスト
table - テーブル
ul - 順序なしリスト (順序なしリスト)
address - アドレス 2.3、インライン要素 (インライン要素)
定義
インライン要素とインライン要素 デフォルトでは、1 つまたは 2 つ。より多くのインライン要素が 1 行に表示されます。機能
1. インライン要素は同じ行に表示されます。
2. 幅の設定は要素内のテキストまたは画像の幅に依存します。高さの高さは無効です。 line-height を通じてのみ設定できます。4. 外側のマージンのみが有効で、上と下のマージンは無効です。外側の余白のパディングを設定すると、左右のパディングのみが有効になります。
6. テキストまたはその他のインライン要素のみを収容できます。 - 略語
頭字語 - 頭文字
b - 太字(非推奨)
bdo - Bidi override
big - 大きなフォント
br - 改行cite - Quote
code - コンピュータコード(引用する場合に必要)ソースコード)
dfn - フィールドの定義
em - 強調
font - フォント設定 (非推奨) (html5 はこのラベルをキャンセルします)
i - イタリック体
img - 画像
input - 入力ボックス
kbd -キーボードテキストを定義します
label - テーブルラベル
q - 短い引用符
s - アンダースコア (推奨されません)
samp - サンプルコンピュータコードを定義します
select - プロジェクトの選択
small - 小さいフォントテキスト
span - 一般インラインコンテナを使用し、テキスト内のブロックを定義します
strike - 下線
strong - 太字強調
sub - 下付き文字
sup - 上付き文字
textarea - 複数行のテキスト入力ボックス
tt - テレタイプテキスト
u - 下線
var - 変数の定義
2. 主要なレイアウト CSS 属性の概要
2.1. 配置 (position) 2.1.1. デフォルト値 -static
デフォルト値、配置なし、つまり通常の位置
通常の HTML フロー。 div の配置が解除されている場合、top、bottom、left、right、または z-index の宣言は無効になります。 (相対配置デモ 1)2.1.2. 相対配置 - 相対
定義
TRBL
、RIGHT、 BOTTOM
、LEFT)
位置決め用。特徴 1. Relative は、ドキュメント フロー内のオブジェクトの位置を維持します。つまり、static と同じプレゼンテーション メソッド を持ち、ドキュメント フロー内の固定位置を占めます。 . 以下のオブジェクト は を占有またはカバーしません。 2. 位置決めは親の元の点を参照します。親が存在しない場合は、BODY の元の点が元の点として使用されます。親にパディングなどの CSS 属性がある場合、現在のレベルの原点は親コンテンツ領域の原点を参照して配置されます。 2.1.3、絶対配置 - 絶対
絶対配置。要素をドキュメント フローの外に配置します。TRBL属性 (TOP、RIGHT、BOTTOM、LEFT)と組み合わせて配置します。
特徴1. Absolute は、ドキュメント フロー内のオブジェクトの位置を維持しません。 2.親 (infinite )
がposition
属性を設定していない場合、現在の絶対値が TRBL 属性と組み合わされて、ブラウザーの 左上隅 を元の点として配置します。親 (無限) が position 属性 を設定すると、現在の絶対値が TRBL 属性と結合されて、 親 (最も近い) の左上隅 が元の点 として配置されます。 、固定位置 - 固定define 固定位置、ドキュメントフロー位置から要素を削除、
TRBL属性(TOP
、RIGHT、BOTTOM、LEFT)と組み合わせるブラウザの位置に基づいて位置を決定します。 機能 レイヤーが固定として定義されている場合、このレイヤーは常に TRBL 属性と組み合わせたブラウザ ウィンドウに基づいて要素を配置し、
ブラウザを基準としたレイヤーの位置を自動的に調整します。2.1.5、divlayer-z-index Definition
z-index 属性は要素の積み重ね順序を設定します。積み重ね順序が高い要素は常に、積み重ね順序が低い要素の前に表示されます。 特徴
1. Z-index は、位置属性値が相対的、絶対的、または固定である要素に対してのみ有効です。インデックス; 3. z-index 値は、同じ親要素内の兄弟要素の重なり順のみを決定します。親要素 (存在する場合) の z-index 値は、子要素 (CSS) の重なり順を定義します。スタッキング "Pin Dad" のバージョン) ;
4. 上方向にトレースするときに z-index 値を含む親要素が見つからない場合、それは兄弟要素とみなして配置できます。親要素または他の自由に配置された要素の z-index 値を比較し、重なり順を決定します。
5. 兄弟要素の z-index 値が同じ場合、重なり順は位置によって決まります。2.2 、Float (float) 2.2.1. 定義 float 属性は、要素が浮動する方向を定義します。 CSS では、任意の要素をフローティングにすることができます。フロート要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。
行に浮動要素用のスペースがほとんどない場合、要素は次の行にジャンプします。このプロセスは、特定の行に十分なスペース
ができるまで継続されます。2.2.2. 機能
下の図を見てください。ボックス 1 が右にフローティングされている場合、ボックス 1 はドキュメント フローから離れ、その右端が収容ボックスの右端に接触するまで右に移動します。
下の図をもう一度見てください。ボックス 1 が左に浮くと、ドキュメント フローから離れ、その左端が格納されているボックスの左端に触れるまで左に移動します。これはドキュメント フローに存在しないため、スペースをとらず、実際にボックス 2 を覆い、ボックス 2 が表示されなくなります。
3 つのボックスをすべて左に移動すると、ボックス 1 は、それが含まれているボックスに当たるまで左に浮き、他の 2 つのボックスは、前の浮いているボックスに当たるまで左に浮きます。
下の図に示すように、収容ボックスが狭すぎて水平に配置された 3 つの浮遊要素を収容できない場合、十分なスペースができるまで他の浮遊ブロックが下に移動します。フロート要素の高さが異なる場合、下に移動するときに他のフロート要素によって「スタック」される可能性があります。
2.2.3. Float クリア-クリア
定義
clear 属性は、要素のどの側が他のフローティング要素を許可しないかを指定します。
属性値
left
左側では浮動要素は許可されません。
| 右側では浮動要素は許可されません。 |
| ||||||||||||||||||||||||||||||||||||||||||||
| フローティング要素は左側または右側のどちらにも使用できません。 |
| ||||||||||||||||||||||||||||||||||||||||||||
| デフォルト値。フロート要素を両側に表示できるようにします。 |
| ||||||||||||||||||||||||||||||||||||||||||||
| Clear 属性の値を親要素から継承することを指定します。 |
特点 假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码： .news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div> この場合、問題が発生します。フローティング要素はドキュメント フローの外にあるため、画像とテキストを囲む div はスペースを占有しません。 周囲の要素が浮動要素を視覚的に囲むようにするにはどうすればよいですか? Clear はこの要素内のどこかに適用する必要があります。 この実装では、クリーニングを適用できる既存の要素が存在しないため、空の要素を追加してクリーニングすることしかできません。コードは次のとおりです .news {ログイン後にコピー</div></div> background-color: gray; ログイン後にコピー</div></div> border: solid 1px black; ログイン後にコピー</div></div> } ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> .news img {ログイン後にコピー</div></div> float: left; ログイン後にコピー</div></div> } ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> .news p {ログイン後にコピー</div></div> float: right; ログイン後にコピー</div></div> } ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> .clear {ログイン後にコピー</div></div> clear: both; ログイン後にコピー</div></div> } ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> ログイン後にコピー</div></div> <div class="news"> ログイン後にコピー</div></div> <img src="news-pic.jpg" /> ログイン後にコピー</div></div> <p>some text</p> ログイン後にコピー</div></div>
<div class="clear"></div> ログイン後にコピー</div></div>
</div> ログイン後にコピー</div></div>
これで目的の効果を実現できますが、追加のコードを追加する必要があります。多くの場合、クリアできる要素はありますが、レイアウトの目的で無意味なマークアップを追加する必要がある場合があります。 したがって、この問題に対しては、コンテナーの div をフローティングにする次の解決策が推奨されます。 2.3. マージン、パディング (マージンとパディング) 2.3.1. マージン - マージン 定義 枠線、要素の周囲に余分な白を生成空間。 「空白」とは通常、他の要素が表示されず、親要素の背景が表示される領域を指します。 ??CSS 決定版ガイド
特徴 1. 余白は常に透明です。2. マージンは、個別の属性を使用して上、右、下、左のマージンを設定できます。つまり、マージン上、マージン右、マージン下、マージン左です。 3. マージンの値のタイプは次のとおりです: auto | length | margin を使用してすべてのマージンを同時に変更することもできます (例: margin: 10px 20px 30px 40px） 記憶方法は要素の真上から時計回りに「上、右、下、左」です。
属性値 marginの省略された数値の書き方は基本的に以下の通りです:1. marginの値が1つだけの場合は、上下左右のマージンが同じ値であることを意味します。 。 例: margin:10px; は margin:10px 10px 10px 10px; と同じです。 2. margin に 2 つの値しかない場合、最初の値は上下のマージンの値を表し、2 番目の値は左と右のマージンの値を表します。マージン値。 例: margin:10px 20px; は margin:10px 20px 10px 20px; と同等です。 3. margin に 3 つの値がある場合、最初の値は上部のマージンの値を表し、2 番目の値は左右のマージンの値を表します。 3 番目の値はマージンの値を表します。例: margin:10px 20px 30px; は margin:10px 20px 30px 20px; に等しいです。 4. margin に 4 つの値がある場合、これらの 4 つの値は、上、右、の 4 つのマージン値に対応します。それぞれ下と左。 例: margin:10px 20px 30px 40px;
垂直マージンの結合 マージンの結合とは、2 つの垂直マージンが交わると 1 つのマージンを形成することを意味します。マージされたマージンの高さは、マージされた 2 つのマージンの高さの大きい方に等しくなります。マージンの結合は、通常のドキュメント フローのブロック ボックスの垂直マージンに対してのみ発生します。 インラインボックス、フローティングボックス、または絶対位置間のマージンはマージされません。 要素が別の要素の上に表示される場合、最初の要素の下マージンと 2 番目の要素の上マージンがマージされます。以下の画像を見てください: 要素が別の要素内に含まれている場合 (マージンを区切るパディングや境界線がないと仮定して)、それらの上マージンおよび/または下マージンもマージされます。以下の画像を見てください:
余白はあるものの、境界線やパディングがない空の要素があるとします。この場合、上のマージンと下のマージンが結合され、マージされます:
このマージンが別の要素のマージンと一致する場合、それもマージされます:
2.3 .2。 定義 padding 短縮属性は、1 つのステートメントですべてのパディング属性を設定します。このプロパティ では、負の値 は許可されません。
特徴 1. パディングは透明ではなく、その背景は要素の背景に基づいて決定されます。 2. パディングは、個別の属性を使用して上、右、下、左のパディングを設定できます。つまり、padding-top、padding-right、padding-bottom、padding-left です。 3. パディングのパディング幅の値の種類は次のとおりです: auto | length |percentage autoの使用は禁止されており、例外的にpaddingの略語としてautoが使用されます 短縮されたパディング属性を使用して、すべてのパディングを同時に変更することもできます: パディング: 右上、左下; (例: パディング: 10px 20px 30px 40px) メモリ方法は、右上、左下、右回りです。要素。 属性値 paddingの省略された値は基本的に次のように記述されます: 1.paddingの値が1つしかない場合は、上、右、下、左のパディングが同じ値であることを意味します。 例: padding:10px; は、padding:10px 10px 10px 10px; と同じです。 2. パディングに値が 2 つしかない場合、最初の値は上下のパディング値を表し、2 番目の値は左右のパディング値を表します。価値観。例: padding:10px 20px; は、padding:10px 20px 10px 20px; と同等です。 3. パディングに 3 つの値がある場合、最初の値は上部のパディング値を表し、2 番目の値は左右のパディング値を表します。 3 番目の値 この値はパディングの値を表します。 例：padding:10px 20px 30px; は、padding:10px 20px 30px 20px; と同等です。 4. パディングに 4 つの値がある場合、これらの 4 つの値は、上、右、の 4 つのパディング値に対応します。それぞれ下と左。 例:padding:10px 20px 30px 40px; 2.3.3. ボックス モデル-ボックス モデルボックス モデルには、以下に示すように、IE ボックス モデルと標準 W3C ボックス モデルの 2 種類があります 上の図からわかるように、標準 W3C ボックス モデルの範囲にはマージン、ボーダー、パディング、コンテンツが含まれますが、コンテンツ部分には他の部分は含まれません。 上の図からわかるように、IE ボックス モデルのスコープにはマージン、ボーダー、パディング、コンテンツも含まれます。標準の W3C ボックス モデルとの違いは、IE ボックスのコンテンツ部分であることです。モデルにはボーダーとパディングが含まれます。 標準ボックス モデル ステートメント実際の開発では、「標準 W3C ボックス モデル」を選択する必要があります。 「標準 W3C ボックス モデル」を選択する意味は何ですか? Web ページの先頭に DOCTYPE 宣言を追加するのと同じくらい簡単です。 DOCTYPE ステートメントを追加しない場合、各ブラウザーは独自の動作に従って Web ページを理解します。つまり、IE ブラウザーは IE ボックス モデルを使用してボックスを解釈し、FF は標準の W3C ボックス モデルを使用して解釈します。ボックスが異なるため、Web ページはブラウザーごとに異なって表示されます。逆に、DOCTYPE ステートメントを追加すると、すべてのブラウザーは標準の W3C ボックス モデルを使用してボックスを解釈し、Web ページはさまざまなブラウザーで一貫して表示されます。 2.4. ボーダー (border) 2.4.1. 定義 要素のボーダーは要素の外側のマージン内にあります。要素の境界線は、要素のコンテンツと内側の境界線を囲む 1 つ以上の線です。ボーダーには、幅、スタイル、色という 3 つのプロパティがあります。 例: border:1px Solid #333333; (ここでは、幅 1 ピクセル、実線スタイル、灰色の境界線スタイルを定義します)2.4.2, style-border-style CSS border-styleこのプロパティは、10 個の異なる非継承スタイルを定義します (なしを含む)。
値
関連ラベル：
ソース：php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Next.js のレイアウトによりページのコンテンツが見えにくくなる
Next.js アプリケーションのレイアウトとして、マテリアル ui (https://mui.com/material-ui/react-bottom-navigation/) ...
から 2024-04-02 19:42:19
0
1
275
CSSでグリッド線を表示できますか?
CSSグリッドレイアウトを学び始めました。理想的な世界では、複数のグリッド ボックスを含む div を設定し、その中に要素を正確に配置し、必要に応じてオーバーレイを提供できるように...
から 2024-03-31 20:38:21
0
2
395
|
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
