HTMLデザインパターン学習メモ_html/css_WEB-ITnose

今週は主に HTML のデザインパターンを学習しました。学習内容を以下にまとめます。

1.ボックス モデルを学ぶ

CSS にはボックス モデルと呼ばれる基本的なデザイン モデルがあり、要素がボックスとして解析される方法を定義します。インラインボックスモデル(inline box)、インラインブロックボックスモデル(inline-block box)、ブロックボックスモデル(block box)、テーブルボックスモデル(table box)、アブソリュートボックスモデル(absolute box)の6種類のボックスモデルを主に学びました。ボックス）とフローティング ボックス モデル（フローティング ボックス）。

ボックス モデルのデザイン パターンは CSS に組み込まれており、ボーダー、ボーダー、パディング、コンテンツのプロパティ間の関係を定義します。各属性には、上、右、下、左の 4 つの部分が含まれています。これらの 4 つの部分は同時に設定することも、個別に設定することもできます。境界線にはサイズと色があり、これは私たちが目にするボックスの厚さとして理解できます。ボックスが何色の素材でできているか、境界はボックスと他のものとの距離、コンテンツはボックスの内容、充填ボックスの空きスペースを埋める素材です。

1.1 インライン ボックス モデル

インライン ボックス モデルは、左から右に水平にソートされ、最も近い端子台の祖先の幅を超えると、新しい行に置き換えられます。 width、height、overflow は常にコンテンツの幅と高さと一致するため、インライン要素では機能しません。マージンと行の高さは、特別な方法でインライン要素に適用できます。水平マージンにより、照合順序におけるインライン要素の位置が変更されます。 margin-left に正の値を指定すると、要素はその前の要素から遠ざかり、負の値を指定すると要素が近づきます。 margin-right に正の値を指定すると要素が次の要素から遠ざかり、負の値を指定すると要素が近づきます。 margin-top と margin-bottom はインライン要素には影響しません。 Border は、特別な方法でインライン要素の境界線を設定します。水平方向の境界線は、配置内のインライン要素の位置を変更します。左の境界線は要素を左に移動し、右の境界線は次の要素を右に移動します。上下の境界線はパディングの外側に表示されますが、行の高さまで伸びたり、要素の垂直位置を変更したりすることはありません。このモードのテンプレートは次のように表すことができます:

INLINE_SELECTOR{

display:inline;

visibility:value;

line-height:value;

margin:value;

padding:value;

border : width style color;

}

このデザイン パターンは、任意のインライン要素およびインラインで表示される任意の要素に適用できます。

1.2 インライン ブロック ボックス モデル

インライン ブロック要素は、ブロック要素のいくつかの属性 (外縁マージン、境界線、パディング、幅、高さ) も含まれることを除いて、他のインライン ボックスと同様にインライン配置順序で配置されます。 。インライン ブロック要素は他の行と交差しません。インライン ブロック要素は、高さ、パディング、境界線、およびマージンに合わせて行の高さを追加します。 width と height 要素の高さと幅を設定します。幅または高さを特定の値に設定することで、画像などの代替要素を拡大または縮小できます。 width:auto と height:auto を使用して、置換要素のサイズを実際のサイズと一致させることもできます。 display:inline-block でスパンを想定すると、幅と高さを設定することでサイズを調整できます。 width:auto と height:auto を使用してインライン ブロック要素をラップすることもできます。 width:100% を使用すると、ブロック要素と同じインライン ブロック要素を引き伸ばすことができます。 margin要素は上下左右の4方向から要素のサイズを変更し、margin-topとmargin-bottomは行の高さを増減させて要素を近づけます。前後の水平方向の距離。ボーダーとパディングを使用して、インライン要素の外側の寸法を拡張することもできます。 +

負の値: 行の高さを減らします

マージン左margin-right

margin-bottom	正の値: 要素を高くします
負の値: 要素を短くします
	正の値: 要素を前の要素から遠ざけます
負の値: 要素を前の要素に近づけます
	正の値: 要素とその後ろの要素の間の距離を広げます
