CSS+DIV レイアウト application_html/css_WEB-ITnose

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

属性 (TOP

、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

左側では浮動要素は許可されません。

right両方なしinherit

右側では浮動要素は許可されません。

フローティング要素は左側または右側のどちらにも使用できません。

デフォルト値。フロート要素を両側に表示できるようにします。

Clear 属性の値を親要素から継承することを指定します。

特点

假设希望让一个图片浮动到文本块的左边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码：

.news {

background-color: gray;

border: solid 1px black;

}

.news img {

float: left;

}

.news p {

float: right;

}

9e59c74aa5e5ffe4edf05198a047c62d

00a0212c122335a467f1c3e699e5514d

e388a4556c0f65e1904146cc1a846beesome text94b3e26ee717c64999d7867364b1b4a3

16b28748ea4df4d9c2150843fecfba68

この場合、問題が発生します。フローティング要素はドキュメント フローの外にあるため、画像とテキストを囲む div はスペースを占有しません。

周囲の要素が浮動要素を視覚的に囲むようにするにはどうすればよいですか? Clear はこの要素内のどこかに適用する必要があります。

この実装では、クリーニングを適用できる既存の要素が存在しないため、空の要素を追加してクリーニングすることしかできません。コードは次のとおりです

.news {

  background-color: gray;

  border: solid 1px black;

  }

.news img {

  float: left;

  }

.news p {

  float: right;

  }

.clear {

  clear: both;

  }

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

<div class="clear"></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 個の異なる非継承スタイルを定義します (なしを含む)。

値

説明

なし

境界線を定義しません。

hidden

は「なし」と同じです。ただし、テーブルに適用される場合は例外で、境界線の競合を解決するために非表示が使用されます。

点線

点線の境界線を定義します。ほとんどのブラウザでは実線として表示されます。

dashed

破線を定義します。ほとんどのブラウザでは実線として表示されます。

solid

実線を定義します。

double

二重線を定義します。二重線の幅は、border-width の値と同じです。

groove

3D グルーブの境界線を定義します。効果はborder-colorの値によって異なります。

ridge

3D リッジの境界線を定義します。効果はborder-colorの値によって異なります。

inset

3D はめ込み枠を定義します。効果はborder-colorの値によって異なります。

アウトセット

3D アウトセット境界線を定義します。効果はborder-colorの値によって異なります。

inherit

境界線のスタイルを親要素から継承することを指定します。

Border-style 支持省略式写法，如下：

例子 1

border-style: dotted solid double dashed; 

· 上边框是点状

· 右边框是实线

· 下边框是双线

· 左边框是虚线

例子 2

border-style: dotted solid double;

· 上边框是点状

· 右边框和左边框是实线

· 下边框是双线

例子 3

border-style: dotted solid;

· 上边框和下边框是点状

· 右边框和左边框是实线

例子 4

border-style: dotted;

· 所有 4个边框都是点状

除了省略式写法，必要时还可以进行单边定义，如：

border-top-style：……

border-right-style：……

border-bottom-style：……

border-left-style：……

2.4.3、宽度-border-width

border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。只有当边框样式不是 none 时才起作用。如果边框样式是 none，边框宽度实际上会重置为 0。不允许指定负长度值。

CSS 的border-width属性定义了几种样式，见下表。

值	描述
thin	定义细的边框。
medium	默认。定义中等的边框。
thick	定义粗的边框。
length	允许您自定义边框的宽度。

与border-style同理，border-width也支持省略式写法：

例子 1

border-width: thin medium thick 10px;

· 上边框是细边框

· 右边框是中等边框

· 下边框是粗边框

· 左边框是 10px 宽的边框

例子 2

border-width: thin medium thick;

· 上边框是 10px

· 右边框和左边框是中等边框

· 下边框是粗边框

例子 3

border-width: thin medium;

· 上边框和下边框是细边框

· 右边框和左边框是中等边框

例子 4

border-width: thin;

· 所有 4 个边框都是细边框

同样地，除了省略式写法，也可以通过下列属性分别设置边框各边的宽度：

border-top-width: ……

border-right-width: ……

border-bottom-width: ……

border-left-width: ……

2.4.4、颜色-border-color

border-color 属性设置四条边框的颜色。此属性可设置 1 到 4 种颜色。

border-color 属性是一个简写属性，可设置一个元素的所有边框中可见部分的颜色，或者为4个边分别设置不同的颜色。

CSS 的border-color属性支持下表几种颜色写法：

值	描述
color_name	规定颜色值为颜色名称的边框颜色（比如 red）。
hex_number	规定颜色值为十六进制值的边框颜色（比如 #ff0000）。
rgb_number	规定颜色值为 rgb 代码的边框颜色（比如 rgb(255,0,0)）。
transparent	默认值。边框颜色为透明。

省略式写法

例子 1

border-color:red green blue pink;

· 上边框是红色

· 右边框是绿色

· 下边框是蓝色

· 左边框是粉色

例子 2

border-color: red green blue;

· 上边框是红色

· 右边框和左边框是绿色

· 下边框是蓝色

例子 3

border-color: red green;

· 上边框和下边框是红色

· 右边框和左边框是绿色

例子 4

border-color: red;

· 所有 4 个边框都是红色

还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同：

border-top-color: ……

border-right-color: ……

border-bottom-color: ……

border-left-color: ……