1ページのレイアウト
＃
1。Webページのレイアウトとは何ですか？レイアウトはタイプ設定として理解できます。私たちが知っているテキスト編集ツールにはすべて、word、nodpad ++などの独自のタイプ設定方法があります。
Webページのレイアウトは、ブラウザツールがWebページの要素をどのようにレイアウトするかを示します。
＃2。Webページのレイアウト/タイプ設定
2.1、標準フロー
2.2、フローティングフロー
2.3、ポジショニングフローの3つの方法
2番目の標準ストリーム
標準のフロータイプ設定方法は、ドキュメントフロー/通常フローとも呼ばれます。いわゆるドキュメントフローとは、要素のタイプ設定プロセスにおける要素の左から右、上から下へのフロー配置を指します。
＃1ブラウザのデフォルトのレイアウトは標準のストリームレイアウトです
3つのカテゴリの要素のCSS＃2：つまり、
ブロックレベルの
行内
のブロックレベルの行
＃3標準ストリームには、垂直タイプ設定と水平タイプ設定の2種類のタイプ設定があります。
垂直タイプ設定。要素がブロックレベルの要素の
場合、垂直タイプセットと水平タイプセットになります。要素がインライン要素またはインラインブロックレベルの場合要素、次に水平レイアウト
3つのフローティングストリーム
1.フローティングストリームは、標準ストリームから逸脱するタイプ設定方法です。ドキュメントストリームから逸脱するものは何ですか？ドキュメントフローのハーフオフとは何ですか？
1.1ドキュメントフローから何がありますか？
1.ドキュメントフローからのフローティング要素は
＃1を意味し、要素が水平方向にタイプセットできるレベルに関係なく、インライン、ブロックレベル、インラインブロックレベルを区別しなくなります
＃2、要素に幅と高さを設定できるレベルに関係なく
。前述のように、フローティングストリームの要素は、標準ストリームのインラインブロックレベル要素と非常によく似ています。
2.フローティング要素の非標準ドキュメントフローは
＃1を意味します。要素が浮き上がると、この要素は標準ストリームから削除されたように見えます。これはフローティング要素の非標準です。
＃2。前の要素が浮き上がったが、次の要素が浮き上がらない場合、垂直要素は自動的に埋められ、浮いている要素はリセット後に上書きされます。
注意点：
1.フローティングフローの型設定方法は、水平型設定のみで、左揃えまたは右揃えの要素しか設定できません。中央揃えはありません。つまり、中央値はありません。
2.フローティングストリームが使用されると、margin：0auto;無効
1.2では、ドキュメントフローの半分は何ですか？
コピーコード
ブレイクアウェイは、ハーフブレイクアウェイと完全ブレイクアウェイに分けられます。
完全な分離とは、通常のドキュメントフローで要素が最初に占めていたスペースが、要素が存在しないかのように閉じられることを意味します。
また、セミデタッチと呼ばれます。フローティング後のフローティング要素の位置は、フロート前の標準ストリーム内の位置に依存し、標準ストリームと一定の関係があるためです。たとえば、フローティング要素は、フローティング前の標準ストリーム内にあります。 2行目は、フロートした後、フローティングフローの2行目にもあります。他の行のフローティング要素が付着することはありません。例：フローティングフローは、標準フローで覆われた透明なフィルムです。フローティング後、標準フローからフローティングフローフィルムにスローされます。このフィルム上の彼の位置は、標準フロー位置のフローティング要素と同じ方向です。アタッチの基準は次のとおりです。
（1）誰が最初に同じ方向に浮かび、誰が前にいるのか
（2）異なる方向に左に浮くと左に浮く、右に浮くと右に浮く
1.3フローティングエレメントのスナップ
親要素の幅がすべての要素を表示するのに十分な場合、フローティング要素は並べて表示されます。
親要素の幅がすべての要素を表示するのに十分でない場合、フローティング要素は前の要素に貼り付けられます。十分でない場合は、前の要素が貼り付けられます。
親要素の左側に貼り付けるまで、幅が十分かどうかに関係なく、この行に表示されます
1.4浮遊要素ワード周囲現象
フローティングテキスト、画像、ハイパーリンク、その他の要素がフローティング要素に置き換わり、それらを囲むことはありません
1.5フローティングストリームレイアウトの演習
＃注：エンタープライズ開発でWebページをレイアウトする方法
＃1。垂直レイアウトには標準フローレイアウトを使用し、水平方向にはフローティングフローレイアウトを使用します
＃2。上から下への
レイアウト＃3。外側から内側へのレイアウト
＃4。水平方向は左と右に分けられ、さらに左と右にレイアウトされます
1.6フローティング要素の高さ（親の折りたたみとも呼ばれます）
＃1。標準ストリームでは、コンテンツの高さは親要素の高さをサポートできます。
＃2。フローティングストリームでは、フローティング要素は親要素の高さをサポートできません。子要素がフロートすると、父親のコンテンツの高さが0になり、親要素が折りたたまれているように見えるため、親折りたたみとも呼ばれます
1.7クリアフロート
クリアフローティング方式1：
これらのフローティング子要素の父の高さを設定します
＃1。注：
エンタープライズ開発では、このような固定の高さ制限により、ページ操作の柔軟性が失われるため、お勧めしません。
フローティング方法2をクリア：
クリア：なし|左|右|両方
注：クリア属性は、ブロックレベルの非フローティング要素で設定する必要があります
＃1、値：
なし：デフォルト値。フローティングオブジェクトは
左側で許可されます：左側のフローティングオブジェクトは許可されません
右：右側のフローティングオブジェクトは
両方とも許可されません：左右のフローティングオブジェクトは許可されません
＃2。2つのポイントを把握し
ます。1。要素は上から下、左から右に順番に読み込まれます。
2.クリア：左;他の要素に影響を与えることなくそれ自体で動作します。左側にフローティング要素ができたら、次の行に切り替えて左側の要素がフローティングになっていないことを確認し、これに基づいて親の折りたたみの問題を解決します。
＃注1：
要素は上から下、左から右に順番に読み込まれます。右側の要素がまだロードされていない場合、clear：rightは役に立たない
＃注2：
この方法の欠点は、clear属性を要素に追加すると、この属性のmargin-top属性が無効になる可能性があることです。したがって、clearを直接使用することはお勧めしません
仕切り壁方式
＃1。外壁メソッド
2.1 2つのボックスの間に追加のブロックレベル要素を追加します
2.2クリアを設定します：両方;この追加のブロックレベル要素の属性
注：
外壁メソッドでは、2番目のボックスでmargin-topを使用できます属性
外壁方式では、最初のボックスでmargin-bottom属性を使用できないため、通常、マージンの代わりに壁の高さを使用します。
在企业开发中可以为墙添加一个类h20，然后设置h20的高度为20实现外间距，搜狐网站大量使用了外墙法
＃2。内壁メソッド
3.1最初のボックスのすべてのサブ要素の最後に追加のブロックレベル要素を追加します
。3.2clear：both;この追加のブロックレベル要素の属性を設定します。
注：
内壁メソッドは2番目の要素を作成できます。ボックスはmargin-top属性を使用します。
内壁メソッドでは、最初のボックスでmargin-bottom属性を使用できます。
内墙法也可以为墙添加一个类h20，然后设置h20的高度为20实现外间距，搜狐网站大量使用了外墙法
＃3。内壁法と外壁法の違いは何ですか？
1.外壁方式では最初のボックスの高さをサポートできませんが、内壁ではサポートできます
2、在企业开发中清除浮动，内墙法与外墙法都不常用，因为添加一个无用的墙
在前端开发中推崇结构与样式分离，而隔墙法需要添加大量的没有意义的空标签div
フロート
をクリアする4番目の方法基本的な原則は内壁の方法と同じですが、フロントエンド開発のアイデア
#I、詳細な使用法に準拠するCSS疑似要素セレクターを使用する場合は、CSSを使用してスタイルを制御する必要があります。header
：after {<- ---要素の最後にクラス名「clearfix」のコンテンツを追加します;
content： "。"; <---- "。"のコンテンツは英語のピリオドです。書くこともできません。
display：block; <----追加された要素はブロックレベルの要素に変換されます。
クリア：両方; <----左右のフロートをクリアします。
可視性：非表示; <----可視性は非表示に設定されます。表示とは異なることに注意してください：なし;。
可視性：非表示;まだスペースを占有しているため、表示されません;
行の高さ：0; <----行の高さは0;
高さ：0; <----高さは0;
フォントサイズ：0; < ----フォントサイズは0です;
}
.header { *zoom:1;} <----兼容ie6,否则伪类选择器只能在谷歌浏览器中生效，其余没用
整段代码就相当于在浮动元素后面跟了个宽高为0的空div，然后设定它clear:both来达到清除浮动的效果。
之所以用它，是因为，你不必在html文件中写入大量无意义的空标签，又能清除浮动。
<div class="header"></div>
#II、必须要写的是下面这三句话
content: '.';
display: block;
clear: both;
#III、新浪首页清除浮动的方法，也是采用伪元素
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
＃1、疑似要素セレクター（CSS3の新しい要素セレクター）を確認する疑似要素セレクターの機能
は、
指定されたタグのコンテンツの前に子要素を追加するか、指定されたタグのコンテンツの後に子要素を追加することです。
＃2。形式：指定したタグの前後にサブ要素を追加します。
タグ名:: before { 属性名：値; }
标签名称::after{
属性名称：值；
}
フロートをクリアする5つの方法：
オーバーフロー：非表示ですが、実際にはフロートをクリアする以外にも他の用途があります
#1、可以将超出标签范围的内容裁剪掉
#2、清除浮动
#3、可以通过overflow：hidden，让里面的盒子设置margin-top属性后，外面的盒子不被顶下来，这样就不用为外边的盒子添加边框了
4つのポジショニングフロー
1.相対位置は、標準ストリーム内の以前の位置を基準にして移動することです。
フォーマット：
位置：相対
次の4つの属性で使用する必要があります。
上：20px;
左：30px;
右：40px;
下：50px;
1.1相対的な位置付けに関する注意点
コピーコード
＃1相対配置では、同じ方向の配置属性で使用できるのは、
上/下1つ、
左/右1つ、
＃2相対配置1つだけで、標準ストリームから逸脱せず、引き続き標準ストリームに残ります。スペースを占有する
＃3相対位置が標準ストリームから逸脱しないため、相対配置はブロックレベル、インライン、およびライン内のブロックレベル要素
＃4を区別します。これは、相対位置が標準ストリーム、および相対位置の要素から逸脱しないためです。標準ストリーム内の位置を占めるため、相対位置の要素
にマージン/パディングなどの属性を設定すると、標準ストリームのレイアウトに影響します。つまり、ラベルの元の位置に基づいて、相対位置のラベルにマリンまたはパディングを設定します。オフセットに基づく
1.2相対カウンターポイントのアプリケーションシナリオ
＃1、要素
＃2を微調整するために使用され、後で学習する絶対位置で使用します
2.絶対位置決めとは、位置決めストリーム内の本体または祖先要素に対する相対位置決めを指します
。2.1絶対位置決めの基準点
コード
＃1をコピーします。デフォルトでは、祖先の要素に関係なく、絶対に配置されたすべての要素は、参照点として本体を使用します。
＃2。絶対位置の要素に祖先要素があり、祖先要素が位置決めストリームでもある場合、絶対位置の要素は、位置ストリームの祖先要素を参照点として使用します。2.1絶対位置の要素の祖先要素である
限り
2.2祖先は位置決めフローである必要があります。ここでの位置決めフローとは、絶対位置決め、相対位置決め、および固定位置決めを指します（位置決めフローの静的位置決めのみは機能しません）。
2.3。絶対配置された要素に祖先要素があり、祖先要素内の複数の要素が配置ストリームである場合、この絶対配置された要素は、最も近い配置ストリームの祖先要素を参照点として使用します。
2.1絶対配置に関する注意点
＃1。絶対位置の要素は標準フローから外れているため、絶対位置の要素はブロックレベルの要素/インライン要素/インラインブロックレベルの要素を区別しません
＃2、絶対位置の要素がボディを参照点として使用する場合、実際にはWebページ全体の幅と高さを参照点として使用するのではなく、Webページの最初の画面の幅と高さを参照点として使用します。Webページは本体に対して相対的に配置され、ページ
＃3のスクロールに合わせてスクロールします。絶対位置の要素は祖先要素を無視します。パディング
2.3水平方向の中央に配置する絶対位置
＃1。ボックスが絶対位置にある場合、マージン：0自動、ボックス自体
を中央に配置することに注意してください。＃2。絶対位置にあるボックス自体を中央に配置する場合は、左：50％、マージン-左：-要素の幅を使用できます。ハーフピクセル;
2.4絶対位置決めのアプリケーションシナリオ
＃1、要素の微調整
に使用＃2、相対配置で使用
。一般に、相対配置と絶対配置は企業開発で一緒に表示され、別々に使用されることはめったにありません===>息子は父親な
ので、なぜ息子と父親を使用するのですか？下の写真を見てください
3.固定位置
コード
＃1をコピーします。固定位置（絶対位置に類似し、
背景に非常に類似しています）。background-attachment：固定;画像をスクロールバーでスクロールしない
ようにし、固定位置で特定の位置を作成できます要素がスクロールバーでスクロールしない
＃2。注
1.固定配置とは、ブラウザウィンドウを基準にした配置を意味します。ページのスクロール方法、このボックスの位置は変わりません。
2.固定位置決め要素は標準ストリームから分離されており、標準ストリームのスペースを占有しません。3
。固定位置決めは絶対位置決めと同じです。インライン、ブロックレベル、およびブロック内レベルは区別され
ません。4.E6は固定位置決めをサポートしていません。
固定位置決めアプリケーションシナリオ
Webページカプレット広告、
ページヘッダーバナー（浸透効果）
4.静的ポジショニング
＃1。静的配置とは何ですか？
デフォルトでは、標準ストリーム内の要素の位置属性は静的に等しいため、静的配置は実際にはデフォルトの標準ストリーム
5、z-indexです。
コピーコード
＃1、z-index属性：配置された要素のカバレッジ関係
1.1を指定するために使用され、z-index値は誰が誰を押しているかを示します。大きい値は小さい値をカバーします。
1.2、只有定位了的元素，才能有z-index值。也就是说，不管相对定位、绝
对定位、固定定位，都可以使用z-index值。而浮动的东西不能用。
1.3、z-index值没有单位，就是一个正整数。默认的z-index值是0。
1.4、如果大家都没有z-index值（默认所有元素z-index值为0），或者z-
index值一样，那么谁写在HTML后面，谁在上面能压住别人。定位了
的元素，永远能够压住没有定位的元素。
＃2。注：親現象（父親はカウンセリングされ、息子は役に立たない）から、
親要素にはzインデックス値がないため、子要素のzインデックスが大きくなり、
親要素のzインデックス値がカバーされます。同じ場合、親要素のzインデックスが大きく、誰が誰をカバーするか