負の値: 要素と次の要素の間の距離を縮めます	インライン ボックス モデルの典型的なパターンは次のとおりです: SELECTOR{ display:inline-block; line-height:value; overflow:value; visibility:value; width:value ; height:value; margin:value; padding:value; border:width style color; } このデザイン パターンは、すべてのインライン要素に適用できます。 1.3 ブロック ボックス モデル ブロック フォーマット環境では、ブロック ボックス モデルは上から下に垂直に配置されます。これは、ブロック要素の通常の配置です。ブロック ボックス モデルには、他のブロック ボックス モデルを含めることができます。また、ブロック フォーマット環境を終了して、インライン ボックス モデルを含むインライン フォーマット環境を開始することもできます。端子台要素は、その内側のボックス内にインライン フォーマット環境を作成しますが、この時点では外側のボックスはブロック フォーマット環境にある必要があります。 ブロック要素の長さは、その親要素と同じにすることも、親要素よりも短くすることも、長くすることもできます。サイズが親要素より大きい場合、オーバーフローします。 overflow 属性は、ブラウザがオーバーフローを処理する方法を制御するために使用されます。ブロック ボックス モデルでは、要素の幅と高さを設定するために幅と高さが引き続き使用されます。このうち、width:auto は要素の幅を親要素と一致させることを意味し、height:auto は要素の高さをすべての子要素を包み込むようにすることを意味します。 margin-left と margin-right は、引き伸ばされたブロック要素の側面をインデントまたは拡張し、ブロック要素のサイズを調整します。 margin-top と margin-bottom を使用すると、異なるブロック要素間の距離を増減したり、要素をオーバーラップさせたりすることができます。ブラウザは、隣接するブロック要素の上下のマージンをオフセットします。 margin-left:auto と margin-right:auto を使用して、固定サイズのブロック要素の水平方向の配置を制御します。ブロック要素に幅が設定されている場合、margin-left:auto はブロック要素を親要素の右側に配置し、margin-right:auto はブロック要素を親要素の左側に配置します。 margin-left:auto と margin-right:auto を同時に設定すると、ブロック要素が親要素の中央に配置されます。ボーダーとパディングもボックス モデルの外側の幅と高さを拡張します。ブロック ボックス モデルのパターンは次のとおりです: SELECTOR{ display:block; overflow:value; visibility:value; width:value; height:value; margin:value ; padding:value; border:width style color; } このデザインパターンはすべてのブロック要素に使用できます。 1.4 テーブル ボックス モデル テーブルは、多数のセル行を持つブロック ボックス モデルです。テーブルもブロック要素の配置で配置されますが、テーブル内のセルは「行」と「列」で配置されます。テーブルにはマージンがありますが、パディングはありません。セルには内側のマージンがありますが、外側のマージンはありません。 width を使用してテーブルの幅を設定します。ここでの幅とは、パディングの内側の幅ではなく、境界線の外側の幅を指します。 height を使用してテーブルの高さを設定します。ここでの高さは、パディングの内側の高さではなく、境界線の外側の高さを指します。マージンの解析方法は、テーブルのサイズが変更されているか、ラップされているか、または引き伸ばされているかによって異なります。マージンは、テーブルのサイズを調整して折り返すときに、テーブルと後続の要素を移動します。マージンを負にすると、隣接する要素がテーブルに重なり合います。テーブルを引き伸ばすと、マージンによってテーブルがへこみ、その内寸が小さくなり、セルのサイズが小さくなります。境界線は、定義されたサイズまたはストレッチを持つテーブルの内側のボックスを小さくします。テーブルはオーバーフローできず、テーブルのセルのみがオーバーフローする可能性があるため、オーバーフローをテーブルに適用することはできません。固定サイズのセルがオーバーフローしたときにすべてのブラウザーで一貫した動作を保証するには、セルに Overflow:hidden を割り当てる必要があります。 border-collapse は、隣接する境界線を 1 つにマージするかどうかを決定し、table-layout は、テーブルが固定サイズ (fixed) であるか、その内容に基づいて変更される (auto) かを決定します。テーブルボックスモデルのパターンは次のとおりです: SELECTOR{ display:table; visibility:value; width:value; height:value; margin:value; border:width style color; border-collapse:value; table-layout:value; } このデザイン パターンは、すべてのテーブル要素に使用できます。 1.5 絶対配置ボックスモデル 絶対配置要素を通常の要素配置順序から切り離し、上位または下位に配置します。これは、最も近くに配置された祖先を基準にして配置されるか、ビューポート内の位置に固定されます。寸法を設定したり、親要素と同じサイズに折り曲げたり、引き伸ばしたりすることができます。どの要素も絶対的に配置できます。絶対配置されたボックス モデルの位置は、他のボックス モデルの位置に影響を与えません。 z-index は、配置された要素の積み重ね順序を制御します。負の値を指定すると通常の配置レイヤーの下に配置され、正の値を指定すると上に配置されます。値が大きいほど縦方向に配置されます。絶対配置されたボックス モデルに上、左、下、右を割り当てることができます。値が設定されている場合、左は絶対配置された要素のコンテナに基づいて配置され、設定した正または負の値に従って配置されます。同じ原則が他の 3 つの属性にも当てはまります。 width を使用して要素の幅を設定し、height を使用して要素の高さを設定します。マージンが正の場合、絶対配置されたボックス モデルがコンテナの中心に向かって移動します。負の場合、中心から遠ざかります。ボーダーとパディングは、引き伸ばされた絶対配置ボックス モデルの内側のボックスを縮小します。絶対配置ボックス モデルのパターンは次のとおりです。 SELECTOR{ position:absolute_fixed; z-index:value; overflow:value; visibility:value; left:value; right:value; VTop: value; Width: value; Margin: value; } ここでは、デザイン パターンをすべての要素に適用できます。 1.6 フローティングボックスモデル float:left または float:right を使用して要素をフローティングにします。フローティング要素も通常の要素の順序から外れ、隣接するブロック要素の境界線や背景の上に配置されます。これにより、フローティング要素の親要素が縮小され、そのすべての子がフローティングされると完全に消えます。フローティングされた要素が元の要素の配置から外れても、キュー内の隣接するコンテンツが特定の方向にインデントされます。左にフローティングすると、隣接するコンテンツが右にインデントされ、右にフローティングすると、コンテンツが左にインデントされます。フローティングされた要素は、元の位置で垂直に配置されます。そして、親要素のパディング内で、右または左から水平方向に配置されます。フローティング要素は元の位置に垂直に配置されます。フロート要素が次のフロート要素に直接隣接できない場合、その要素は下に移動します。フローティング要素の位置、サイズ、パディング、境界線、およびマージンはすべて、隣接するフローティング要素と隣接するインライン コンテンツの位置に影響します。 width と height は、フローティング要素の幅と高さを設定するために使用されます。マージンには独自のフローティング機能があり、正のマージンはフローティング要素を元の位置から遠ざけ、他のフローティング要素を遠ざけます。負のマージンはその逆を行います。ボーダーとパディングにより、フローティング要素の外側のボックスのサイズが増加します。左フロート要素の左マージンと左パディングはその要素を右に押し出しますが、その右マージンと右パディングは右側の他のフロート要素とインライン コンテンツをさらに右に押し出します。右浮動要素の場合は、その逆が当てはまります。フローティング ボックス モデルのパターンは次のとおりです: SELECTOR{ float:left_right; width:value; height:value; z-index:value; margin:value; padding :value; border:width style color; overflow:value; visibility:value; } このデザイン パターンはすべての要素に適用できます。 2: 配置モデルを学習する CSS は、要素を配置するための 6 つの配置モデル (静的、絶対、固定、相対、浮動、および相対浮動) を提供します。静的位置決めモデルは、インライン、インライン ブロック、ブロック、およびテーブル ボックス モデルを位置決めできます。絶対位置決めモデルと固定位置決めモデルにより、アブソリュートボックスモデルの位置決めが可能になります。フローティング位置決めモデルはフローティングボックスモデルを位置決めできます。相対位置決めモデルは、アブソリュートボックスモデルを除く任意のボックスモデルに対して相対位置決めを行うことができます。相対フローティング位置決めモデルは、フローティングボックスモデルを相対位置決めすることができます。各位置決めモデルは、同じ基本的な属性セットを使用して位置決めを制御します。 2.1 静的配置 要素をインライン要素とブロック要素の順序で順番に配置したい場合は、position:static を使用して要素に適用できます。ブロック要素内では、1 つ以上のブロック要素またはインライン要素が垂直下方向に解決されます。インライン要素内では、テキストとオブジェクトは行ごとに水平方向に解析されます。静的要素の開始位置は、前の静的要素によって決まります。パターンは次のとおりです: インライン静的要素: INLINE-SELECTOR{ position:static; line-height:value; margin-left:value; margin-right:value; } ブロック静的要素: BLOCK-SELECTOR{ position:static; width:value; height:value; margin:value; } 2.2 絶対位置 绝对元素令你能够相对它们的定位最近祖先元素精确控制它们的所在方位。绝对元素是在正常元素排列顺序上的定位层进行解析的，就好像一个独立的盒模型，不像浮动元素，绝对元素是不流动的。可以使用position:absolute把任何元素当作绝对盒模型解析。用width和height来设置它的大小。百分比是相对它的定位最近的盒模型，而不是父元素。可以为left、 right、bottom和top赋值，把它放在定位最近的祖先元素的某一侧。可用margin让元素的边相对定位最近祖先元素的某边进行偏移。用z-index控制元素的堆叠顺序，拥有大z-index值得元素会处于靠近用户的定位层。模式如下： SELECTOR{ position:absolute; z-index:value; width:value; left:value; right:value; top:value; bottom:value; margin:value; } 2.3固定定位 想让元素脱离它的定位层，并把它固定在视窗中的某个位置，或者你想让它留在原本元素排列顺序中的位置上。当视窗滚动的时候，你不想让它随之一定。这被称为固定定位元素或者固定元素。可以用position:fixed把任何元素转化成固定定位元素。固定元素是相对视窗而不是其他定位最近的祖先元素放置的。所以说如果你把元素固定在原本排列顺序中的位置上，当视窗滚动的时候，它同样会原地不动。模式如下： SELECTOR{ position:fixed; z-index:value; width:value; height:value; margin:value; left:value; top:value; bottom:value; right:value; } 2.4相对定位 为了控制元素在正常排列位置上的堆叠顺序，可以用position:relative对它采取相对定位。相对元素的定位并没有脱离正常元素的排列位置，也没有改变它在正常排列位置时的形状。例如，如果一个内联元素横跨多行（大于等于一行），那么当对其进行相对定位后，它将会保留这个独特的布局。可以选择性地把相对定位元素从它的原始排列位置上进行偏移，使用left和top就可以了。把position:relative赋给任何元素，这样一来，绝对后代元素便可相对它来定位。模式如下： SELECTOR{ position:relative; z-index:value; left:auto; top:auto; }   三：盒模型探究学习 在CSS2.1中，块级元素只能是矩形形状的。当我们需要计算一个块级元素的整体尺寸时，需要同时把内容区域（content area）的长宽，连同此元素的外边距，内边距，以及边框都计算在内。盒子模型可以分为标准W3C盒子模型和IE盒子模型。标准W3C盒子模型如下图：   图1 该盒模型的范围包括margin、border、padding、content，并且content部分不包含其他部分。也就是说当我们在css中设计一个块级元素的width和height属性时比如.box{width ：100px; height:100px}时，其中的width 和height仅仅是对content部分设置的，即定义上图中padding-top和padding-bottom之间区域的长（padding-left和padding-right之间区域的宽）。而不是内容，内边距，边框的总和。而IE盒子模型如下图：   图2 该盒模型的范围包括margin、border、padding、content，和标准W3C盒子模型不同的是：IE盒子模型的content部分包含了border和padding。也就是说当我们在css中设计一个块级元素的width和height属性时比如.box{width ：100px; height:100px}时，其中的width 和height是内容，内边距，边框的总和。 对宽度为自动状态的静态（static）定位元素（即无定位），和相对定位元素来说，计算宽度的方法是，将他们包含块的宽度减去此元素的横向的所有外边距，内边距，边框，滚动条。也就是说，从包含块的宽度中除去元素的横向外边距，内边距，边框，滚动条（如果存在的话）的宽度，所剩的值就是了。举一个例子， .test1{ height:200px; padding:20px; margin:30px; border:10px dotted grey; background:red; } 这里，.test1没有设置position属性，即为默认的position:static。其中，html代码为： 静态定位或相对定位 。結果は次のようになります: 図 3 つまり、ブロックの幅が拡張され、その親要素の幅領域が自動的に埋められます。 しかし、フローティング要素と絶対配置要素は、コンテンツをしっかりと包み込むように縮小します。先ほどの例の .test1 が次のように書き換えられたとします。 ; position :Absolute; } html が変更されない場合、結果は次のようになります: 図 4 図 1 と図 2 では、必要な領域サイズを計算する例で次のことが明確にわかります。要素のマージンはすでに計算に含まれています。しかし実際には、垂直方向の位置決めされていない要素の隣接するマージンは、2 つの幅の合計ではなく、大きい方の幅のマージンの 1 つの値に重ね合わされます。これは、実際に要素を格納する必要がある領域のサイズを計算するときに、マージンの端から開始するのではなく、最も広いマージンのみが有効になり、より狭いマージンがより大きなマージンと重ね合わされることを意味します。以下の図に示すように: 図 5 さらに、要素の幅が 100% に設定されている場合 (つまり、親要素のコンテンツ幅が 100% である場合)、要素には何も含めるべきではありません。マージン、内側のマージン マージンまたはボーダーは、単に配置される領域に必要な領域を増やすだけです。これはデザイナーによって無視されることが多く、ページのレイアウトが著しく混乱し、コンテンツがオーバーフローしたり、要素が必要以上に広くなったりする可能性があります。例: .box{ background:red; height:200px; width:100%; } .contain{ background: yellow; height:220px ; 幅:300px; } そして、HTML コードは次のとおりです: つまり、マージンとパディングなしで、コンテンツの 100% が親要素を適切に埋めることができます。ここで、.box のスタイルが次のように変更されたとします。 } 残りを変更しない場合、結果は次のようになります。 このとき、要素の位置がずれて、左側の余白のみが表示されます。解決策は、ほとんどの場合、width プロパティに特定の値を追加することを避け、マージン、パディング、境界線のみを適用することです。 4: まとめ 今週は主に HTML のボックス モデルとポジショニング モデルを学習し、ボックス モデルのさまざまな属性と属性間の関係について理解を深めることができ、将来役立ちます。用途 上手に使いましょう。同時に、ブラウザによる CSS の解析についても学びました。